18041 sujets

Questions générales et questions de débutants

Problèmes gabait 3 colonnes

Hello tout le monde

Voilou j'ai utilisé ce gabarit pour créer un site. J'ai juste un soucis, si un des deux colonnes (gauche ou droite) est plus garnde que la colonne centrale, le pied de page ne se décale pas, et le contenu droite ou gauche dépasse du gabarit !
J'avais déjà utilisé ce gabarit il y a quelques mois, il me semblait qu'il fallait faire un :
clear :both;

dans les propiétés du pied de page !!
Mais ça ne marche pas ! Quelqun' peut-il m'éclairer ? Merci.
Modifié par Florent V. (07 Nov 2007 - 12:24)
Bouh a écrit :
J'ai juste un soucis, si un des deux colonnes (gauche ou droite) est plus garnde que la colonne centrale, le pied de page ne se décale pas, et le contenu droite ou gauche dépasse du gabarit !

À partir du moment où ces deux blocs sont positionnés en absolu, c'est inévitable.

Solution: utiliser un autre type de positionnement (par exemple des colonnes flottantes).
Lire par exemple: Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Modifié par Florent V. (07 Nov 2007 - 12:39)
Modérateur
Salut,

Dans le cadre de la demande de Bouh, ça semble effectivement pas mal cette technique mais ne vaudrait-il mieux pas combiner la technique des flottants et du clear de position absolue dans le cas de cet exemple ? Si je désactive JS, je me retrouve avec certaines zones illisibles de par leur chevauchement... Smiley confuse
koala64 a écrit :
Si je désactive JS, je me retrouve avec certaines zones illisibles de par leur chevauchement... Smiley confuse

Oui, et je crois que Laurent ne citait pas particulièrement cet article comme exemple à suivre.

C'est intéressant, mais partir du constat d'un support problématique de float pour aboutir à une solution positionnement absolu + javascript, c'est un peu tiré par les cheveux à la base.
Et l'invention de display: inline-absolute, c'est du grand n'importe quoi. D'ailleurs, je n'ai pas bien compris pourquoi il utilise position: relative plutôt que position: static...

Et surtout, j'ai l'impression que l'auteur n'a jamais entendu parler de display: table-cell. Smiley sweatdrop
Edit: ni de display: inline-block, maintenant que j'y pense.
Modifié par Florent V. (07 Nov 2007 - 16:21)
Disons qu'il est intéressant de voir un auteur comme Andy Clarke, et avec lui toute l'école "CSS Zen Garden", considérer que la technique des flottants n'est pas suffisamment fiable, et privilégier une solution via un javascript supposé miraculeux.

Ce n'est pas le seul problème qu'on rencontre dans ce livre, et dans cette école, d'ailleurs Smiley cligne
upload/14319-ex-menu.gif

je te donne le code css


div {
	text-align:center;
	}
div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#menu {
	float: left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:400px;
	height:400px;
	background-color:#FFCC00;
	}
div#menu-g { 
	float: left;
	width: 100px;
	height: 400px;
	background-color: #ff0000;
	}
	
div#pied_page {
	clear:both;
	width:600px;
	height:50px;
	background-color:#33FF99;
	}


le code html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu</div>
	<div id="menu-g">Menu de gauche</div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>
Merci à tous pour vos réponses. Mais du coup j'ai repris un site que j'avais fait il y a quelques mois. Je m'étais d'ailleurs inspirer d'un gabarit alsacreations il me semble. Celui-ci a du être modifier depuis ! En gros ça donne ça !


#conteneur {
	width: 1000px;
	margin-left: auto; 
        margin-right: auto; 
}
#centre {
        margin-left: 200px;
	margin-right: 200px;
}
#gauche {
	float: left;
	width: 200px;
}
#droite {
	float: right;
	width: 200px;
}
#footer {
	clear: both;
}




<body>
	<div id="conteneur">
	       <div id="gauche">gauche</div>
	       <div id="droite">droite</div>
	       <div id="centre">centre</div>
	       <div id="footer">pied de page</div>
        </div>
</body>


Ca marche trsè bien ! Après par rapport à la solution de flattazor, je ne sais pas laquelle il faut mieux choisr !
Sujet clos
Aller à