28173 sujets

CSS et mise en forme, CSS3

Height

Bonjour,
j'ai un probleme de height sur des div...
en fait j'ai un site avec un header, trois colones et un footer...
J'aimerais que les colonnes soit toutes de la meme longueur (celle de la plus grande et que le footer soit en dessous)


http://nosfetes.ovh.org/sitecol3/sitecol3.JPG

Code de la page HTML


<html>
              <head>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
	<div id="general">
		<div id="header">
		</div>
		
		<div id="menu">
		Menu
		</div>
		
		<div id="contenu">
		Contenu			
		</div>
		<div id="droite">
			<div id="traits">
			</div>

			<div id="newsletter">
			Newsletter
			</div>
		</div>

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


CSS

html, body {
	margin:0;
	padding:0;
	text-align:center;
	font-family:Arial,Helvetica,sans-serif;
}

body {
	background-color:#000;	
}

#general {
	text-align:left;
	margin:0 auto;
	/*padding:5px 15px;*/
	width:829px;
	height:auto;
	* height:100%;
	font-size:11px;
	font-family:Arial,Helvetica,sans-serif;
	color:#000;
}

#header {
	background:url(../images/interface/header.jpg) no-repeat;
	width:829px;
	height:260px;
	/*padding:10px 0 0 10px;*/
	margin:0;
}

/*#main {
	width:829px;
/*	height:100%;
}*/

#menu {
	float:left;
	width:201px;
	background:url(../images/interface/menu.jpg) repeat-y;
	height:100%;
}

#contenu {
	float:left;
	width:425px;
	background-color:#fff;
	height:100%;

}

#droite {
	float:left;
	width:203px;
	background-color:#fff;
	height:100%;
}

#traits {
	float:left;
	width:203px;
	background-color:#fff;
	height:509px;	
	background:url(../images/interface/traits.png) no-repeat;
}

#newsletter {
	width:203px;
	/*height:100%;*/
	background:url(../images/interface/newsletter.png) repeat-y;
	clear:both;
}

#footer {
	background:url(../images/interface/footer.jpg) no-repeat;
	width:829px;
	height:66px;
	clear:both;
}

#clearer {
	clear:both;
}


pouvez vous m'aider?
merci
Modifié par elti69 (21 Feb 2007 - 18:35)
Administrateur
elti69 a écrit :

pouvez vous m'aider?
merci

Hello,

Oui bien-sûr, cette question - comme tu t'en doutes - a déjà été souvent posée, donc la première piste que je peux te donner est la FAQ qui est justement faite pour regrouper les questions souvent posées et qui va répondre exactement à celle-ci Smiley smile
Sinon, il reste la solution de la recherche dans le forum qui devrait renvoyer une 50aine de réponses pertinentes.

Bonne chance Smiley smile
--> dans la faq :

"A l'heure actuelle, la solution la plus simple à mettre en oeuvre (en raison des lacunes de certains navigateurs) est encore d'employer une mise en page à l'aide de tableaux."

Je trouve que cette idée n'est pas plus mauvaise qu'une autre, tant qu'on l'utilise uniquement dans des cas extrèmes comme celui-ci.
Mais aussi si on utilise les tableaux de manière qu'ils soient valides également.

Le code xhtml ne sera pas beaucoup plus lourd il me semble.

Exemple :



<table>
<tr><td colspan="2">HEADER</td></tr>
<tr><td>MENU GAUCHE</td><td>CONTENU</td></tr>
<tr><td colspan="2">FOOTER</td></tr>
</table>



Le reste du contenu se faisant avec des div h1 et autres ul etc... Smiley smile
Modifié par Oryo (22 Feb 2007 - 12:28)
Ouais pour les colonnes de même hauteur, faut d'abord voir l'aspect des colonnes : couleur de fond unie ? Images ? Images qui se répètent sur y ? etc.
la colonne1 a une image qui se repete en y la colone2 a un fond de couleur unie et la colone3 est en fait en 2 partie. une partie avec une image en fond de 500px de haut et une deuxieme partie en dessous avec une image de fond qui se repete en y...
j'ai tester la solution du tableau et ca marche sous IE mais pas sous FF Smiley bawling
La colone 1 et 2 ne "descende" pas jusqu'en bas et la partie basse de la colone 3 est a gauche et pas a droite.

CSS

html, body {
	margin:0;
	padding:0;
	text-align:center;
	font-family:Arial,Helvetica,sans-serif;
}

body {
	background-color:#000;	
	text-align:center;
}

#general {
	text-align:left;
	margin:0 auto;
	width:829px;
	height:auto;
	* height:100%;
	font-size:11px;
	font-family:Arial,Helvetica,sans-serif;
	color:#000;
}

#tablegeneral {
	text-align: justify; 
	width: 829px;
	border:0;
	margin-left:auto;
	margin-right:auto;
}


#header {
	background:url(../images/interface/header.jpg) no-repeat;
	width:829px;
	height:260px;
	margin:0;
}

#menu {
	float:left;
	width:201px;
	background:url(../images/interface/menu.jpg) repeat-y;
	height:100%;
}

#contenu {
	float:left;
	width:425px;
	background-color:#fff;
}

#droite {
	float:left;
	width:203px;
	background-color:#fff;
	height:100%;	
}


#traits {
	float:left;
	width:203px;
	background-color:#fff;
	height:509px;	
	background:url(../images/interface/traits.png) no-repeat;
}

#newsletter {
	width:203px;
	float:left;
	background:url(../images/interface/newsletter.png) repeat-y;
}

#footer {
	background:url(../images/interface/footer.jpg) no-repeat;
	width:829px;
	height:66px;
}

#clearer {
	clear:both;
}


HTML
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.1//FR" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
		<link rel="stylesheet" href="css/styles.css" />
	</head>
	<body>
		<table id="tablegeneral" cellpadding="0" cellspacing="0">
			<tr>
				<td id="header" colspan="3"></td>
			</tr>
			<tr>
				<td id="menu" rowspan="2"> menu</td>
				<td id="contenu" rowspan="2">contenu</td>
				<td id="traits"></td>
			</tr>
			<tr>
				<td id="newsletter">newsletter<br />newsletter<br />newsletter<br /></td>
			</tr>
			<tr>
				<td id="footer" colspan="3"></td>
			</tr>
		</table>
	</body>
</html>


j'avance grace a vous merci...
Modifié par elti69 (20 Mar 2007 - 14:44)
Sujet clos
Aller à