28220 sujets

CSS et mise en forme, CSS3

PB: Layout (très) buggé sous Firefox ???

Bonjour à tous,

je suis plutot un flasheur, mais je me suis dis tien je vais essayer le XHTML dont tout le monde parle, on oublie les tableaux et c'est la fête du CSS...

Je me lance donc, et plus j'avance plus je me rend compte que c'est un vrai casse tête.

J'essai de faire un layout relativement simple, et pour une fois dans IE, ça s'affiche bien, mais dans firefox c'est tout peté :



<!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" xml:lang="en" lang="en">
<head>
<title>CSS test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin:0px;
	padding:10px;
	background-color:#000000;
	text-align:center;
}

#page {
	background-color:#000000;
	width:800px;
	margin: 0 auto;
	text-align: left;
}
#header {
	background-color:#006633;
	height:120px;
	width:800px;
}
#middle {
	background-color: #009900;
	width:800px;
	height: 100%;
}
	#left {
		text-align:center;
		background-color:#0000FF;
		width:250px;
		height: auto;
		float:left;
	}
	.separator {
		background-color: #FF99FF;
		width:250px;
	}
	.blok {
		background-color:#CC0000;
		width:198px;
		text-align:center;
	}
	.blok_content {
		background-color: #99FF00;
		width:146px;
		text-align:justify;
		float:left;
	}
	
	.part {
		background-color: #CC0099;
		width:198px;
		height:48px;
	}
	#center {
		background-color: #0066FF;
		height:inherit;
		text-align:justify;
	}
	.barre {
		background-color: #00CCFF;
		width:26px;
		height:120px;
		float: left;
	}
	.blok_top {
		background-color: #999933;
		width:198px;
		height:26px;
	}
	.blok_bot {
		background-color: #99CCCC;
		width:198px;
		height:40px;
	}
#footer {
	background-color: #00CC00;
	width:800px;
	clear:both;
}
</style>
</head>
<body>

<div id="page">
	<div id="header">header</div>
	
	<div id="middle">
	
		<div id="left">
			
			<div class="separator"></div>
			
			<div class="blok">				
				<div class="blok_top"></div>
				<div class="barre"></div>
				<div class="blok_content">content content content content content content content </div>
				<div class="barre"></div>
				<div class="blok_bot"></div>				
			</div>
						
			<div class="separator"></div>
			
			<div class="blok">				
				<div class="blok_top"></div>
				<div class="barre"></div>
				<div class="blok_content">content content content content content content content </div>
				<div class="barre"></div>
				<div class="blok_bot"></div>				
			</div>
			
			<div class="separator"></div>
			
			<div class="part">part</div>
			
		</div>
		
		<div id="center">
			content content content content content content content content content content content content content content content content 
			content content content content content content content content content content content content content content content content 
			content content content content content content content content content content content content content content content content 
			content content content content content content content content content content content content content content content content 
			content content content content content content content content content content content content content content content content 
			content content content content content content content content content content content content content content content content 			
		</div>
				
	</div>
	
	<div id="footer">footer</div>
</div>

</body>
</html>


Est-ce que quelqu'un peut regarder d'ou viens ce problème d'affichage, j'en peut plus Smiley smile

PS: désolé, je n'ai pas accès à mon ftp pour uploader la page d'ou je suis, je le ferai ce soir.

Merci d'avance et bonne journée !!
De plus, j'aurai aimé savoir si c'est possible que le <div> bleu a droite s'adapte à la taille du <div> vert conteneur ? De façon à voir que du bleu jusqu'en bas, même si le contenu n'est pas suffisant pour que le <div> se rallonge tout seul.

J'ai essayé height:auto en espèrant que le div bleu prenne la hauteur du div vert qui le contient, mais sans succès...


Merci encore !!
Sujet clos
Aller à