Aide pour la disposition DIV et la hauteur CSS

Question

Veuillez voir la capture d'écran. J'essaie de produire une mise en page qui me permet d'appliquer l'ombre de chaque côté de la div principale en utilisant les divs left (headerLeft) et right (headerRight), j'ai alors le contenu div (header) qui contient le contenu de l'en-tête. Tout est enveloppé dans un div (headerWrapper). J'utilise 4 divs pour le faire. Je l'ai travaillé sur mon en-tête, barre de navigation et un autre bar que j'utilise. Ceci est montré avec les divs de couleur sur la capture d'écran. La raison pour laquelle cela fonctionne est parce que mon CSS utilise des hauteurs données en pixels. Cependant j'ai un problème. Je veux l'appliquer à mon contenu principal, mais cela ne fonctionnera pas. Le contenu va changer de hauteur de page en page c'est correct, mais mes divs qui contiennent les ombres n'apparaissent pas, sauf si je leur donne une hauteur de pixel fixe. S'il vous plaît, aidez. Les zones rouges indiquent où les divs gauche et droite contenant les ombres doivent apparaître.

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

Voici le CSS que j'ai pour les mises en page qui fonctionnent:

#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;**/ 
} 

Basicly Je pense que je dois loin de faire la hauteur de divs gauche et à droite à 100%, j'ai essayé de placer la hauteur à 100% mais ça ne marche pas. J'ai également la hauteur de mon corps fixé à 100%

Salutations, j'espère que vous pouvez aider.

HTML pour la barre supérieure de travail et en-tête:

<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> 

Answer 1

Je voudrais utiliser un PNG transparent pour l'ombre, 1px haute. Il contiendrait l'ombre sur la gauche, puis une zone vide la largeur du contenu/en-tête, puis l'ombre de la main droite. Dans l'exemple ci-dessous, ce serait 1x932 pixels.

code Exemple:

<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> 

Pour les différentes couleurs de fond sur l'en-tête/corps, vous aurez soit besoin d'ajouter un div supplémentaire dans l'ombre (autour du contenu), ou créer des images d'ombre multiples où le bit vide au milieu contient la couleur d'arrière-plan correcte. Cependant, si vous remplissez l'en-tête avec une image séparée, vous pouvez probablement vous en sortir avec la couleur du corps - l'en-tête couvrira cela.

Answer 2

divs Se rendre à correspondre hauteurs est très difficile à faire avec CSS. Il y a quelques astuces pour le faire, mais je pense qu'il y a une solution plus facile ici.

Pourquoi ne pas simplement faire du motif rouge l'image de fond du corps et l'avoir en mosaïque? Si vous voulez afficher quelque chose d'autre, il vous suffit d'aller au-dessus. D'après ce que je peux voir de votre conception, cela ressemble à la solution la plus facile pour moi.

Si vous voulez essayer d'obtenir les divs pour correspondre à des hauteurs, je suggère d'utiliser le absolute columns trick. Quelque chose comme cela fonctionne, je pense: (Même si je ne l'ai pas fait testé.)

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

Avec ce 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 */ 
    } 

Et puis définissez le motif que les images d'arrière-plan pour la gauche/ombre droite.