Позиционирование по центру

Старый mweb

Модератор: [mweb team]

Позиционирование по центру

Сообщение Skay Пн июл 14, 2008 10:32

Как сделать блок по ширине контента и по центру?

Код: Выделить всё
<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, то маргином уже так не сделать))
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Пн июл 14, 2008 11:03

2Skay: Под каким доктайпом сайт?
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Пн июл 14, 2008 12:04

<!-- это место свободно для вашего доктайпа -->

<html>
<head>
.....


-09-
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Пн июл 14, 2008 12:28

Скриптом, как я понимаю не приветствуется?
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Muerto Пн июл 14, 2008 12:40

Код: Выделить всё
<!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>

Валидно, конечно, как вся моя жизнь! -06-
Но, вроде, работает. Тестировал под ИЕ6, Опера 9.5, ФФ 2.0.0.15.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Пн июл 14, 2008 13:17

а зачем там zoom? и про доктайп ты зачем спрашивал?) оно вроде и без доктайпа и без зума работает как надо) весь секрет, видимо, в display: table
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Jedi Пн июл 14, 2008 15:59

А display: table разве под ИЕ работает?
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Сообщение Jedi Пн июл 14, 2008 16:03

и секрет позиционирования по центру тут
width: expression(this.childNodes.length*106 + 2 + "px");
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Сообщение Skay Пн июл 14, 2008 16:07

Изображение
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Пн июл 14, 2008 16:21

Код: Выделить всё
width: expression(this.childNodes.length*106 + 3 + "px");
поставь.

zoom - это для лэйтаута для ИЕ6.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Пн июл 14, 2008 16:23

там ровно получается при +4 =)) только откуда 2 дополнительных пикселя? 0_о
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Пн июл 14, 2008 16:25

2Skay: А черт его ведает! Експлорер - штука хитрая! Наверное внешний бордер считает.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Пн июл 14, 2008 16:39

дык, внешний бордер как раз и есть +2 =) еще два пикселя откуда взялись непонятно 0_о
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Пн июл 14, 2008 17:00

2Skay: Главное - работает машинка то!
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Ср июл 16, 2008 23:14

заметил очень неприятную проблему от 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>
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Чт июл 17, 2008 10:36

ФФ не понимает экспрешен, он понимает display: table.Загружай картинки прелоадом если такая проблема (хотя я такого не наблюдал - дай ссылку).
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Чт июл 17, 2008 10:39

вон код дал) создай файл на локал и попрактикуй чередование клавиш - F5, Ctrl+F5...
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Чт июл 17, 2008 12:03

Хммм... Бред.
Попробуй так:
Код: Выделить всё
<!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>
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Чт июл 17, 2008 12:19

ну ты баг то увидел?))
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Muerto Чт июл 17, 2008 12:24

2Skay: Увидел. Но природу его не догнал. Мой новый код подошел?
P.-S. 2500 однако!!! -06-
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение Skay Чт июл 17, 2008 14:21

2Muerto: твой код не проверял пока))


>P.-S. 2500 однако!!!

my congratulation -22- -03-
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Сообщение Berezkin Чт июл 17, 2008 14:25

2Skay: я проверил, помогает
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Чт июл 17, 2008 15:31

2Skay: В субботу, в Лужниках. -22-
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 17

cron