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

Question

Вот как я хочу, чтобы моя страница выглядела:

Макет http://img64.imageshack.us/img64/5974/pagedh.jpg

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

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

Answer 1

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

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

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

Answer 2

попробуйте в том числе очистить: оба в теле div.

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

удачи! ; -)

Answer 3

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

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

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

Answer 4

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

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

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

<div id="body">

То есть:

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

Подробнее о недвижимости clear .

Также взгляните на хороший учебник:

Макет на основе Div с CSS