|
0 Всего найдено: 57
Pomidorisgogo
Сообщение
06/03/2007 14:03
Копия темы
А как выровнять вёрстку на дивах по центру вертикали страницы не вставляя её в стопроцентную таблицу, кто-нибудь может подсказать?
summerstyle
Сообщение
06/03/2007 14:22
Копия темы
посмотрите мою верстку: В современных браузерах все очень хорошо выравнивается, а специально для IE6 придется использовать хак (смотрите мой код)
404
Сообщение
06/03/2007 14:24
Копия темы
Если это полноценная верстка – то никак. Если это отдельная картинка, то можно задать для нее vertical-align: middle, а для родительского блока – font-size = height. В теории, наверно можно от этого оттолкнуться и поколдовать... но: оно вам действительно надо?
Pomidorisgogo
Сообщение
06/03/2007 14:24
Копия темы
В таблицу всегда успею вставить, у меня спортивный интерес – хочется на всём сайте без таблиц обойтись.
Pomidorisgogo
Сообщение
06/03/2007 14:25
Копия темы
Сам див. Общий контейнер с остальным содержимым внутри.
Pomidorisgogo
Сообщение
06/03/2007 14:26
Копия темы
Речь о всей вёрстке. Хочется понять, можно ли совсем обойтись без таблиц или никак.
Pomidorisgogo
Сообщение
06/03/2007 14:29
Копия темы
Интересное решение. Но у Вас по-моему задана процентная высота для той части, что над логотипом?
404
Сообщение
06/03/2007 14:39
Копия темы
Наверняка можно. Но наверно пока что это гораздо более трудоемко и менее кроссбраузерно, чем таблицы. Иначе все бы давно так и делали. По хорошему, все должно решаться заданием фиксированной высоты дива и margin: auto auto; Но на настоящий момент это не поддерживается большинством браузеров (сказать всеми – не могу, потому что точно не знаю). Если очень и очень хочется дивов – сделайте простенький JS-скрипт, высчитывающий clientheight и от этого меняющий top: для дива.
summerstyle
Сообщение
06/03/2007 14:45
Копия темы
Нет, вертикальное центрирование выполнено с помощью vertical-align: middle; div.wrap1 { display: table-cell; vertical-align: middle; } +определенные свойства внутреннего и внешнего блока. Чтобы заставить блок выравниваться по вертикали во ВСЕХ браузерах, я использовала несколько приемов. Для IE 6,7 здесь используется хак. Конечно, можно было бы сделать div {position: absolute, top: 50%; } Но тогда при уменьшении окна браузера меньше размеров блока блок уезжал, причем его нельзя было прокрутить. Но для маленьких блоков и такой вариант сойдет.
EXEtrimALL
Сообщение
06/03/2007 15:04
Копия темы
не пробовали вот так прописать: html, body { height: 100%; }
Pomidorisgogo
Сообщение
06/03/2007 15:42
Копия темы
Да, именно так. По горизонтали я выровняла вёрстку с помощью margin: auto, а по вертикали этот же приём не работает. Скрипты я писать не умею, к сожалению, но, попробую поискать готовый – где-то уже встречала такой для горизонтального выравнивания.
Pomidorisgogo
Сообщение
06/03/2007 15:45
Копия темы
Да, top 50% не подходит. Я опытным путём вычислила, что надо задавать 10%, но оказалось, что в каком-то из разрешений это выглядит ни туда, ни сюда. Ваш же метод, боюсь, потребует полной перевёрстки всего макета, хотя смотрится элегантно. Наверное, таблица всё-таки дешевле выйдет :)
tapazukk
Сообщение
06/03/2007 15:45
Копия темы
Засунуть все в общий контейнер, если известна высота то: html,body {margin:0;padding:0;width:100%;height:100%;} div{ height:400px; position:absolute; top:50%; margin-top:-200px;} Если нужна резина, то html,body {margin:0;padding:0;width:100%;height:100%;} div{ width:50%;height:50%;position:absolute;top:25 %;left:25%;}
tapazukk
Сообщение
06/03/2007 15:51
Копия темы
полезно процентная высота считается относительно родительского элемента, а так она будет как auto (те по содержимому)
summerstyle
Сообщение
06/03/2007 15:59
Копия темы
Я забыла добавить: div {position: absolute, top: 50%; margin-top: -200px; height: 400px; } Может, так Вам подойдет. То есть надо сделать отрицательные поля в половину высоты блока.
Pomidorisgogo
Сообщение
06/03/2007 16:13
Копия темы
А зачем мне знать скрипты? Я и верстаю-то очень редко, обычно кому-нибудь спихиваю. В данном же случае мне думается, овчинка выделки не стоит – если готовый скрипт не найдётся, то только в таблицу.
Pomidorisgogo
Сообщение
06/03/2007 16:20
Копия темы
Попробовала как Вы написали. Теперь в небольших разрешениях контейнер встаёт по центру (в большом чуть сьезжает вниз, но да ладно), но притягивается к левому краю браузера. Оно и понятно, ведь margin: auto теперь отменён. Я применила тот же алгоритм, сейчас проверю во всех браузерах...
Pomidorisgogo
Сообщение
06/03/2007 16:21
Копия темы
Да, спасибо, мне ниже Илья уже подсказал. Вроде работает, разве что в большом разрешении (1600 на 1200) не очень корректно. Но у заказчика экран поменьше, так что может и сойдёт... ;)
Pomidorisgogo
Сообщение
06/03/2007 16:26
Копия темы
Я собственно последнее время именно так и поступала. Но в этот раз захотелось пойти на принцип :) Хотя, боюсь, всё равно ничего не выйдет – выравнивание форм в ИЕ – больное место. А сочинять для них хаки у меня моск не выдерживает, не верстальщик я...
Pomidorisgogo
Сообщение
06/03/2007 16:29
Копия темы
Мда, не выйдет ничего – в Опере полная ж..а! Ещё и скролинг вертикальный.
tapazukk
Сообщение
06/03/2007 16:34
Копия темы
как станиславский неповерю. выложите плиз архивчик с проблемным макетом.
Pomidorisgogo
Сообщение
06/03/2007 17:47
Копия темы
Так ведь не работает – контейнер приклеивается к потолку.
Pomidorisgogo
Сообщение
06/03/2007 17:51
Копия темы
Всё, отбой! Я поняла в чём дело – после того, как переключаешь экран в более низкое разрешение, в Опере надо жать F5 – автоматически она страницу не сплющивает как другие браузеры. Но если Вы успели получить архив, то я была бы Вам очень признательна, если бы Вы ответили мне на другой вопрос – там ещё один глючок противный в Опере есть :(
Pomidorisgogo
Сообщение
06/03/2007 17:56
Копия темы
Да, но понимаете в чём дело – на том сайте, откуда я стащила нужный мне стиль, всё прекрасно в Опере работает. А у меня нет. Ну вообщем как обычно... :))
Pomidorisgogo
Сообщение
06/03/2007 18:00
Копия темы
В глубине души я конечно тоже уважаю таблицы, тем более, что на них я верстаю быстро-быстро, а с дивами у меня такое чувство, словно на костылях перемещаюсь – долго, утомительно, и спотыкаюсь всё время. Но честное слово – так не хочется отставать от жизни... :) Если бы я ещё верстала регулярно, то скучать бы точно не пришлось, а когда раз в 2-3 месяца, хочется как-то держать себя в форме.
Pomidorisgogo
Сообщение
06/03/2007 18:01
Копия темы
Видимо да, я не удаляла. Но я успела скопировать себе.
Pomidorisgogo
Сообщение
06/03/2007 18:03
Копия темы
Я пыталась сделать форму в две колонки – слева текст, справа поля. Результат либо плывёт в ИЕ, либо в других браузерах. В итоге я уже выстроила всё по одному левому краю, так что проблема отпала. Правда таблица осталась, ну да и фих с ней...
tapazukk
Сообщение
06/03/2007 18:11
Копия темы
Добавтете для html, body{ padding:0;}, чтобы убрать в опере скролл вертикальный и удалите margin: auto; у блока #container. И все будет гут (затестил ;)
tapazukk
Сообщение
06/03/2007 18:17
Копия темы
re:там ещё один глючок противный в Опере есть :( не заметил, какой?
Pomidorisgogo
Сообщение
06/03/2007 18:28
Копия темы
Если навести курсор на чёрно-белую фотографию в правой колонке, выпадающий из неё слой появляется не над, а под ней, и даже под текстом. И что самое интересное, при снятии курсора до конца слой не убирается почему-то... Это только в Опере так (8.54). Ха, и вот ещё – а в Нетскейпе этот же слой возникает где-то далеко в левом углу экрана! Нет, этот ваш CSS это просто песня... :))) Если Вас не затруднит глянуть, я просто скопирую сюда фрагменты кода: === СSS ===== .thumbnail{ z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: white; padding: 2px; left: -1000px; border: 1px solid gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 4px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 200px; left: 20px; /*position where enlarged image should offset horizontally */ z-index: 50; } ============================== ==== HTML ==== ================================
Pomidorisgogo
Сообщение
06/03/2007 19:21
Копия темы
Я попробую так сделать, но уже в следующем проекте – с этим я уже устала просто...
tapazukk
Сообщение
06/03/2007 19:53
Копия темы
// Нет, этот ваш CSS это просто песня... :))) ну уж и делали б лучше с нулья в чужом css (хотя, css-css'у рознь) копаться дело ведь неблагодарное :))) (просто плохо там как-то реализовано все... кхм) да,отвлекся- добавте display:block; .thumbnail{ z-index: 0; display:block; } В NS не заметил ничего такого.
Pomidorisgogo
Сообщение
06/03/2007 20:41
Копия темы
0
Ну что ж делать, я стащила вышеописаный метод с Dynamic Drive – не изобретать же велосипед заново :) Если у Вас не глючит, это уже обнадёживает – авось, и у заказчика всё будет ОК. Спасибо! |
|
Выразить восторг, поругаться или предложить что-нибудь можно на форуме |
Для обсуждения этого сервиса так же есть темы на фрилансе по поиску , флудотопу ,и по удалённым сообщениям ,и по Актуальным/популярным темам , и по топу "кто кому больше наотвечал" |