Помогите с макетом DIV и высотой CSS

Пожалуйста, смотрите скриншот. Я пытаюсь создать макет, который позволяет мне применять тень к любой стороне основного div, используя div слева (headerLeft) и справа (headerRight), затем у меня есть div контента (header), который содержит содержимое заголовка. Все это завернуто в div (headerWrapper). Я использую 4 div для этого. У меня это работает с моим заголовком, панелью навигации и другой панелью, которую я использую. Это показано с помощью цветовых кодов div на скриншоте. Причина, по которой это работает, заключается в том, что мой CSS использует высоту, указанную в пикселях. Однако у меня проблема. Я хочу применить это к моему основному контенту, но это не сработает. Содержимое будет меняться по высоте от страницы к странице, это нормально, однако мои элементы div, содержащие тени, не отображаются, если я не дам им фиксированную высоту в пикселях. Пожалуйста, помогите. Красные области показывают, где должны появиться левый и правый элементы div, содержащие тени.

http://www.webquark.co.uk/layoutProblem.jpg

Вот CSS, который у меня есть для макетов, которые работают:

    #header{
margin:0 auto; 
height:160px;
width: 76%;
min-width:850px;
font-size: 14pt;
font-family: Calibri, Verdana, Ariel, sans-serif;
color: #ffffff;
background-image: url(headerBG.jpg);
background-repeat: repeat-x; 
}

#headerWrapper{
height:145px;
width:100%;
/**background-color: #202020;**/
}

#headerLeft
{
float: left;
width: 12%;
height:145px;
background-image: url(shadowLeft.png);
background-repeat: repeat-y;
background-position: center right;
/**background-color: #1e1e1e;**/
}

#headerRight
{
float: right;
width: 12%;
height:145px;
background-image: url(shadowRight.png);
background-repeat: repeat-y;
background-position: center left;
/**background-color: #1e1e1e;**/
}

В основном я думаю, что мне нужно сделать высоту левого и правого div равной 100%, я попытался установить высоту на 100%, но это не работает. У меня также есть высота моего тела, установленная на 100%

Приветствую, надеюсь, вы можете помочь.

HTML для рабочей верхней панели и заголовка:

<div id="topWrapper">
<div id="topRight">
</div>
<div id="topLeft">
</div>
<div id="top">
</div>
</div>


 <div id="headerWrapper">
 <div id="headerRight">
</div>
<div id="headerLeft">
</div>
 <div id="header">
 </div>
 </div>

html css height
person Cool Hand Luke    schedule 13.08.2009    source источник
comment
Не могли бы вы опубликовать свой html, пожалуйста? Или ссылку на вашу демо-страницу/страницу в процессе? Я вроде как вижу, что делает CSS, но трудно быть уверенным, не видя, к чему он прикреплен. Ура =]   -  person David says reinstate Monica    schedule 13.08.2009

Ответы (2)


arrow_upward
0
arrow_downward

Я бы использовал прозрачный PNG для тени высотой 1px. Он будет содержать тень слева, затем пустую область шириной содержимого/заголовка, затем тень справа. В приведенном ниже примере это будет 1x932 пикселя.

Пример кода:

<style type="text/css">
  #headerBG {
    background: gray url("repeating-background");
  }
  #contentBG {
    background: red url("repeating-background");
  }
  .shadow {
    width: 900px; /* width of inner content */
    margin: 0 auto;
    padding: 0 16px; /* width of shadow bit */
    background: transparent url("new-shadow") repeat-y;
  }
</style>

<div id="headerBG">
  <div class="shadow">
    header content
  </div>
  <div class="shadow">
    navigation
  </div>
</div>

<div id="contentBG">
  <div class="shadow">
    body content
  </div>
</div>

Для разных цветов фона в заголовке/теле вам нужно либо добавить дополнительный div внутри тени (вокруг содержимого), либо создать несколько теневых изображений, где пустой бит в середине содержит правильный цвет фона. Однако, если вы в любом случае заполняете заголовок отдельным изображением, вы, вероятно, можете обойтись только цветом тела - заголовок скроет это.

person DisgruntledGoat    schedule 13.08.2009
comment
Ура, работает на основе того, что вы сказали. Хотя кое-что изменил. - person Cool Hand Luke; 15.08.2009

arrow_upward
0
arrow_downward

С помощью CSS очень сложно добиться соответствия высоты div. Есть несколько хитростей, но я думаю, что здесь есть более простое решение.

Почему бы просто не сделать красный узор фоновым изображением тела и сделать его мозаичным? Если вы хотите отобразить что-то еще, просто поместите это сверху. Судя по тому, что я вижу в вашем дизайне, это кажется мне самым простым решением.

Если вы хотите, чтобы элементы div совпадали по высоте, я бы предложил использовать трюк с абсолютными столбцами< /а>. Я думаю, что-то вроде этого будет работать: (хотя я на самом деле не проверял это.)

<div id="content">
    <div id="left-shadow"></div>
    <div id="text">
        text goes here
    </div>
    <div id="right-shadow"></div>
</div>

С помощью этого CSS:

#content {
    position: absolute;
}
    #left-shadow {
        position: relative;
        left: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }
    #text {
        /* width needs to be specified */
    }
    #right-shadow {
        position: relative;
        right: 0; top: 0; bottom: 0;
        /* width needs to be specified */
    }

А затем установите шаблон в качестве фонового изображения для левой/правой тени.

person Sam DeFabbia-Kane    schedule 13.08.2009