[разобрался] Вопрос по CSS!

pprtwh

Нужно сделать сайт с такой разметкой (в блоках - условное название):

При использовании следующего кода, получается вот что:

<div id="tl">TL</div>
<div id="tlt">TLT</div>
<div id="t">T</div>
<div id="trt">TRT</div>
<div id="tr">TR</div>
<div id="tlb">TLB</div>
<div id="l">L</div>
<div id="blt">BLT</div>
<div id="c">C</div>
<div id="trb">TRB</div>
<div id="r">R</div>
<div id="brt">BRT</div>
<div id="bl">BL</div>
<div id="blb">BLB</div>
<div id="b">B</div>
<div id="brb">BRB</div>
<div id="br">BR</div>


#tl {width : 100px; height : 100px; background-color : #FFFF00; float : left;}
#tlt {width : 100px; height : 100px; background-color : #CC9933; float : left;}
#t {width : 400px; height : 100px; background-color : #993300; float : left;}
#trt {width : 100px; height : 100px; background-color : #FF0033; float : left;}
#tr {width : 100px; height : 100px; background-color : #993366;}
#tlb {width : 100px; height : 100px; background-color : #FF00FF;}
#l {width : 100px; height : 400px; background-color : #663399;}
#blt {width : 100px; height : 100px; background-color : #FFFFCC; float : left;}
#c {width : 600px; height : 600px; background-color : #33FFFF; float : left;}
#trb {width : 100px; height : 100px; background-color : #33CC66;}
#r {width : 100px; height : 400px; background-color : #CCCC99;}
#brt {width : 100px; height : 100px; background-color : #999999;}
#bl {width : 100px; height : 100px; background-color : #FF00CC; float : left;}
#blb {width : 100px; height : 100px; background-color : #CC99FF; float : left;}
#b {width : 400px; height : 100px; background-color : #99FFCC; float : left;}
#brb {width : 100px; height : 100px; background-color : #99FF00; float : left;}
#br {width : 100px; height : 100px; background-color : #FFFFFF;}

Голубое без подписи - основной фон страницы.

Живой пример.
Размеры блоков T, L, R, B, C изменяются в зависимости от наполнения (т.е. вместо 400 или 600 там будет "auto").
  Как привести всё к запланированному варианту? Спасибо.

pitrik2

ну для начала
почему у тебя TLB, L, BLT не включены в общий "обрамляющий" div?
тот же вопрос про некторые другие
общий нужен - для того чтобы они как бы сгруппировались
они же у тебя на картинке именно группой и указаны
ширину тогда им задавать не надо, а надо задавать ее обрамляющему элементу


#tlb {

	height : 100px;

	background-color : #FF00FF;

}



#TLB_OUTER {

	width : 100px;

	float : left;

}



#l {

	height : 400px;

	background-color : #663399;

}



#blt {

	height : 100px;

	background-color : #FFFFCC;

}



<div id="TLB_OUTER">

	<div id="tlb">TLB</div>

	<div id="l">L</div>

	<div id="blt">BLT</div>

</div>

pprtwh

почему у тебя TLB, L, BLT не включены в общий "обрамляющий" div?
блин... реально... решение то, как обычно, оказывается элементарным... А мозг трахаю :grin:
Спасибо! :)

rosali

борцы за семантичность (tm) объясните пожалуйста, какой смысл тут верстать не таблицами? нет я без всяких холиваров хочу понять :) чтобы при узкой ширине окна какие-то куски справа падали вниз? это считается лучше чем горизонтальный скрол да?

pprtwh

борцы за семантичность (tm) объясните пожалуйста
На самом деле я всегда верстал таблицами :) Верстка div'ами для меня - темный лес. Вот я и занимаюсь самообразованием :)

pprtwh

это считается лучше чем горизонтальный скрол да?
+ таблицы для меня проще и понятней, но в основном html-файле больше кода получается. Хотя при верстке div'ами "засирается" файл стилей css :) Так что, всему - свое место.

PooH

честно не знаю
но див - более логичная структура
блок
к тому же тебе надо будет допустим первую строчку разбить на три одинаковых куска, вторую на 5 разных
в таблицах придется поебаться
в дивах - нет
ну или через ajax реализуешь добавление блоков - с дивами легко, а с таблицами, мне кажется, не очень

Big_Den

А какой смысл тут верстать таблицами?
чтобы при узкой ширине окна какие-то куски справа падали вниз? это считается лучше чем горизонтальный скрол да?
Поставишь min-width - будет тебе горизонтальный скролл, не поставишь - будут падать вниз.

PooH

засунешь все горизонтальные дивы в один, и поставишь ему min-width - тоже не будут рваться

hwh2010

Поставишь min-width
получишь различные результаты в разных браузерах

PooH

ну так все равно для разных браузеров надо разные таблицы стилей

hwh2010

ну так все равно для разных браузеров надо разные таблицы стилей
из-за таких как ты, в интернете куча кривых сайтов

pprtwh

Ну хз.
Идельный вариант - уметь использовать оба способа :)
Плюсы и минусы есть у обоих, всё зависит от конкретных задач.
Под конкретную задачу я выбрал стили, т.к. при блочной верстке содержимое блоков грузится быстрей, а в таблице - она не отобразится, пока не загрузится всё её содержимое. А у меня там - графика.

rosali

> таблице - она не отобразится, пока не загрузится всё её содержимое. А у меня там - графика.
а разве не достаточно указывать для картинок размеры в самом html-е?

PooH

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

hwh2010

ну-ну, братец
если руки прямые, то браузер-специфичных хаков у тебя будет не более 1% от css-файла, это не преуменьшение
а ты предлагаешь под каждый браузер городить свой файл

pprtwh

а разве не достаточно указывать для картинок размеры в самом html-е?
нет. Реально, сначала грузится содержимое таблицы, и только потом она отображается.

PooH

а ты предлагаешь под каждый браузер городить свой файл
и в чем сложность?
тем более, если все css будут отличаться на 1%
зато пользователь с ие не будет грузить кусок для мозиллы
так что ты тут херь сказал
на счет прямых рук
border-radius как будешь делать?
или проблемы с margin, padding?

PooH

или вот пример
один сайт со структурой средней тяжести, в ие8 вложенные дивы некорректно откомпоновались, так что заполняющий див вылез из обрамляющего
в опере, хроме, файрвоксе, ие7, все отображалось корректно
пришлось напрмую указывать, чтобы ие8 использовал режим совместимости с ие7
для этого было целесообразнее написать отдельный файл стилей
в дополнение к глюкам с дивами, ослик немного по-другому обсчитывал margin, padding и изменял заголовки, так что отдельный css пришелся как нельзя кстати

Big_Den

нет. Реально, сначала грузится содержимое таблицы, и только потом она отображается.
Это что вообще? Ссылку можешь дать,где такое?
Форум тоже на таблицах свёрстан, Ты когда открываешь тред с фотографиями, сначала страница показывается, потом грузятся фотки, нет?

pprtwh

Номер раз
Но у таблиц есть очень не приятный недостаток. Пока таблица не загрузится полностью, ее содержимое не отображается. Это происходит потому, что браузеру необходимо вычислить высоту и ширину ячеек таблиц, что часто невозможно сделать, не зная содержимого.
То есть, тут уже влияет не скорость отрисовки, а скорость загрузки, которая потенциально может иногда быть очень низкой. Это уже серьезно. Можно с уверенностью сказать, что табличная верстка не подходит для сайтов с большим объёмом информации.

Номер два
Содержимое страниц с табличной версткой отображается браузерами медленнее, чем страницы с версткой дивами (блочной версткой). Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер.

И таких примеров много выдает Google :)
Суть, как я писал ранее, в конкретном задании :) Я использую то, что больше подходит под конкретное задание. Это тоже тема для холиваров хорошая :)
Оставить комментарий
Имя или ник:
Комментарий: