Как сделать ? Верстка div

[Muntik]

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

Прошу тему не удалять и не закрывать.
Пустые сообшения потипу "о еще один" не писать.

 

[ashotik]

Напиши какой цвет как должен тянуться.

 

[funest]

css:

#header {
	width:100%;
}
#top_l {
	background: #00CCCC;
	width:20%;
	height:200px;
	float:left;
}
#menu {
	background: #3399CC;
	width:80%;
	height:50px;
	float:right;
}
#top_r {
	background: #333;
	width:80%;
	height:150px;
	float:right;
}
#body {
	clear:both;
}
#left {
	background:#CC3366;
	width:17%;
	height:600px;
	float:left;
}
#main {
	background:#000099;
	width:83%;
	height:600px;
	float:right;
}
#footer {
	background:#000000;
	clear:both;
}

div:

<div id="header">
	<div id="top_l">&nbsp;</div>
    <div id="menu">&nbsp;</div>
    <div id="top_r">&nbsp;</div>    
</div>
<div id="body">
	<div id="left">&nbsp;</div>
    <div id="main">&nbsp;</div>
</div>
<div id="footer">&nbsp;</div>

 

[funest]

Помог в "подробностях" :bk: Можно и не копировать код - написать самому. Суть проста, выравнивание слоев по сторонам, для чего и служит свойство float. А для того чтобы сделать размер нижних столбцов отличным от верхних, убираем свойство float при помощи другого свойства -- clear, которое применям к следующему слою, значение both в данном случае означает отмену выравниваний с какой-либо стороны.

 

[bumbu]

это хорошо если ширина везде нужна в процентах, а если один блок имеет фиксированую ширину?
тогда на помощь приходят они...
собственно ссылка _http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

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

также по посту что написал funset - нужно проверить в ие6 если не будет вредничять, если будет то у меня както такаяже проблема решилась когда я задал для ие6 ширину левого блока не 70% а 69.999% если у нас правый был в 30%(специальные стили ток для ие6 задаются так width:70%!important;width:69,999%; тут просто после ввода данных нужного класса дописываем ещё !important и ещё раз пишем наш класс, который уже будет прочитан ток ие6)

 

[lifediz]

хм...меня тоже заинтересовало!
Как сделать в один div засунуть 4 картинки? и как бэкграунд прописать? для этого же div.

 

[funest]

хм...меня тоже заинтересовало!
Как сделать в один div засунуть 4 картинки? и как бэкграунд прописать? для этого же div.

А что мешает использовать несколько слоев, или слой с вложенной таблицей? Засунуть несколько картинок в один слой вообще не проблема, другое дело как эти картинки должны располагаться...
Применить фон к div?! ну это уж вообще

 

[lifediz]

идут так:
1,2,3,4(она должна тянутся),5;
ниже слой почти также..
как это сделать?

 

[funest]

идут так:
1,2,3,4(она должна тянутся),5;
ниже слой почти также..
как это сделать?

Ну можно ведь применить такую конструкцию:

<div id=main>
  <div id=pic1><img></div>
  <div id=pic2><img></div>
  <div id=pic3><img></div>
  <div id=pic4>&nbsp;</div>
  <div id=pic5><img></div>
</div>

css выглядит приблизительно так:

#main {
 background: url_pic;
 width:100%;
}
#pic1, #pic2, #pic3, #pic5 {
 width:...;
 height:...;
}
#pic4 {
 background: url_pic;
 width:50%;
 height:..;
}

вместо   я ставлю 1px gif с прозрачностью.

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

Добавлено через 2 минуты
А если картинки 1 2 3 4 5 идут каждая с новой строки, можно двумя дивами обойтись:

<div>
  <img><br />
  <img><br />
  <img><br />
  <div><img></div>
  <img><br />
</div>