Как я могу добиться этого макета без борьбы с CSS

Question

Я понимаю, что здесь есть несколько вопросов об этой проблеме, но у меня довольно уникальное затруднение.Я работаю над шаблоном, который должен включать определенные теги, и должен работать с другими элементами, которые добавляются в шаблон после загрузки кода.Я бы не беспокоился об этом, но у меня есть время, когда я пытаюсь заставить нижний колонтитул отображаться внизу страницы.Я ничего не могу изменить в нижнем колонтитуле, и он отображается в нижней части div, который я использую в качестве оболочки.Проблема в том, что если я установлю высоту на фиксированное значение, то может быть сделано столько комментариев, пока комментарий div не перекрывает нижний колонтитул.Я пробовал несколько различных решений, включая установку высоты контейнера div на auto, переполнение на auto, нижнее поле до 65 (высота нижнего колонтитула) и настройку переполнения для прокрутки для div комментариев (в результате были получены очень свободные комментарии).

Вот пример проблемы и шаблон в его нынешнем виде.

Вот CSS-стиль для контейнера div (div id = Main)

#Main {
 margin: 0px auto auto auto;
 background-color: #808080;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: medium;
 font-variant: normal;
 color: #FFFFFF;
 width: 900px;
 position: relative;
}

Вот CSS-стиль для комментариев. Div

#Comments {
 background-color: #008080;
 width: 450px;
 height: auto;
 top: 1750px;
 left: 450px;
 position: absolute;
 overflow: auto;
}

А вот как div делятся в теле

<div id="Main">
...
 <div id="Comment_Form">
 <!--[COMMENT_FORM=400,200]-->
 </div>

 <div id="Comments">
 <!--[COMMENTS=400]-->
  Comments
 </div>
</div>

Поскольку страница будет иметь большой размерЯ пытаюсь сделать код легковесным (и, возможно, довольно неудачным).

Спасибо за вашу помощь, и я выложу шаблон на данный момент, если кому-то понадобится.

РЕДАКТИРОВАТЬ:

Хорошо, мне пришло в голову, что а) мне нужно переделать CSS и div, которые у меня есть, и б) я понятия не имею, как это сделать, используя чистый CSS, или впо крайней мере без борьбы с ним, как сказал один из вас.Я пытаюсь добиться этого:

Понятия не имею, как это сделать.и любая помощь будет принята с благодарностью (а также любой способ избежать каждого элемента в своем собственном div)

Answer 1

Вы, кажется, действительно боретесь со своим CSS на этой странице.Большинство ваших элементов расположены абсолютно в вашем классе #Main.Это заставит вас указать намного больше макета, чем вы действительно хотите.Это также означает, что если у вас есть переменное количество комментариев или динамического контента, вам будет гораздо сложнее расширять контейнеры контента, не мешая другим.

Я настоятельно призываю вас взглянуть на это.CSS-фреймворки или подходы, использующие преимущества макетов сетки, такие как OOCSS-фреймворк Николь Салливан .

Вы обнаружите, что за структурой (в которой есть много хороших, работоспособных примеров) легко следоватьи гораздо легче приспосабливается к разметке, которой вы пытаетесь достичь.

Answer 2

Надеюсь, это полезно.

Вот очень простой макет, который вы можете использовать.

В вашем CSS:

  #header, #content, #comments{
    margin: 0 auto;
    width: 960px;
    overflow: hidden;
  }
  #author-comments{
    width: 100%;
  }
  #comment-box{
    float: left;
    width: 50%;
  }
  #comment-list{
    float: right;
    width: 50%;
  }

В вашей разметке:

<div id="header">
  Header
</div>
<div id="content">
  Contents
<div>
<div id="comments">
  <div id="author-comments">
    Author comments
  </div>
  <div id="comment-box">
    Comment box
  </div>
  <div id="comment-list">
    Comment list
  </div>
</div>

Очень важно использовать разметку, которая имеет смысл без стилей. Не рассматривайте div как простые блоки, а как фактические контейнеры содержимого, которые придают структуру вашему документу.

В дополнительном примечании вы упомянули, что вы обеспокоены количеством делений, чтобы сохранить ваш файл легким, компенсируя количество изображений, которые вы используете. Не беспокойся об этом. Текстовые документы (такие как HTML) ничто по сравнению с изображениями с точки зрения размера файла. Однако, это не значит, что вы должны бросать разметку, как если бы она была бесплатной;)

И последнее. Я заметил, что вы используете элементы <img> для рендеринга ваших декоративных изображений. Попробуйте использовать CSS, чтобы установить их в качестве фоновых изображений в соответствующих <div> с. Это не только поможет вам упростить и упростить реализацию структур, но также проведет линию между изображениями, представляющими контент, и изображениями, представляющими оформление.

Answer 3

Я напишу без всякого тестирования, как я бы кодировал макет на вашем изображении:

HTML:

<div id="header" class="centered"></div>
<div id="content" class="centered">
  <div id="navigation"></div>
  <div id="content"></div>
</div>
<div id="comments" class="centered">
  <div id="author-comments" class="centered"></div>
  <div class="centered">
    <div id="comment-field"></div>
    <div id="user-comments"></div>
  </div>
</div>

CSS:

* { margin:0px; padding:0px }
html { height:100% }
body { height:100% }
.centered { position:relative; margin:0 auto; width:960px }
#header { height:100px; background:#333 }
#content { overflow:hidden }
#author-comment { overflow:hidden; margin:30px auto }
#comment-field { position:relative; float:left; width:480px; overflow:hidden }
#user-comments { position:relative; float:left; width:480px; overflow:hidden }

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