[résolu] Mise en page fluide trois colonnes... ...et sémantique XHTML

Bonsoir,

Pour réaliser une mise en page fluide sur trois colonnes, il faut d'après les différents tutoriels que j'ai pu voir placer le div de gauche et le div de droite avant le div du centre, ce dernier restant fluide alors que les 2 autres se voient attribuer des tailles fixes.

Exemple (simplifié) tiré d'un tutoriel Alsacréation :

[b]HTML[/b]

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

[b]CSS[/b]

#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}

http://css.alsacreations.com/modeles/modele15.htm

Ce qui me gêne un peu dans cette mise en page, c'est que si les CSS sont désactivées, la partie qui est à droite se retrouve devant la partie centrale.

Imaginons des paragraphes de titres de niveau 1 et 2 dans la partie centrale et un titre de niveau 3 dans la partie de droite.
les titres de niveau 3 se retrouveraient avant les titres de niveau 1 et 2.

Apparemment le problème est le même avec les positionnements absolus.

Existe-t-il une solution à ce problème ? Entre Sémantique et mise en page faut-il choisir ?

Merci.

Eric
Modifié par EricLB (29 Nov 2005 - 09:52)

Je pense qu'il est très rare de falloir choisir entre sémantique et mise en page, jette un oeil du côté du site w3.org, ils sont plutôt du genre à respecter les normes et à privilégier la sémantique, et leur page d'accueil comporte 3 colonnes.
Modifié par instantane (22 Nov 2005 - 21:19)

Salut !
Au contraire, c'est bien que sans le css on est tout le menu en entier, puis apres le contenu, ce n'est pas logique ?

instantane a écrit :
Je pense qu'il est très rare de falloir choisir entre sémantique et mise en page, jette un oeil du côté du site w3.org, ils sont plutôt du genre à respecter les normes et à privilégier la sémantique, et leur page d'accueil comporte 3 colonnes.

Mon propos était plus de dire que sur ce point précis sémantique et mise en page s'opposaient, mais que je ne voyais pas comment régler ce problème à moins e revoir la mise en page...

Super_baloo8 a écrit :
Salut !
Au contraire, c'est bien que sans le css on est tout le menu en entier, puis apres le contenu, ce n'est pas logique ?

oui, d'accord, mais dans cet exemple précis (présentation en 3 colonnes)
la colonne 3 vient avant la colonne 2. Il ne s'agit donc pas seulement du menu.

bonjour,

Il n'y à aucune fatalité a ce modèle...

Si tu à besoin de conserver un ordre 1.2.3 dans le flux et sa représentation graphique, tu utiliseras trois flottants, ou deux flottants et un retrait gauche pour l'élément en flux.

En revanche si, 1 et 3 sont des menus, il peut y avoir une certaine opportunité à utiliser ce modèle.

Cela va dépendre essentiellement de la nature du contenu.

Par exemple sir les menus de la colonne 3 sont complémentaires au contenu, il n'y à aucun intérêt à le faire...

Donc question : quel est le contexte ?

Jean-pierre

Note: mais peut-être ais-je mal compris ton interrogation ?
Modifié par jpv (22 Nov 2005 - 22:47)

jpv a écrit :
tu utiliseras trois flottants, ou deux flottants et un retrait gauche pour l'élément en flux.

Deux flottants et un retrait gauche pour l'élément en flux, c'est déjà ce que j'ai mentionné dans mon exemple :

- le div de gauche en float Left
- le div du centre margé
- le div de droite en float right

Si je passe les trois en flottant, lors du redimensionnement en 800*600 par exemple, le troisième div va passer en dessous, non ?

Bonjour,

Ben si tu veux faire trois colonnes synchrones avec le flux, tu n'à pas nécessité d'utiliser des tailles fixes :

Avec trois flottants
div{
 float:left
}
#a{
width:20%;
}
#b{
width:59%
}
#c{
width:20%;
}

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Ou

Avec deux flottants
div#a{
width:20%;
}
div#b{
width:58%
}

Tu n'à donc pas de soucis avec les redimensionnements à la limite de la taille physique du plus grand élément de chaque colonne.

Mais bon tout ça reste très théorique, et en matière de mise en page CSS la téorie, si elle permet de manipuler, n'à jamais produit un seul "modèle" stable, malgrés la pernicieuse colonisation du modèle 131 (header,3 colonnes, footer) qui est au design CSS ce que la grippe aviaire est à la volaille.

CSS c'est de l'artisanat, faute de quoi on retombe dans les mêmes travers que la mise en page traditionnelle où c'est le contenu qui doit s'adapter et non l'inverse.

Jean-pierre
Modifié par jpv (23 Nov 2005 - 12:56)

La solution pour conserver la semantique de la page et l'ordre des titres et de
positionner les colonnes de gauche et de droite en absolute et de marger la partie centrale.

Tant que la partie centrale est plus haute que les parties gauche et droite, pas de problème, en revancher lorsque la partie centrale et plus courte, il me faut définir une hauteur minimum pour la partie du milieu.

A moins qu'il y ait une autre solution ?

Eric
Modifié par EricLB (29 Nov 2005 - 09:37)