28172 sujets

CSS et mise en forme, CSS3

Mise en page 3 colonnes (débutant)

Bonjour,

Je suis nouveau sur le forum et suis ravi de vous rejoindre.

Je souhaiterais créer un site internet avec pour mise en page principales 3 colonnes de même hauteur:
- une colonne alignée à gauche de 200px de large
- une colonne principale de largeur indéfinie qui sera d'autant plus grande que la résolution de l'écran de l'utilisateur sera grande
- une colonne à droite de 200px de large.

J'ai donc crée le CSS suivant :

.gauche{
display: inline-block;
width: 200px;
background-color:grey;
position: absolute;
left: 0px;
}

.centre{
display: inline-block;
background-color:silver;
}

.droite{
display: inline-block;
width: 200px;
background-color:grey;
position: absolute;
right: 0px;
}

et le HTML

<body>

<div class='gauche'>gauche</div>
<div class='centre'>centre</div>
<div class='droite'>droite</div>

</body>

Impossible d'afficher quoi que ce soit dans la colonne du milieu, là ou justement je dois afficher tout plein de choses très intéressantes!

Il y a un fond blanc et mon texte 'centre' ne s'affiche pas.
Savez vous pourquoi?

Merci d'avance pour votre aide
Salut,
vu que ton menu gauche est en absolute il est sorti du flux
pareil pour le menu droit.
Du coup il ne reste plus que celui du milieu dans le flux.
Du coup il est caché derriere le menu gauche (en dessous edit : en dessous dans le sens en profondeur ^^)
Il suffit de rajouter un margin-left de 200px pour le décalé vers la gauche de 200px pour qu'il ne soit plus sous le menu de gauche Smiley smile 

.centre{
display: inline-block;
background-color:silver;
margin-left:200px;
}

Modifié par mathieu1004 (17 Jan 2014 - 18:09)
Ca marche nikel merci!!! Smiley biggrin

J'aurai encore une question : est-il possible de faire en sorte que les 3 colonnes aient la même hauteur?

Il faudrait que la hauteur des colonnes externes s'adapte à la hauteur de la colonne centrale qui sera souvent plus haute que les autres (il faudra scroller pour lire le bas de la page).

J'ai essayé:
- height :100%; sur les colonnes extérieures mais quand on scrolle il n'y a plus rien en dessous (c'est tout blanc et ça fait une "cassure")
- vertical-align:baseline; pour les 2 blocs extérieurs mais cela ne change rien.

Encore merci
salut,
le code CSS que tu proposes n'est pas adapté et contient des incohérences (combiner un "display: inline-block" et un "position: absolute" ne sert à rien, vu que ton élément sera en "position: absolute").
De plus c'est très bricolé. La seule chose moderne qui correspondrait à ce que tu cherches est la mise en page en tableau.

<div id="main">
	<div class="gauche"></div>
	<div class="centre"></div>
	<div class="droite"></div>
</div>



#main {display:table;width:100%;}
#main>div {display:table-cell;vertical-align:top;}
.gauche, .droite {width:200px;background:#7e7e7e;}
La mise en page par tableaux!!
C'était le bon vieux temps des 5 premières versions du site puis j'avais abandonné cette technique pour moderniser le site avec le CSS. J'y retourne donc pour la prochaine version!

Le code marche nikel, un grand merci.

Si jamais vous avez besoin de cours de maths le site est www.cmath.fr.
La prochaine version devrait être beaucoup plus jolie Smiley smile
Administrateur
Bonjour,

je me permet d'insister sur ce point crucial : les éléments du code HTML ont une certaine sémantique (div n'en a aucune, parfait pour des colonnes de mise en page. En HTML5 on a plus de choix avec section, aside, nav, article par exemple) et quelle que soit la manière dont on les style en CSS, ils garderont leur sémantique. Un div affiché "à la manière d'" une cellule de tableau reste sans sémantique et surtout pas celle d'un tableau (on a pas régressé de 10 ans, je vous rassure Smiley cligne ).

Ressource : http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html
Les 3 articles d'Openweb sur le positionnement : http://openweb.eu.org/articles/initiation_flux/

Pour de la mise en page :
- les flottants restent utiles (mais il faut maîtriser la propriété clear et le concept de clearfix avant de tourner chèvre quand "le background disparaît"),
- le positionnement absolu c'est à peu près jamais une solution souhaitable (même si c'est la première à laquelle on pense faute de connaître autre chose).
- display: inline-block c'est pas mal mais il faut gérer les 4px que ça ajoute (ce sont les 4px d'un espace) ou l'enlever physiquement dans le code HTML pour s'en débarrasser. 2 colonnes de 100px en display: inline-block ça fait souvent 204px si on n'y fait pas attention ^^
- display: table et cie c'est idéal quand on veut que ça reste sur 1 ligne et que ce soit de même hauteur. Il y a 2 algorithmes pour les tables, selon la valeur de table-layout : dans un cas les largeurs s'adaptent au contenu et dans l'autre cas les largeurs tiennent compte de ce qu'indiquent les CSS.
Merci pour ces précisions très intéressantes.

Je vais lire attentivement les 2 liens, j'ai encore beaucoup de progrès à faire.

Enfin concernant la sémantique j'avais bien prévu dans mon plan de site des blocs <HEADER> et <NAV> sur toute la largeur puis en dessous mes 3 colonnnes <ASIDE>, <SECTION>, et <ASIDE>, mais suite aux problèmes j'avais fini par simplifier au maximum avec juste 3 blocs div, ce qui est aussi plus simple à comprendre pour les lecteurs du forum.

Merci à tous pour votre aide.
Sujet clos
Aller à