28173 sujets

CSS et mise en forme, CSS3

Probleme de flux

Bonjour à tous voila je me retrouve tous le temps confronter a des problemes de repetition de background (probleme de flux je pense) j'essay de positionner mes blocs css sur le principe d'un bloc qui en contient 7 autres.

Le soucis est que apparement les trois premiers blocs sont bien à l'interieur du conteneur mais pas les autres.
J'ai essayer de mettre un overflow:hidden mais cela ne regle pas mon probleme.

De plus sous ie les blocs à l'interieur du conteneur ne sont pas visible.

Voici mon code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/squelette.css"  type="text/css" />
<link rel="stylesheet" href="css/style.css"  type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
	<!--Conteneur-->
	<div id="conteneur">
	
	
		<div id="header">
			<div id="baniere">baniere</div>
			<div id="accroche">accroche</div>
		</div>
		
		
		<div id="menu_swf">menu</div>
		
		
		<div id="contenu">
		
		
			<div id="references">references</div>
			
			<div id="realisations">
				<div>exemple1</div>
				<div id="exemple">exemple2</div>
				<div id="exemple">exemple3</div>
				<div id="bloc_a_la_une">a la une</div>
				<div id="newsletter">newsletter</div>
				<div id="references">references</div>
				<div id="services">services</div>
			</div>	
						
		</div>
	</div>

</body>
</html>


et mon code css
/* CSS Document */

/*global*/
body{
	margin:0;
	padding:0;
}

#conteneur{ width:640px; position:relative; margin:0 auto; overflow:hidden; }

#header, #menu_swf, #contenu{ width:630px; margin:0 auto; }

#header{ height:90px; }

#baniere, #accroche{ width:620px; height:70px; margin:0 auto; background-color:#99CC33; }

#accroche{ height:15px; background-color:#DCDCDC }

#menu_swf{ background-color:#00FF00; height:30px; }

/*homepage*/
#contenu{ padding:5px 0 0 0; overflow:hidden; }

#references{ width:620px; height:30px; margin:0 auto 5px auto; background-color:#FFFFFF;}

#realisations{ width:620px; height:149px; margin:0 auto; background-color:#FFFF99; position:relative;}

#realisations div{ width:200px; height:130px; background-color:#3333FF; margin:0px; padding:0px; float:left;}

#realisations #exemple{ margin:0 0 0 10px; padding:0; }

#realisations #bloc_a_la_une{ width:307px; margin:20px 0 0 0; padding:0; background-color:#00CCFF;}

#realisations #newsletter{ width:310px; margin:20px 0 0 3px; padding:0; background-color:#00CCFF;}

#realisations #references{width:307px; margin:14px 0 0 0; padding:0; background-color:#00CCFF;}

#realisations #services{width:310px; margin:14px 0 0 3px; padding:0; background-color:#00CCFF;}


Voici deux screen dece que j'obtien sous ce que j'aimerai visuelement c'est que les bloc bleu ciel soient bien a l'interieur du bloc jaune et pas en dessous.

Screen firefox
http://img444.imageshack.us/img444/701/screenfirefoxmn0.jpg

Screen ie
http://img131.imageshack.us/img131/3016/screenievu6.jpg

J'aimerais donc savoir comment regler ce probleme et pourquoi je rencontre ce probleme a chaque fois que je tente de faire un site en css

merci par avance
C'est tout simple, tu as défini une taille de 149px pour ton id realisations 
#realisations{ width:620px; height:149px; margin:0 auto; background-color:#FFFF99; position:relative;}

mets lui une taille de 480px par exemple est le tour est réglé, même sous IE. Smiley langue
Modifié par Furmi (26 Nov 2007 - 12:35)
merci pour ta reponse j'ai en effet zapper mon height mais mon objectif est que ce bloc s'adapte en hauteur celon son contenu.

Un peut comme une cellule de tableau le probleme est que si j emet une valeur height elle reste bloquer a cette valeur et si je met une grande valeur comme celle que tu ma donnerba le bloc est plus haut que ses contenu.

Comment faire qu'il s'adapte svp ?
Dans ces cas-là, il te faut faire sortir du flux "contenu" ton div "realisations", et simplement lui donner une largeur sans hauteur et une couleur de background.

Ainsi,

<div id="conteneur">
<div id="header"><!--ton entête--></div>
<div id="contenu"><!--ce que tu veux, voire directement ton div "references"--></div>

<div id="realisations"><!--tes div réalisations--></div>

</div><!--on ferme le div conteneur-->


Et pour le CSS, tu détermines que 
#realisations { width: 620px; background-color: #FFFF99; margin: 0 auto; }
Sujet clos
Aller à