CSS : probleme de mise en page

10 mars 2008, 13:10

Bonjour,

je me decide à venir vous voir parce que je galère et que je ne comprends pas d'ou vient mon problème.
Mon idée est de definir un cadre de 470px sur 47px qui va contenir une têtière décomposée en 2 partie. une partie fait 30px et contient une image non répititive en Background et l'a seconde fait 440px avec une image background d'1px qui se repete xfois.

voici la CSS :

Code : Tout sélectionner

#home_nouvo {
width : 470px;
height : 339px;
background :#fafa00; (j'ai mis un fond jaune pour debugger)
}

#home_nouvo .head {
height : 47px;	
width : 470px;
background :#00FF00;
}

#home_nouvo .head_left {
background : url('/images/tete_hggrise.gif') no-repeat;
width : 30px;
height : 47px;
float : left;
border-top : 10px solid #bcbcbc;
border-bottom : 10px solid #bcbcbc;
border-left : 10px solid #bcbcbc;
}

#home_nouvo .head_center {
background : url('/images/tete_hgrise.gif') repeat-x;
width : 440px;
height : 47px;
float : right;
padding-top : 5px;
font-family : Arial, Helvetica, sans-serif;
font-size : 7px;
font-weight : bold;
color : #FFF;
text-align : left;
border-top : 10px solid #bcbcbc;
border-bottom : 10px solid #bcbcbc;
}

le resultat obtenu est un cadre comme desiré mais qui fait 94pixels en hauteur (2 x 47) seul la partie haute contient le décor comme je le désire,et la 2 eme partie est en jaune (fond du cadre home_nouvo)

merci de m'aider

10 mars 2008, 13:50

salut. Et ta structure (html) correspond a quoi ?

10 mars 2008, 14:10

Modération :
ZeDeveloppeur, afin d'améliorer la lisibilité de ton message,
pense à utiliser les balises [code] ou [php] (selon le langage utilisé).

Elles sont disponibles au-dessus de la zone de saisie de ton message
lorsque tu postes un nouveau message.

Des indications sont disponibles sur la manière de mettre en forme vos messages dans la FAQ

10 mars 2008, 15:21

salut. Et ta structure (html) correspond a quoi ?

bonjour,

voici le code HTML de la zone :

<div id="home_nouvo">
	<div class="header">
		<div class="head_left">
		</div>
		<div class="head_center">
			<a href="/index.php?page=nouvo" class="header_link">Nouveautés</a>
		</div>
</div>
</div>

merci.

CSS : probleme de mise en page

Qui est en ligne