Нужна помощь с DIV-версткой для сайта - PullRequest
Новая
       38

Нужна помощь с DIV-версткой для сайта

1 голос
/ 08 июня 2009

Я пытаюсь создать страницу со следующим:

Уже есть следующее:

  • один div для страницы, чтобы центрировать всю страницу шириной 809px
  • внутри <div class="page"> выглядит следующим образом:
    • <div class="header">
    • <div class="container"> (контейнер для содержимого)
    • <div class="footer">

С чем я борюсь:

  • <div class="container"> должен содержать следующее:
    • крайний левый <div class="leftShadow"> со 100% высотой до контейнера, с теневым изображением слева в качестве фона для <div class="leftShadow">
    • второй слева <div class="custom_content"> со 100% высотой до контейнера (будет содержать содержимое страницы
    • второй справа <div class="sidebar_right"> со 100% высотой до контейнера (будет содержать дополнительные ссылки)
    • крайний правый <div class="rightShadow"> со 100% высотой до контейнера, с правым теневым изображением в качестве фона для <div class="rightShadow">

Итак, подведем итог: 

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

Итак, что должно произойти, когда сила custom_content или sidebar_right div по длине ниже другой, другая растянется по высоте, чтобы соответствовать длине более длинного div. Очевидно, что обе стороны div (leftShadow и rightShadow) также должны растягиваться до 100% высоты контейнера.

Может кто-нибудь, пожалуйста, направить меня в правильном направлении? По сути, эти div должны вести себя так же, как таблица, когда содержимое одного тд выходит за пределы высоты другого тд.

Ответы [ 4 ]

4 голосов
/ 08 июня 2009

Не используйте div как таблицы!

DivS leftShadow и rightShadow абсолютно не нужны. Объедините ваши фоновые изображения в одно изображение и установите его в качестве фона вашего контейнера.

Чтобы фоновое изображение заполняло всю высоту контейнера, установите background-repeat: repeat-y.

1 голос
/ 08 июня 2009

Почему бы не использовать что-то вроде "Faux Columns"?

См. http://www.alistapart.com/articles/fauxcolumns/

0 голосов
/ 08 июня 2009

Я бы сделал это по-другому, потому что ваши div-ы не будут вести себя как таблицы.

Я не совсем уверен, как вы хотите, чтобы это выглядело, но я думаю, вам нужно какое-то теневое изображение внизу с левой и правой стороны контейнера. Как насчет удаления div-элементов leftShadow и rightShadow, поместите повторяемое фоновое изображение в div содержимого шириной 809px (и, возможно, высотой 1, в зависимости от того, как выглядит ваше теневое изображение). Также, возможно, установите overflow: hidden для содержимого div - если я правильно помню, это своего рода хак, который заставит содержащий div растягиваться в этой ситуации.

0 голосов
/ 08 июня 2009

Возможно, вам не понадобятся divs leftShadow и rightShadow: взгляните на искусственные столбцы .

Это то, что вы ищете, я надеюсь. :)

...