Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Центрированные слои


Автор: Guide 30.7.2008, 08:17
В общем скажу сразу, только недавно начал переходить с табличной вёрстки на послойную. В глаза бросился сайт deviantart.com, вернее бросилась в глаза реализация центрирования плавающих слоёв. Сколько я не копался в их кодах, в итоге не смог отделить мёд от дёгтя. В общем прошу вас помочь решить данную проблему.
К сообщению прикрепил картинку. Объясню что нужно сделать:
Есть три слоя -> Зелённый (Контейнер), Оранжевый (Малый контейнер), Голубой (Картинка). Как из рисунка понятно, планируется галерея.
Задача заключается в том чтобы все контейнеры и рисунок были центрированы. При этом Зелённый не имеет фиксированной ширины (width: 100%), Оранжевый имеет фиксированную ширину(width: 210px), Рисунок имеет только фиксированную высоту, то есть может менять ширину, но в пределах ширины Оранжевого слоя.
Надеюсь я правильно объяснился, буду рад и очень благодарен если найдутся люди которые решат мою проблему. Спасибо за внимание.

http://ipicture.ru/Gallery/Viewfull/4325425.html

Автор: bars80080 30.7.2008, 09:01
м-м-м, завернуть все оранжевые в дополнительный контейнер без указания ширины. этот внешний контейнер отцентровать в зелёном? внутри тоже выравнивание по центру
далее назначить оранжевым контейнерам боковые маргины в процентах, и все они должны быть display: inline;


такая вот идея

Автор: Guide 30.7.2008, 09:12
Идею не совсем понял. Если не сложно, рабочий пример.... smile 

Автор: bars80080 30.7.2008, 11:32
к сожалению, могу толкать только идеи

вот пример отлично пашуший в ИЕ6
Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
html, body { width: 100%; height: 100%; }
#green { width: 100%; height: 100%; background: #66ff66; text-align: center; }
#mid { /*border: solid 1px #ff0000; width: 700px;*/ margin: 0px auto; }
#mid div.orange { width: 210px; margin: 20px 20px; background: #ffbb00; display: inline; }
#mid div.orange img { width: 170px; display: inline; margin: 10px 20px; }
</style>
</head><body>
<div id="green"><div id="mid">

<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>

</div></div>
</body></html>
 однако в ФФ3 претерпевает не понятные изменения. если мне кто-нибудь объяснит, что фаерфокс о себе думает, буду признателен

Автор: webster 30.7.2008, 12:09
bars80080 вы же объявили для :
Код

#mid div.orange { .... display: inline; }

он и ведет себя как обычная строка - нет вертикальных полей и отступов, высота равна высоте содержащейся в нем строки (или пробельного символа). Один из выходов из сложившейся ситуации - это "дорисовать" оранжевый фон к самим изображениям.

Автор: bars80080 30.7.2008, 12:43
бред какой-то, в очередной раз убеждаюсь что ФФ с логикой не дружит сильнее ИЕ

так и не сумел заставить его и центрировать нормально и отображать поля. любой внутренний блок с display: block; выстраивает элементы в колонку

а делать поля дорисовкой, извини, это мягко говоря на танках в булочную ездить

Автор: krundetz 30.7.2008, 13:01
гдето видел кросбраузерное решение это задачи надо пошерстить закладки если найду выложу.

Автор: Guide 30.7.2008, 13:49
Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
html, body { width: 100%; height: 100%; }
#green { width: 100%; height: 100%; background: #66ff66; text-align: center; }
#mid { /*border: solid 1px #ff0000; width: 700px;*/ margin: 0px auto; }
#mid div.orange { width: 210px; margin: 20px 20px; background: #ffbb00; display: inline-block; }
#mid div.orange img { width: 170px; display: inline; margin: 10px 20px; }
</style>
<!--[if IE]>
<style>
#mid div.orange { display: inline; }
</style>
<![endif]-->
</head><body>
<div id="green"><div id="mid">
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
<div class="orange"><img src="00fon02.png" /></div>
</div></div>
</body></html>


Эх выы!  smile 

Автор: bars80080 30.7.2008, 14:03
а я блин что-то читаю 
Цитата(htmlbook @  ,  , http://htmlbook.ru/css/display.html)
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный
 и воспринимаю, что будет та же бяка, что и с inline в ФФ


эх, проверять надо

Автор: Guide 30.7.2008, 14:07
Наверно вопрос можно считать решенным? Или есть умельцы которые сделают лучше?

Автор: bars80080 30.7.2008, 14:41
а чем тебе не нравится? вроде идеально соответствует твоей картинке

Автор: Guide 31.7.2008, 13:38
Короче, вот кроссбраузерное решение без извратов (Conditional comments) и красиво. Всем спасибо, почти ничем не помогли.  smile 

Код

<!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=utf-8" />
<title>Smile! :)</title>
</head>
<style>
.container {
    text-align:center;
}

.ctr {
    display:inline;
    zoom:1;
    width:218px;
}

.orange{
    display:table-cell;
    display:inline-block;
    background-color:#FFCC00;
    height:150px;
    margin:4px;
    width:210px;
    overflow:hidden;
}

.orange img
{
    
    max-height:140px;
}

.blue
{
    text-align:center;
    width:200px;
    height:140px;
    margin:5px;
    background-color:#0099FF;
}

</style>
<body>
<div class="container" >
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:20px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:40px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:60px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:80px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:100px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:120px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:140px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:160px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:180px" /></div></div>
</div>
<div class="ctr">
  <div class="orange"><div class="blue"><img src="img.jpg" style="width:200px" /></div></div>
</div>
</body>
</html>

Автор: krundetz 31.7.2008, 15:01
Цитата(Guide @ 31.7.2008,  13:38)
Всем спасибо, почти ничем не помогли.  smile 

Это что за предьява такая? Тебе пытались помочь я 1 час потратил чтобы найти тебе ссылку на решение(правда не нашел) bars80080 выдал кучу кода webster поправил барса кое в чем. Мы что обязаны были это делать? Мы что обязаны были вам выдать решение по первому вашему требованию? Сдесь к друг другу другие отношения а не такие как у вас.

Автор: bars80080 31.7.2008, 15:05
ну-ну.
судя по всему ты его забыл проверить в самом популярном браузере ИЕ6

да и я бы не сказал, что влипшая в верхний край картинка так уж хорошо смотрится

Автор: Guide 31.7.2008, 15:23
krundetz, bars80080, Извините меня, погорячился. Закончу, делать галерею, обязательно выйду на улицу и убьюсь об стенку  smile 
Спасибо всем кто старался. smile 

Цитата(bars80080 @  31.7.2008,  15:05 Найти цитируемый пост)
судя по всему ты его забыл проверить в самом популярном браузере ИЕ6


Хм..почему-то я думаю что больше никогда не буду создавать под неё сайты. А насчёт влипших вверх картинок: не страшно, главное слои отцентрировал. smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)