18067 sujets

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

Layout en trois colonnes.

Bonjour,

J'ai lu le tutoriel, et voulais réaliser une page toute simple avec un header, trois colonnes, et un footer. Désolé pour la question très très basique, je suppose que vous avez du y répondre mille fois...

J'ai tenté le code html suivant :

<div id="page">
<div id="header">header</div>
<div id="content">
	<div id="column1"><p>menu</p></div>
	<div id="column2">centre</div>
	<div id="column3">news</div>
</div>
<div id="footer">footer</div></div>
</div>


Et le css suivant :

#page{
	text-align: left;
	width: 100%;
	padding: 0px;
	margin: 0px;	
}

#header{
	text-align: left;
	background-color: grey;
	border-bottom: 1px solid #000000;
	padding-bottom: 10px;
	margin-bottom: 10px;
	color: #000000;
	margin: 0px;
	font-weight: bold;
	font-size: 16pt;
	padding: 0px;
}

#content{
	float: none;
	padding: 0px;
	margin-bottom: 10px;
}
	
#column1{
	float:left;
	background-color: blue;
}

#column2{
	background-color: red;
	margin-left: 20px;
	float:left;
}

#column3{
	float:left;
	background-color: green;
	margin-left: 20px;
}

#footer{
	text-align: center; 
	color: #000000;
	font-size: 10pt;
	border-top: 1px solid #000000;
	margin-top: 10px;
	padding-top: 10px;
	background-color: grey;
}


J'ai plusieurs questions.

- Premièrement, mes colonnes dépassent sur mon footer. Je suppose que c'est parce qu'elle sortent du flux si j'ai bien compris, mais comment faire alors pour éviter ce problème? J'ai essayé de mettre mes 3 colonnes dans un DIV qui ne serait flottant, mais ça ne marche pas.

- Deuxièmement, comment faire pour que la colonne centrale occupe toute la place? Quand je met width: 100%, mes colonnes s'affichent les unes au dessous des autres Smiley decu

- Troisièmement, si jamais je voulais avoir mon footer toujours collé au dessous de la fenêtre de mon navigateur, comment faire?

Merci pour votre patience avec les débutants que nous sommes, et pour votre site que je viens de découvrir et que je trouve super intéressant! Smiley smile
Salut & bienvenue.

1/ pour empêcher les flottans de passer au-dessus du footer, il faut lui donner la propriété clear: both | left | right;.

2/ si tu donnes une largeur de 100% à la colonne 2, elle va bien occuper toute la largeur de la page, et il n'y aura plus de place pour afficher les colonnes 1 & 3 à côté d'elle ... elles sont donc affichées l'une en dessous de l'autre. Mais je suppose que dans ce cas, tu veux simplement que les 3 colonnes ensemble occupent toute la largeur. Il y a 2 possibilités : soit tu donne des largeurs aux 3 colonnes en t'arrangeant pour que la somme des 3 soit inférieure à 100% (vérifier sous Firefox & IE, ils ne donnent pas le même résultat pour des histoires d'arrondi, et faire attention aux marges), soit tu positionnes les colonnes 1 & 3 en float left & right respectivement et tu leurs donnes des largeurs. Tu laisses alors la colonne 2 dans le flux et tu lui donnes des marges à droite et à gauche pour laisser de la place aux colonnes flottantes.

3/ Pour coller le footer en bas de page, il faut utilliser le positionnement absolu : 
position: absolute;
bottom: 0;
width: 100%;
Asterius a écrit :
Premièrement, mes colonnes dépassent sur mon footer. Je suppose que c'est parce qu'elle sortent du flux si j'ai bien compris, mais comment faire alors pour éviter ce problème? J'ai essayé de mettre mes 3 colonnes dans un DIV qui ne serait flottant, mais ça ne marche pas.

Bonjour,
bienvenue Smiley biggthumpup

Je suis aussi débutant dans la mise en page en colonnes en css, ça je crois savoir faire pour avoir cherché : 
clear: both;
dans le footer.

Tu peux trouver des infos (très beaucoup) ici, à la fin c'est expliqué comment faire une mise en page en 3 colonnes qui flottent et poussent le footer.
La FAQ est ton amie, aussi ..

Tu peux supprimer ton <div> content, je ne pense pas qu'il serve à quelque chose ?
J'avais mis le content parce que le tutoriel conseillait de regrouper les flottants ensembles.

Sinon merci beaucoup pour vos réponses, je m'en vais essayer tout ça ce soir! Smiley biggrin
Sujet clos
Aller à