28172 sujets

CSS et mise en forme, CSS3

[Resolu] Site sur 3 colonnes, avec ajustement vertical automatique

Salut à tous,

Je me décide enfin à poster après une après midi de recherche intense, sans résultats.

Je souhaite créer un site avec 3 colonnes, et que les deux colonnes externes qui comportent un fond s'adaptent à celle du milieu qui a un texte plus ou moins long.

Et je n'arrive pas à rendre le tout cohérent sous FIREFOX (sous IE ça fonctionne).

Voici ce que je veux (image vient de IE):
upload/17336-ieok.jpg

Et voici ce que ça me donne sous FIREFOX :
upload/17336-firefoxde.jpeg


Voici le code de la page :
<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="style-exemple.css" rel="stylesheet" type="text/css">
<body>
	<div id="global">
		<div id="bloc_haut">
			header<br> 
		</div>
		<div id="interligne">&nbsp;</div>
		<div id="bloc_page">
			<div id="sommaire_lat">
				sommaire_gauche<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla
			</div>
			<div id="page">
				page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
				<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
				
			</div>
			<div id="sommaire_lat">
				sommaire_droit<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>b
			</div>
		</div>
		<div id="interligne">&nbsp;</div>
		<div id="bas">
			footer
		</div>
	</div>
</body>
</html>


Et celui du CSS :
body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     background-color:#CCCCFF;
	 /*background-image:url(images/page/fond.jpg);*/
}

#global {/*correction centrage milieu*/
	margin-left: auto;
    margin-right: auto;
    padding-bottom:10px;
    width: 1024px;
    text-align: left;
    border: 1px solid black;
}
	
#interligne {
	text-align:center;
	height:2px;
	width:1024px;
	font-size: 5pt;
	clear:both;
}

#bloc_haut {
	width:1024px;
	margin-top:10px;
	text-align: center;
	background:red;
}

#bloc_page {
	border: 1px solid green;
	width:1024px;
	height:100%;
}

#sommaire_lat {
	border: 1px solid red;
	width: 150px;
	float: left;
	height:100%;
	background-image:url(images/page/fond_bloc.jpg);
}

#page {
	border: 1px solid blue;
	margin-left:5px;
	margin-right:5px;
	width: 708px;
	float: left;
	line-height: 30px;

	background:#FFF;
}

#bas {text-align: center;color:#FFF;font-family:Arial;background-color:#4C76AC;font-size: 10pt;font-weight: bold;width:1024px;}




Pour info, j'ai essayer avec HEIGHT:100% pour la colonne du milieu mais ça me donne ça :
upload/17336-firefox-d.jpeg

Franchement j'ai essayé plein de trucs (par exemple sans les heights, ou avec une image en background dans le conteneur des 3 colonnes par exemple mais elle ne s'affichait pas sous firefox) mais ça n'a jamais marché à la fois sur Firefox et ie à la fois.


Quelqu'un a t'il une solution ?
Modifié par misterbebel (18 Jul 2008 - 14:46)
Hello misterbebel et bienvenue,

tu pourrais commencer par mettre le DOCTYPE avant la balise <html> Smiley cligne . Une balise <meta> pour déclarer l'encodage et <title> ne seraient pas non plus de trop. Pour faire simple, voir le Squelettor.

Concernant ta question, tu pourrais te baser sur le tuto : Un design fluide avec trois «colonnes», grâce au positionnement flottant et/ou regarder les modèles de mises en page.

A+


Edit: grilled Smiley lol
Modifié par Heyoan (17 Jul 2008 - 23:10)
heyoan a écrit :
Hello misterbebel et bienvenue,

tu pourrais commencer par mettre le DOCTYPE avant la balise <html> cligne . Une balise <meta> pour déclarer l'encodage et <title> ne seraient pas non plus de trop. Pour faire simple, voir le Squelettor.

Concernant ta question, tu pourrais te baser sur le tuto : Un design fluide avec trois «colonnes», grâce au positionnement flottant et/ou regarder les modèles de mises en page.

A+


Edit: grilled lol
?

Pour le doctype c'est ok. Pour le reste, je l'ai pas mis car c'est une page de démo et je voulais quelle soit propre pour vous faciliter la tache, pour la page avec le texte tout est bien renseigné Smiley cligne

Sinon garce à vous deux j'ai reussi, je met le code au cas où :

HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link href="style-exemple.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="global">
		<div id="bloc_haut">
			header<br> 
		</div>
		<div id="bloc_page">
			<div id="sommaire_lat">
				sommaire_gauche<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla
			</div>
			<div id="page">
				page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
				<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
				
			</div>
			<div id="sommaire_lat">
				sommaire_droit<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>b
			</div>
			<br style="clear:both;"> 
		</div>

		<div id="bas">
			footer
		</div>
	</div>
</body>
</html>



CSS : 

html{height: 100%;margin: 0;}

body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     background-color:#CCCCFF;
     height: 100%;
}

#global {/*correction centrage milieu*/
	margin-left: auto;
    margin-right: auto;
    padding-bottom:10px;
    width: 1024px;
    text-align: left;
    min-height: 100%;
    position: relative;
}
	

#bloc_haut {
	width:1024px;
	margin-top:10px;
	text-align: center;
}

#bloc_page {
	margin-top:4px;
	width:1024px;
	background-image:url(images/page/fond_bloc.jpg) ;
    min-height: 100%;
    position: relative;
}

#sommaire_lat{
	width: 150px;
	float: left;
}

#page {
	margin-left:5px;
	margin-right:5px;
	width: 708px;
	float: left;
	line-height: 30px;
}

#bas {
	margin-top:4px;
	height:20px;
	text-align: center;
	color:#FFF;
	font-family:Arial;
	background-color:#4C76AC;
	font-size: 10pt;
	font-weight: bold;
	width:1024px;

}


Encore merci à vous deux!
Sujet clos
Aller à