Фон из элемента ul охватывает всю страницу

Question

Вместо того, чтобы мой фон действовал только как фон для 4 различных видов керамики в элементе ul, красный фон покрывает мое имя и панель навигации.Почему он это делает?Я пытался сделать все относительно позиционирования, но, похоже, ничего не изменилось.Почему элемент ul не следует за потоком документа, он должен находиться ниже моего имени и навигации.

Пожалуйста, посоветуйте, см. Пример здесь: пример

Answer 1

Браузеры испытывают трудности с высотой всплывающих DIV.Самое простое, что нужно сделать, это поставить:

<div style="clear:both;"></div> 

после тега.

Answer 2

Если я правильно понял вашу проблему, то вот решение

проверьте эту обновленную скрипту: http://jsfiddle.net/4GUkU/2/

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

Answer 3

Кстати, семантически вам не нужно использовать и

в теге.теги уже интерпретируются по вертикали, если вы не выберете иное с помощью CSS.

Вы можете переписать свое навигационное меню следующим образом:

<nav id="nav-main">
    <a title="Book Class" href="">Book Class</a>
    <a title="Plan your visit" href="/visiting">Plan your visit</a>
    <a title="Contact us" href="/visiting">Contact us</a>
</nav>

Если вы сохраните и

в своем, слепомчитатель этого человека будет читать ему: «навигация, неупорядоченный список, элемент списка ...», что не имеет особого смысла.

Answer 4

Красный цвет везде из-за

#featured {
  ...
  background-color:Red;
  ...
}

И UL отображает под "The Pottery Club" и навигационные ссылки для меня (в Chrome). Какой браузер вы используете?