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


Автор: Hyper 10.1.2010, 14:37
Здравствуйте.Подскажите пожалуйста,на чем лушче сделать такую вот вещь : http://s004.radikal.ru/i208/1001/8f/3bad1bf5ddf3.png

На дивах или таблицей? Начал дивами- запутался,таблицами я думаю не катит.

Заранее благодарен.

Автор: bars80080 10.1.2010, 14:43
а что таблицами не катит? всё очень даже просто:

Код

<table>
<tr><td colspan="2"></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

Автор: Hyper 10.1.2010, 14:52
Да но потом в эти ячейки вносить еще данные : фото,выдвигающийся текст на js ....

Автор: Mavrun 10.1.2010, 14:52
Ширина фиксированная? Если да, то

Код

<div id="all">
   <div id="header" class="spacer">Шапка</div>

   <div class="block">Блок 1</div>
   <div class="block">Блок 2</div>
   <div class="block">Блок 3</div>
   <div class="block">Блок 4</div>
   <div class="block">Блок 5</div>
   <div class="block">Блок 6</div>

   <div class="spacer"></div>
</div>


Код

* {margin:0; padding:0}
#all {
width: 1000px;
margin: auto;
}
#header {
width: 1000px; 
height: 300px;
}
.spacer {clear:both;}
.block {
float:left;
width: 490px;
padding: 0 10px 10px 0;
display:inline;
}


Если центр резинкой будет, то думаю шапку можно сделать дивом, а шесть блоков табличкой.
Если будут вопросы что почему и зачем (в плане свойств), с радостью отвечу

Автор: bars80080 10.1.2010, 15:05
Цитата(Hyper @  10.1.2010,  13:52 Найти цитируемый пост)
Да но потом в эти ячейки вносить еще данные : фото,выдвигающийся текст на js .

классами указать нужную ширину у нужных ячеек. пикселах или процентах.
если нужно непоколебимости даже при превышении контента ширины ячейки, то вытавить нужный display у ячейки или засунуть в неё див с overflow

то есть проблемы не видно

Автор: Hyper 10.1.2010, 15:05
Всем спасибо.

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