28220 sujets

CSS et mise en forme, CSS3

Image de fond et firefox

Bonjour,
j'ai un petit pb d'affichage. Celui-ci se présente très bien sous IE mais quand je l'affiche sous firefox mon fond sur le menu ne s'étire pas à 100%, il reste bloqué sous le dernier titre

*{
    padding: 0;
    margin: 0;
}

body {
	background-color: #cccccc;
	text-align: center;
}
#conteneur {
	position: relative;
	width: 978px;
	height: 100%;
	text-align: left;
	background-color: #921a24;
	background-image: url(../images/fd_body.gif);
	background-repeat: repeat-y;	
}
#header {
	width: 978px;
	height: 99px;
	background-color: #921a24;
	text-align: right;
	background-image: url(../images/logo.jpg);
	background-repeat: no-repeat;
}
#contenu {
	background-color: #921a24;
	width: 978px;
	height: 100%;
	text-align: left;
	vertical-align: top;
}
#formulaire {
	margin-top: 150px;
	margin-right: 20px;
	float: left;
	z-index: 300;
	left: 18px;
	top: 110px;
	position: absolute;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #FFFFFF;
}
#navht {
    float: left;
	background-color: #921a24;
	width: 710px;
	height: 29px;
	left: 265px;
	right: 0px;
	top: 99px;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-image: url(../images/fd_nav_ht.gif);
	background-repeat: no-repeat;
	position: absolute;
	z-index: 299;	
}
#menugauche {
	background-color: #921a24;
	width: 302px;
	height: 100%;
	float: left;
	text-align: left;
	left: 0px;
	background-image: url(../images/fd_menu.gif);
	background-repeat: repeat-y;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 13pt;
	
}


#navht a {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
}
#navht a:hover {
	color: #efb624;
}

#navht .artiets {
	margin-left: 18px;
	
}
#pageaffiche {
	background-color: #921a24;
	background-image: url(../images/fd_page.gif);
	background-repeat: repeat-x;
	background-position: top;
	width: 676px;
	height: 100%;
	padding-top: 29px; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
	text-align: left;
	float: left;
}
#pageaffiche  a {
	color: #efb624;
}
#pageaffiche  a:hover {
	color: #efb624;
}

si quelqu'un avait un élement de réponse...merci
Un lien vers la page concernée est toujours utile, si tu veux qu'on puisse t'aider. Parce que scanner deux pages de CSS pour voir le truc qui cloche (ou qui ne cloche pas, d'ailleurs !), c'est clairement fastidieux !

Mais je pense avoir déjà rencontré ce problème, constaté dans Firefox 1.5 (et pas dans les précédents). Tu dois avoir du contenu flotté ou en positionnement absolu dans ta page, ce qui fait qu'ils "sortent" du flux de l'élément parent. Du coup, l'élément body ne s'allonge pas pour prendre en compte ces divers éléments flottés ou positionnés en absolu. Et depuis Firefox 1.5, le background donné à l'élément body sera placé en fonction de la taille réelle de body, et pas tout bêtement en fond de fenêtre du navigateur.

Tu peux placer juste avant ta balise body un élément en clear:both qui "forcera" les éléments sortant du flux à y "rentrer".
<div style="clear:both;"></div>


Je me demande également si un
html, body {height: 100%;}

serait efficace, complètement inutile, ou encore dangereux (interprété différemment dans les différents navigateurs...).
Oups pardon, j'ai répondu à côté du sujet Smiley lol !
(Ben oui, c'est ça quand on ne fournit pas d'exemple visuel pour une question sur un problème de rendu, après les gens qui essaient de répondre peuvent se tromper !)
bragon a écrit :
désolé voici le lien

http://www.cm-languedocroussillon.fr/cm30/essai/accueil_fr_public.asp?rep=pages&id=cfa_patisserie.htm

C'est moi ou cette page nécessite une résolution minimum de 1024×768 px ?

Ce que je disais sur les images de fond qui ne vont pas plus loin que leur contenu reste valable, il me semble... Ici c'est ta div <id="menugauche"> qui s'arrête avec le dernier élément de ton menu, et donc ne s'allonge pas plus loin.

Pour obtenir une image sur toute la hauteur, il faudra utiliser une image pour le fond de l'élément body, pas de la div. Je conseillerais d'ailleur d'utiliser une image à fond transparent, pour rajouter les petites subtilités visuelles (les filets dans tous les sens...), tandis que la couleur de fond sera codée en CSS.
Sujet clos
Aller à