18041 sujets

Questions générales et questions de débutants

Problème d'ombre...

Saluté .. je galère un peu sur un truc simple je pense ... mais impossible de trouver

en gros j'ai ça comme archi

<body>

<div id="ombre">

    <div id="global">
         <div id="header">mon head</div>
        <div id="contenu">
   le texte de la page ... blabla
        </div>

         <div id="footer">mon footer</div>

    </div>
</div>
</body>

avec ma div global qui a un fond ombre qui est censé s'étendre sur la hauteur que prendra ma page (header + contenu + footer = global)

ben impossible de la faire prendre la bonne taille ...

voici mon CSS ... je galère je galère Smiley decu 


* {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
}

html{
	background:#efefef;
}
#ombre {
	position: relative;
	height: 100%;
	left: 50%;
	margin-left: -445px;
	
	width: 890px;	
	broder: 1px solid red;
	background:url(../images/bg_global.jpg);
	background-repeat:repeat-y;
	
}


#global{

	position: absolute;
	display:block;
	width: 850px;
	
	left: 50%;
	
	margin-left: -425px;
	border-left: 1px solid #dfdfdf;	
	border-right: 1px solid #dfdfdf;	


	
}
#header{
	background-color: #1c407a;
	background:url(../images/brd_b.jpg) ;
	width: 850px;
	height:150px;
	color: red;
}

#contenu {
	display:block;
	background:#fff;
/*	padding: 10px ;*/
	margin-top:0px!important;
	margin-top:-40px;
}

#footer{
	background:#1c407a;
	margin:0;
	width: 850px;text-align:center;
	color: #dfdfdf;
}


ps : dans ce code ma div #ombre a height à 100% et du coup l'ombre se voit mais elle à la hauteur de l'élément parent... donc body ... et bien sur si mon contenu est plus petit ben ça dépasse ...
si je ne mets pas de hauteur l'imagne de fond n'apparait plus ...
et si je mets auto c'est pareil Smiley decu
merci si vous avez des idées

@++
Modifié par NAS (12 Sep 2008 - 17:16)
et voila !!
position: relative;

dans global et ombre et ça marche ...
si quelqu'un peut m'expliquer précisément pourquoi je me sentirai un peu moins con au moins ...

@++
NAS a écrit :
si quelqu'un peut m'expliquer précisément pourquoi je me sentirai un peu moins con au moins ...

Ton div#global était positionné en absolu. Je suppose que tu connais par coeur les caractéristiques du positionnement absolu? Sinon je me permets de te renvoyer à de saines lectures. Smiley cligne
http://openweb.eu.org/articles/initiation_absolue
http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-position

Edit: à la réflexion, aucune de ces deux références n'est très clair sur le fait qu'un élément positionné en absolu est alors ignoré par son conteneur. (La spécification CSS 2 mentionne uniquement les éléments de même niveau de parenté, c'est à dire les éléments frères de l'élément positionné en absolu. Et les deux sources annoncent que l'élément positionné en absolu est retiré du flux normal, mais sans illustrer ce que cela signifie pour le conteneur d'un élément positionné en absolu.)
Modifié par Florent V. (12 Sep 2008 - 18:16)
Bonjour.
La question serait donc : que signifie réellement "retiré du flux", qu'est-ce que ça implique pour le reste du document ?

Tel que je l'ai compris, "retiré du flux" signifie :
1-pour l'élément : qu'il sort de la page, sans laisser de "trou", exactement comme avec display:none.
2-pour ses ancêtres : qu'il n'est plus du tout pris en compte dans les calculs de dimensions.

Mais ce n'est pas totalement binaire, blanc/noir :

1-Les "relative" restent dans le flux. Un relative non déplacé ne change absolument pas, mais devient bloc conteneur des absolute qui s'y trouvent. Il crée aussi sa propre échelle verticale pour le z-index
2-Les flottants restent aussi dans le flux, mais avec une cuisine spéciale pour leurs voisins...
3-Les "absolute " et "fixed" sortent complètement

Pas non plus binaire est le fait qu'un élément sorti du flux reste soumis à l'overflow de ses ancêtres, et qu'il peut donc se faire rogner de façon apparemment bien mystérieuse si un ancêtre est en overflow:hidden.

(Pourvu que je n'aie pas écrit de bourde... Smiley murf )
brendufat a écrit :
1-Les "relative" restent dans le flux. Un relative non déplacé ne change absolument pas, mais devient bloc conteneur des absolute qui s'y trouvent. Il crée aussi sa propre échelle verticale pour le z-index
2-Les flottants restent aussi dans le flux, mais avec une cuisine spéciale pour leurs voisins...
3-Les "absolute " et "fixed" sortent complètement

Les éléments positionnés en relatif (et par ailleurs non flottants) ne sont pas, sauf erreur de ma part, retirés du flux. Ils sont simplement (ou pas) décalés visuellement par rapport à leur position «normale».

Mais dans l'ensemble tu as bien résumé la petite cuisine du positionnement CSS.
Sujet clos
Aller à