Помощ за DIV оформление и CSS височина

Моля, вижте екранната снимка. Опитвам се да създам оформление, което ми позволява да приложа сянка от двете страни на основния div, като използвам divs отляво (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

Да накарате divs да съответстват на височини е много трудно с CSS. Има някои трикове за това, но мисля, че тук има по-лесно решение.

Защо просто не направите червения шаблон фоновото изображение на тялото и го поставите на плочки? Ако искате да покажете нещо друго, просто го оставете отгоре. От това, което виждам във вашия дизайн, това ми изглежда като най-лесното решение.

Ако искате да опитате да накарате divs да съответстват на височините, предлагам да използвате трика с абсолютни колони. Мисля, че нещо подобно ще свърши работа: (Въпреки че всъщност не съм го тествал.)

<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