28172 sujets

CSS et mise en forme, CSS3

Header 100% + Contenu étirable + Footer 100%

Tout d'abord bonjour à tous.

Après multiples recherches sur les forums et lectures de sujets je ne parviens pas à mettre la main sur le problème de mon site.

Je vous explique, je réalise un site dont le header doit avoir une image de fond étirable horizontalement (100%) toujours placé en haut, un contenu lui aussi étirable mais verticalement selon le contenu avec un fond, et enfin le footer de hauteur fixe avec image d'arrière plan étirable (100%) qui suit le mouvement du bloc contenu.

Au niveau du contenu tout est ok, il reste centré... là où je péche c'est ces images !
Quand je réduis la taille de la fenêtre les images d'arrière plan ne vont pas jusqu'au bout, elles s'arrêtent au niveau de la div "grandconteneur" (vérifier avec Filezilla).
C'est la première fois que je réalise ce type de site, donc je pense qu'il doit me manquer des éléments.


Voici les images :
upload/36528-bg.jpg
upload/36528-bgheader.jpg
upload/36528-bgfooter.jpg


Mon code :

<body>

<div id="grandheader">
	<div id="header">
     </div>
</div>

<div id="grandconteneur">
	<div id="conteneur">
            <div id="contenu">
            </div>
    </div>
</div>

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

</body>



Ma feuille de style CSS:

body {
margin:0;
padding:0;
width:100%;
height:100%;
background:url(images/bg_header.jpg) no-repeat top;
}

#grandheader{
clear:both;
margin-left:auto;
margin-right:auto;
background:url(images/bg_header.jpg) repeat-x;
}

	#header{
	padding-top:8px;
	margin-right:auto;
	margin-left:auto;
	width:1024px;
	height:165px;
	}
	
#grandconteneur{
clear:both;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
background:url(images/bg.jpg) repeat-y center;
}

#conteneur{
clear:both;
padding:20px 5px 0px 5px;
width:1024px;
height:auto;
margin-right:auto;
margin-left:auto;
}

	#contenu{
	min-height:970px;
	}

#grandfooter{
clear:both;
height:250px;
width:100%;
padding-top:40px;
margin-left:auto;
margin-right:auto;
background:url(images/bg_footer.jpg) repeat-x center center;
}			

#footer{
margin-left:auto;
margin-right:auto;
height:180px;
width:1026px;
padding-left:2px;
border-left:1px dashed #FF0099;
}



Pour ceux qui ont une idée, votre aide sera la bienvenue : )
Merci
bonjour,

width:100%; correspond a la largeur de la fenêtre.

Pour forcer l'affichage des fonds sur plus de 100%; de largeur il faut modifier le comportement de body, en ajoutant: display:table;.

Si tu enleves les width:100%; et applique un min-width:100%; alors display:inline-block; conviendras aussi . (dans les deux cas exit IE7, mais pas IE6 ni IE8).

gc
Administrateur
Bonjour et bienvenue,

mymstik a écrit :
et enfin le footer de hauteur fixe avec image d'arrière plan étirable (100%) qui suit le mouvement du bloc contenu.

Hauteur fixe, ça n'existe pas (ou ça ne devrait pas) : comment vais-je pouvoir agrandir le texte de ton footer sans qu'il passe en dessous du bas de la fenêtre ? Smiley decu
Utilise plutôt min-height (et via commentaire conditionnel height pour IE6 si tu le supportes ; cet âne bâté comprend height comme un min-height et ne reconnait pas min-height). Le comportement reste identique pour la plupart de tes visiteurs et pour les autres ça ne les empêche pas d'accéder à l'information présente dans ton footer.

mymstik a écrit :
Quand je réduis la taille de la fenêtre les images d'arrière plan ne vont pas jusqu'au bout, elles s'arrêtent au niveau de la div &quot;grandconteneur&quot; (vérifier avec Filezilla).

Je n'ai pas compris la description de ton problème : en dessous de combien de pixels de large est-ce que ça ne fait plus ce que tu veux ? 1026 px ? (MeasureIt sous Firefox si tu ne sais pas comment mesurer cette largeur Smiley cligne )
En dessous de cette valeur que je ne connais pas, l'image de fond reste collée à gauche et le contenu à droite n'est atteignable qu'avec un ascenseur horizontal ?
en fait , un min-width:1024px; sur body suffit a regler son probleme de fond qui ne s'affiche plus en dessous de cette largeur. Smiley cligne
Merci beaucoup de vos réponses !
J'ai effectivement tester de remplacer le width:100% du "grandconteneur" par une valeur de width:1084px (1024 + ombres portées droite et gauche de l'image "bg") ; et ça marche le fond apparaît entièrement même en fenêtre réduite !

Après je ne sais pas si sur un écran plus grand que le mien (17p) les images feront la totalité de la largeur ? Malheureusement je ne peux pas tester. Smiley decu
Sujet clos
Aller à