Positionnement CSS

[nedkcinnay]

Bonjour à tous,

Alors tout d'abord pour présenter ma situation voilà ce que j'essaye de réaliser :

Vous pouvez voir donc ma banière en haut, à gauche et à droite un fond, et le contenu (du texte) par dessus les fonds. L'objectif étant que

mon fond droite et fond gauche soit, quelque soit la résolution à droite et à gauche. Ensuite que mon contenu soit également, quelque soit la résolution, centrer.

Comme vous pouvez le voir ci-dessous, pour la superposition j'ai utiliser z-index pour la superposition de <div>. mais je pense que entre mes :

-position

-float

-z-index

- et margin et padding auto

--> et bien ca doit faire des "conflits" bref je voudrais pouvoir régler:

mes "height" de mes fond droite et gauche à 100% et je ne peu pas, lorsque je rentre height:100%, l'image n'apparait pas alors que si je fixe un height:100px; par exemple c'est ok. Pour résumer je n'arrive pas à caler mon fond droit à droite en mettant son height à 100% et en lui définissant son z-index....

si je n'est pas été assez précis excusez moi et poser moi vos questions, je suis vraiment bloquer et j'ai besoin d'un coup d'main !!

merci d'avance

Yannick

CODE

css

#fond_g{
position:absolute;
z-index:30;
width:405px;
height:100%;
background-image:url("img/fond_g.png");
}

#fond_d{
position:relative;
	z-index:20;
float:right;
width:440px;
height:100%;
background-image:url("img/fond_d.png");
}

.text{
position:relative;
	z-index:10;
width:550px;
margin:auto;
margin-top:10px;
padding:auto;
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
color:#000;
font-size:14px;
background:url("img/fond_texte.png");
border:2px solid #646262;
}

html

<div id="fond_g"></div>
<div id="fond_d"></div>
<div class="text">Bienvenue à toutes et à tous !</div>

[albinou]

euh. je ne sais pas les autres, mais moi je n'ai simplement rien compris... Tu ne nous explique pas réellement le problème là. Ca marche pas ok, mais seulement au niveau du fond droit ?

Ensuite :

--> et bien ca doit faire des "conflits" bref je voudrais pouvoir régler:

mes "height" de mes fond droite et gauche à 100% et je ne peu pas, lorsque je rentre height:100%, l'image n'apparait pas alors que si je fixe un height:100px; par exemple c'est ok. Pour résumer je n'arrive pas à caler mon fond droit à droite en mettant son height à 100% et en lui définissant son z-index....

Pardonne moi, mais je suis pas sûr d'avoir tout bien saisi :)

Edite ton post en écrivant correctement et tout le monde viendra t'aider :)

[Yangzebul]

height : 100% fait prendre à ton élément toute la hauteur dispo dans son parent.

Hors ton parent ne couvre pas forcément toute la hauteur disponible de ton viewport !

il faut donc que tu mette :

html, body { height: 100%; }

Sous réserve bien sûr que les conteneurs entre ton body et ta colonne soient eux aussi à 100%.