VPF::Проблема кроссбраузерности... - Форум программистов

Iktash

Дата 1.8.2008, 18:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

Сильно не ругайте - я совсем начинающий верстальщик. Решил для примера сделать такую вещь:
user posted image

В опере получилось сностно (скрин из Оперы). А вот в ИЕ элемент Н5 уплыл далеко вверх и вправо. Как можно это поправить?

Код HTML:

Код


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div><h5>Статистика</h5></div>
</body>
</html>

Код CSS:

Код


body{
text-align: center
}
div{
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top: -31px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}

bars80080

Дата 1.8.2008, 18:13 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Код

* html h5 { top: 0px; }

Iktash

Дата 1.8.2008, 18:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

bars80080, уже лучше, но все равно неправильно позиционируется (теперь Н5 находится под рамкой дива и правее нужного положения).
П.С. А это вы мне посоветовали хак для ие? И может есть где-то собрание полезных хаков?

Это сообщение отредактировал(а) Iktash - 1.8.2008, 18:30

NDenis

Дата 1.8.2008, 18:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

а обнулить отступы для заголовка?

Код


h5 {margin:0; padding:0;}

вот так, примерно

Код


<style type="text/css">
body{
/*text-align: center; зачем?*/ 
}
div{
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top: -10px; /* 31px очень много */
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}
</style>

Код


<div><h5>Статистика</h5></div>

Это сообщение отредактировал(а) NDenis - 1.8.2008, 19:14

Iktash

Дата 1.8.2008, 19:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

NDenis, спасибо, в Опере все пучком, но в ИЕ все равно плохо располагается, причем теперь положение вообще не контролируется (изменение значения top ничего не меняет smile

)

Цитата

/*text-align: center; зачем?*/

Это просто для центрирования в ИЕ.

bars80080

Дата 1.8.2008, 19:49 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

и даже хаком не удаётся впарвить в нужное место? (хак должен идти после всех стилей)

Iktash

Дата 1.8.2008, 20:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

bars80080, неа, не удается. Еще пробовал вынести заголовок за див:

Код


<div></div><h5>Статистика</h5>

Тогда этот заголовок прижимается к левому верхнему углу окна.

Да, кстати, в Firefox тоже неправильное расположение, причем не похожее ни на что...

Это сообщение отредактировал(а) Iktash - 1.8.2008, 20:57

IBS

Дата 1.8.2008, 23:31 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Попробуй так - у меня работает в opere и ie, с остальными не прокатит:

Код


<html><head>
<style>
body{
text-align: center; margin:0; padding:0;
}
div{
text-align: left; 
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: relative;
top: -31px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}
</style>

<!--[if IE]>
<style>
h5{
position: relative;
top: -8px;
left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}
</style>
<![endif]-->
</head><body>
<div><h5>Статистика</h5></div>
</body></html>

Добавлено через 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) - надо их обнулять smile

webster

Дата 1.8.2008, 23:47 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

IBS совершенно прав, для "сбрасывания" выравнивания блока по центру видимой области экрана, необходим вернуть свойство text-align в прежнее состояние - выравнивание по-левому краю, в противном случае позиционированные элементы относительно div будут рассчитывать свои координаты относительно центра блока:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* {
    margin: 0px; padding: 0px;
}
body{
text-align: center
}
div{
position: relative;
text-align: left;
margin: 10px auto 0;
width: 250px;
height: 400px;
border-color: red;
border-width: 2px;
border-style: solid;
background-color: white;
}
h5{
position: absolute;
margin-top: -10px;
margin-left: 10px;
background-color: white;
width: 70px;
padding-left: 2px;
border-color: red;
border-width: 2px;
border-style: solid;
}

</style>
</head>
<body>
<div><h5>Статистика</h5></div>
</body>
</html>

Это сообщение отредактировал(а) webster - 1.8.2008, 23:47

Iktash

Дата 2.8.2008, 00:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

webster, IBS, спасибо. Вот теперь действительно работает везде. Даже сам в шоке, что забыл вернуть прежнее значение text-align.
Для ясности может объясните еще, когда какое позиционирование лучше использовать. Ведь я изначально пробовал относительное, а диву вообще нормальное оставил. Как понять?
И еще: h5{position: absolute;} Здесь элемент позиционируется абсолютно, но координаты его рассчитываются все равно относительно дива, в котором заголовок находится. Что изменяется, если заголовок будет позиционирован как relative?

webster

Дата 2.8.2008, 00:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

relative - при использовании этого свойства элемент не изымается из нормального хода документа, т.е. он продолжает занимать определенное место в родительском элементе и просто смещается относительно его, иногда это не очень удобно, потому как, например, надо начинать еще и заполнение родительского элемента текстом с самого его начала, в таком случае можно использовать position: absolute; в таком случае элемент уже не оказывает никакого влияния на окружающие его элементы, он как бы не занимает вообще место в нормальном ходе документа, а просто располагается сверху (или снизу, но это уже регулируется свойством z-index). Для того, чтобы элемент со свойством position: absolute; имел точку позиционирования отличную от левого верхнего угла окна броузера, надо задать свойство позиционирования position: relative; для родительского элемента, в таком случае позиционирование будет осуществляться относительно левого верхнего угла родителя.

Iktash

Дата 2.8.2008, 00:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

webster, большое спасибо! Вот теперь я разобрался.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »