Нужна помощь в создании макета с DIVs

Question

Это то, что я хочу, чтобы моя страница выглядеть следующим образом:

Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg

Я не совсем там еще. Вот где я нахожусь: http://labs.pieterdedecker.be/test/test.htm

Я совершенно новой для использования <div> с (в отличие от <table> с), чтобы создать раскладку моих страниц. Как я могу выполнить эту работу?

Answer 1

Вы можете исправить меню, просто добавив правила стилей CSS 2:

.menu { overflow: hidden; } 
.menu ul { margin: 0; } 

Переполнение оставит повыше меню из браузера по умолчанию <ul> края, просто очистить это со вторым стилем , который отбросит маржу.

Answer 2

Просто добавьте следующий код:

<div style="clear:both; margin-left:20px;"> 

после строки:

<div id="body"> 

То есть:

<div id="body"> 
<div style="clear:both;"> 

Более подробную информацию о недвижимости clear.

Кроме того, посмотрите на хороший учебник:

Div based layout with CSS

Answer 3

проблема я вижу сейчас, что ваш синий «пункт» коробки не выглядит правильно. я думаю, причина в том, что div, содержащий поля «item», должен содержаться внутри основного «тела». это на самом деле самое первое, что находится внутри div тела.

Чтобы сделать это проще для себя, вы должны создать div внутри div тела, с width: 100% и background: blue (или любым другим цветом). то внутри этого div вы можете создать свой список элементов.

Очевидный способ поставить «предметы» внутри «панели позиций» будет float:left всех предметов внутри своих собственных div. вам тогда нужно установить статическую высоту для самой панели элементов (например, height: 2em), поскольку div, содержащий только плавающие элементы, не имеет высоты.

Answer 4

попробуйте включить ясный: обе в корпусе div.

<div id="body" style="clear: both"> 
    <p>This is my body</p> 
    </div> 

удачи! ;-)