![]() |
Модераторы: Illuminaty |
![]() ![]() ![]() |
|
Iktash |
|
||||
Новичок Профиль Группа: Участник Сообщений: 17 Регистрация: 1.8.2008 Где: Украина Репутация: нет Всего: нет |
Сильно не ругайте - я совсем начинающий верстальщик. Решил для примера сделать такую вещь:
![]() В опере получилось сностно (скрин из Оперы). А вот в ИЕ элемент Н5 уплыл далеко вверх и вправо. Как можно это поправить? Код HTML:
Код CSS:
|
||||
|
|||||
bars80080 |
|
|||
![]() прапор творюет ![]() ![]() ![]() ![]() Награды: 1 Профиль Группа: Завсегдатай Сообщений: 12022 Регистрация: 5.12.2007 Где: Königsberg Репутация: 50 Всего: 315 |
|
|||
|
||||
Iktash |
|
|||
Новичок Профиль Группа: Участник Сообщений: 17 Регистрация: 1.8.2008 Где: Украина Репутация: нет Всего: нет |
bars80080, уже лучше, но все равно неправильно позиционируется (теперь Н5 находится под рамкой дива и правее нужного положения).
П.С. А это вы мне посоветовали хак для ие? И может есть где-то собрание полезных хаков? Это сообщение отредактировал(а) Iktash - 1.8.2008, 18:30 |
|||
|
||||
NDenis |
|
||||||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 317 Регистрация: 14.12.2007 Репутация: 8 Всего: 8 |
а обнулить отступы для заголовка?
вот так, примерно
Это сообщение отредактировал(а) NDenis - 1.8.2008, 19:14 |
||||||
|
|||||||
Iktash |
|
|||
Новичок Профиль Группа: Участник Сообщений: 17 Регистрация: 1.8.2008 Где: Украина Репутация: нет Всего: нет |
NDenis, спасибо, в Опере все пучком, но в ИЕ все равно плохо располагается, причем теперь положение вообще не контролируется (изменение значения top ничего не меняет
![]()
Это просто для центрирования в ИЕ. |
|||
|
||||
bars80080 |
|
|||
![]() прапор творюет ![]() ![]() ![]() ![]() Награды: 1 Профиль Группа: Завсегдатай Сообщений: 12022 Регистрация: 5.12.2007 Где: Königsberg Репутация: 50 Всего: 315 |
и даже хаком не удаётся впарвить в нужное место? (хак должен идти после всех стилей)
|
|||
|
||||
Iktash |
|
|||
Новичок Профиль Группа: Участник Сообщений: 17 Регистрация: 1.8.2008 Где: Украина Репутация: нет Всего: нет |
bars80080, неа, не удается. Еще пробовал вынести заголовок за див:
Тогда этот заголовок прижимается к левому верхнему углу окна. Да, кстати, в Firefox тоже неправильное расположение, причем не похожее ни на что... Это сообщение отредактировал(а) Iktash - 1.8.2008, 20:57 |
|||
|
||||
IBS |
|
|||
![]() Бывалый ![]() Профиль Группа: Участник Сообщений: 214 Регистрация: 29.7.2008 Где: Белоруссия Репутация: 2 Всего: 6 |
Попробуй так - у меня работает в opere и ie, с остальными не прокатит:
Добавлено через 12 минут и 30 секунд Я сам не проверял, но возможно этот код будет работать под все браузеры. <html><head> <style> body{ text-align: center; margin:0; padding:0; } div{ text-align: left; margin: 10px auto; padding:0; width: 250px; height: 400px; border-color: red; border-width: 2px; border-style: solid; background-color: white; } h5{ position: relative; top:-8px; left: 10px; background-color: white; width: 70px; padding-left: 2px; border-color: red; border-width: 2px; border-style: solid; margin-top:0px; } </style> </head><body> <div><h5>Статистика</h5></div> </body></html> Все основные изменения я отметил красным, основная фишка в том, что opera для тегов Н создаёт отступы(margin) - надо их обнулять ![]() |
|||
|
||||
webster |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 361 Регистрация: 1.1.2007 Репутация: 34 Всего: 34 |
IBS совершенно прав, для "сбрасывания" выравнивания блока по центру видимой области экрана, необходим вернуть свойство text-align в прежнее состояние - выравнивание по-левому краю, в противном случае позиционированные элементы относительно div будут рассчитывать свои координаты относительно центра блока:
Это сообщение отредактировал(а) webster - 1.8.2008, 23:47 |
|||
|
||||
Iktash |
|
|||
Новичок Профиль Группа: Участник Сообщений: 17 Регистрация: 1.8.2008 Где: Украина Репутация: нет Всего: нет |
webster, IBS, спасибо. Вот теперь действительно работает везде. Даже сам в шоке, что забыл вернуть прежнее значение text-align.
Для ясности может объясните еще, когда какое позиционирование лучше использовать. Ведь я изначально пробовал относительное, а диву вообще нормальное оставил. Как понять? И еще: h5{position: absolute;} Здесь элемент позиционируется абсолютно, но координаты его рассчитываются все равно относительно дива, в котором заголовок находится. Что изменяется, если заголовок будет позиционирован как relative? |
|||
|
||||
webster |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 361 Регистрация: 1.1.2007 Репутация: 34 Всего: 34 |
relative - при использовании этого свойства элемент не изымается из нормального хода документа, т.е. он продолжает занимать определенное место в родительском элементе и просто смещается относительно его, иногда это не очень удобно, потому как, например, надо начинать еще и заполнение родительского элемента текстом с самого его начала, в таком случае можно использовать position: absolute; в таком случае элемент уже не оказывает никакого влияния на окружающие его элементы, он как бы не занимает вообще место в нормальном ходе документа, а просто располагается сверху (или снизу, но это уже регулируется свойством z-index). Для того, чтобы элемент со свойством position: absolute; имел точку позиционирования отличную от левого верхнего угла окна броузера, надо задать свойство позиционирования position: relative; для родительского элемента, в таком случае позиционирование будет осуществляться относительно левого верхнего угла родителя.
|
|||
|
||||
Iktash |
|
|||
Новичок Профиль Группа: Участник Сообщений: 17 Регистрация: 1.8.2008 Где: Украина Репутация: нет Всего: нет |
webster, большое спасибо! Вот теперь я разобрался.
|
|||
|
||||
![]() ![]() ![]() |
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |