Страница 1 из 1
Позиционирование по центру
Добавлено:
Пн июл 14, 2008 10:32 Skay
Как сделать блок по ширине контента и по центру?
- Код: Выделить всё
<html>
<head>
<style>
div#container {
overflow: hidden;
border: 1px dashed red;
}
div.block{
float: left;
margin: 2px;
width : 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
если контейтер сделать фиксированной ширины, то центрирование выполнить просто при помощи
margin: 0 auto... если сделать блок по ширине контента при помощи
display: inline, то маргином уже так не сделать))
Добавлено:
Пн июл 14, 2008 11:03 Muerto
2Skay: Под каким доктайпом сайт?
Добавлено:
Пн июл 14, 2008 12:04 Skay
<!-- это место свободно для вашего доктайпа -->
<html>
<head>
.....
Добавлено:
Пн июл 14, 2008 12:28 Muerto
Скриптом, как я понимаю не приветствуется?
Добавлено:
Пн июл 14, 2008 12:40 Muerto
- Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
#container {
border: 1px solid red;
overflow:hidden;
display: table;
zoom:1;
width: expression(this.childNodes.length*106 + 2 + "px");
}
.block{
float: left;
margin: 2px;
width : 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<center>
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</center>
</body>
</html>
Валидно, конечно, как вся моя жизнь!
Но, вроде, работает. Тестировал под ИЕ6, Опера 9.5, ФФ 2.0.0.15.
Добавлено:
Пн июл 14, 2008 13:17 Skay
а зачем там zoom? и про доктайп ты зачем спрашивал?) оно вроде и без доктайпа и без зума работает как надо) весь секрет, видимо, в display: table
Добавлено:
Пн июл 14, 2008 15:59 Jedi
А display: table разве под ИЕ работает?
Добавлено:
Пн июл 14, 2008 16:03 Jedi
и секрет позиционирования по центру тут
width: expression(this.childNodes.length*106 + 2 + "px");
Добавлено:
Пн июл 14, 2008 16:07 Skay
Добавлено:
Пн июл 14, 2008 16:21 Muerto
- Код: Выделить всё
width: expression(this.childNodes.length*106 + 3 + "px");
поставь.
zoom - это для лэйтаута для ИЕ6.
Добавлено:
Пн июл 14, 2008 16:23 Skay
там ровно получается при +4 =)) только откуда 2 дополнительных пикселя? 0_о
Добавлено:
Пн июл 14, 2008 16:25 Muerto
2Skay: А черт его ведает! Експлорер - штука хитрая! Наверное внешний бордер считает.
Добавлено:
Пн июл 14, 2008 16:39 Skay
дык, внешний бордер как раз и есть +2 =) еще два пикселя откуда взялись непонятно 0_о
Добавлено:
Пн июл 14, 2008 17:00 Muerto
2Skay: Главное - работает машинка то!
Добавлено:
Ср июл 16, 2008 23:14 Skay
заметил очень неприятную проблему от FireFox2... если в блоки вставить картинки, то сам код загружается раньше картинок и видимо вычисляется ширина блока, после загрузки картинок ширина меняется и в итоге блоки по ширине не помещаются в контейнере и выстраиваются вертикально один над другим... если перезагрузить страницу с загрузкой картинок из кэша, то отображаться будет как задумано изначально...
- Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
#container {
border: 1px solid red;
overflow:hidden;
display: table;
zoom:1;
width: expression(this.childNodes.length*106 + 2 + "px");
}
.block{
float: left;
margin: 2px;
border: 1px solid black;
}
</style>
</head>
<body>
<center>
<div id="container">
<div class="block"><img src="http://www.muerto.ru/images/new/muerto_logo.png"></div>
<div class="block"><img src="http://forum.mweb.ru/images/avatars/66215026947e617d2c7eb4.png"></div>
<div class="block"><img src="http://forum.mweb.ru/images/avatars/547180073452ce5c92ab0a.gif"></div>
<div class="block"><img src="http://forum.mweb.ru/images/avatars/1605616448483c27eab419a.jpg"></div>
</div>
</center>
</body>
</html>
Добавлено:
Чт июл 17, 2008 10:36 Muerto
ФФ не понимает экспрешен, он понимает display: table.Загружай картинки прелоадом если такая проблема (хотя я такого не наблюдал - дай ссылку).
Добавлено:
Чт июл 17, 2008 10:39 Skay
вон код дал) создай файл на локал и попрактикуй чередование клавиш - F5, Ctrl+F5...
Добавлено:
Чт июл 17, 2008 12:03 Muerto
Хммм... Бред.
Попробуй так:
- Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
#container {
border: 1px solid red;
overflow:hidden;
display: table;
height:1%;
white-space:nowrap;
zoom:1;
width: expression(this.childNodes.length*106 + 2 + "px");
}
.block{
display:inline;
margin: 2px;
}
</style>
</head>
<body>
<center>
<div id="container">
<div class="block"><img src="http://www.muerto.ru/images/new/muerto_logo.png"></div><div class="block"><img src="http://forum.mweb.ru/images/avatars/66215026947e617d2c7eb4.png"></div><div class="block"><img src="http://forum.mweb.ru/images/avatars/547180073452ce5c92ab0a.gif"></div><div class="block"><img src="http://forum.mweb.ru/images/avatars/1605616448483c27eab419a.jpg"></div>
</div>
</center>
</body>
</html>
Добавлено:
Чт июл 17, 2008 12:19 Skay
ну ты баг то увидел?))
Добавлено:
Чт июл 17, 2008 12:24 Muerto
2Skay: Увидел. Но природу его не догнал. Мой новый код подошел?
P.-S. 2500 однако!!!
Добавлено:
Чт июл 17, 2008 14:21 Skay
2Muerto: твой код не проверял пока))
>P.-S. 2500 однако!!!
my congratulation
Добавлено:
Чт июл 17, 2008 14:25 Berezkin
2Skay: я проверил, помогает
Добавлено:
Чт июл 17, 2008 15:31 Muerto
2Skay: В субботу, в Лужниках.
