28220 sujets

CSS et mise en forme, CSS3

Ordre du code XHTML pour un site en trois colonnes

Bonjour !
Je fais un design CSS avec des menus à gauche et à droite avec float.
Voici l'ordre tel qu'il s'affiche sur un navigateur texte:

menu1
menu2
titre
contenu
bas

J'aimerais savoir s'il était possible (j'ai vu un exemple sur les forums d'alsacreations il y a peu de temps, mais impossible de remettre la main dessus) de faire ca:

titre
contenu
menu1
menu2
bas

Est-il possible de changer l'ordre du code, sans bouger les menus Smiley confus

Merci beaucoup pour vos réponses ! Smiley smile
Modifié par Sylvain (08 Sep 2005 - 23:15)
Salut Sylvain Smiley smile

ben tu fais le contraire je pense.


#contenu {
float:right;
}


<edit>Ooops mal lu la question désolé Smiley confused </edit>
Modifié par clb56 (08 Sep 2005 - 22:06)
A l'arrache pour me faire pardonner Smiley lol 


body {
padding-top:5em; /*valeur au hasard*/
}

#titre {
position:absolute;
width:100%;
}

#contenu {
margin:0 20%;
}

#menu1 {
position:absolute;
top:5em; /* en fait la valeur du padding sur body */
left:0;
width:20%;
}

#menu {
position:absolute;
top:5em; /* en fait la valeur du padding sur body */
right:0;
width:20%;
}


Quand je fais ce genre de chose j'utilise des em pour éviter les mauvaises surprises en cas d'agrandissement du texte.

J'espère que ça t'aidera, ça devrait fonctionner mais je n'ais pas testé pour affiner la chose.

++
ha d'accord, en cas de margin-left et right assez grand pour faire rentré les colonnes, le float se met là, c'est ca ?
Ton code ne correspond pas clb56, je veux utiliser des menus en float.

Je n'arrive pas a comprendre la singularité de cet exemple de Laurent Denis.
Ni ce qui le fait marcher, mais je cherche !
Je ne comprends vraiment rien, je donne donc un exemple préci.

La page prends 100% de la largeur.
Un menu gauche de 200px.
Un menu droite de 200px.
Le centre prend le reste de la page.

Le tout, avec dans l'ordre dans le code:
centre
gauche
droite

Comment dois-je faire pour m'y prendre, car l'exemple de Laurent marche, mais des que j'y touche, ca ne marche plus Smiley bawling

PS:Oups, désolé pour les UP, je ne m'étais pas rendu compte que ca faisait un troisième... Trop tard...
Modifié par Sylvain (08 Sep 2005 - 23:24)
Sylvain a écrit :
Je n'arrive pas a comprendre la singularité de cet exemple de Laurent Denis.
Ni ce qui le fait marcher, mais je cherche !


lol. Je suppose que quelques explications seront les bienvenues Smiley cligne

Cet exemple repose simplement sur l'utilisation de la position relative pour intervertir les colonnes affichées à gauche et au centre. Il faut se souvenir que la position relative fonctionne en deux temps :
- les éléments sont placés (en flux ou en flottant) comme s'il n'y avait pas de position relative
- puis ils sont décalés vers le haut, le bas, la droite, la gauche, selon les valeurs indiquées, et sans que cela n'entraîne aucune modification des autres éléments.

Ici, avant la position relative :
- la colonne "contenu central" s'affiche à gauche, puisqu'elle est en tête de contenu et en float:left
- la colonne "menu gauche" s'affiche au centre, puisqu'elle suit immédiatement la précédente dans l'ordre HTML et qu'elle est également flottante.

Après la position relative :
- la colonne "contenu central" a été déplacée vers la droite, pour occuper la position voulue, de la largeur de la colonne "menu gauche" plus ou moins quelque-chose pour gérer les effets de marge et de bordure.
- inversement, la colonne "menu gauche" a été déplacée vers la gauche de la largeur de la colonne "contenu central" plus ou moins etc.

C'est un simple échange de place. La seule difficulté est de déterminer précisément les valeurs de déplacement en fonction des largeurs de colonnes et des effets de marges recherchés.

Pour préciser rapidement les valeurs de déplacement de l'exemple :
- #gauche est déplacé de 43%, c'est à dire 5% de moins que la largeur de #centre afin de créer l'effet de marge de 5% à l'extrême gauche (et donc, l'effet de centrage du tout)
- #centre est déplacé de 26%, c'est à dire la largeur de #gauche, plus les 5% de marge extrême gauche, plus 1% de marge entre #centre et #gauche.
- #droite mesure 20% avec une marge droite de 5% qui fait pendant à la marge extrême gauche, pour l'effet de centrage. Le fait de flotter à droite permet de réserver la marge intérieure de 1% entre #centre et #droite.
- une valeur de marge diminuée de moitié est adressée à IE Windows pour #droite, afin de compenser le bug de la double marge des flottants. Un display-inline appliqué au flottant règlerait tout aussi bien le bug.

Au passage, cet exemple de mise en page aurait besoin d'être dépoussiéré : il est possible de gérer beaucoup plus proprement le rendu dans IE 5.x et 6.0, sans hack, avec une CSS en commentaires conditionnels.
Modifié par Laurent Denis (09 Sep 2005 - 06:15)
Sylvain a écrit :
Je ne comprends vraiment rien, je donne donc un exemple préci.

La page prends 100% de la largeur.
Un menu gauche de 200px.
Un menu droite de 200px.
Le centre prend le reste de la page.


Le code de mon exemple ne sera adaptable à ces contraintes : la largeur de #centre étant indéterminée dans ton cas, le déplacement correspondant de #gauche est impossible.
Merci beaucoup pour ces explications !
Ca me servivra quand même pour les sites à longueur indéterminées!

Je mets un résolu quand meme, puisqu'il n'y a pas de solutions apparament...
Sauf si quelqu'un connaît une autre technique !
Modifié par Sylvain (09 Sep 2005 - 07:09)
Sujet clos
Aller à