[Résolu] Tableau CSS : inverser 2 colonnes en css uniquement

Bonjour !

Je construis actuellement un site web en utilisant la méthode de tableau CSS mais je bloque sur la position de deux colonnes : la première est le menu et la seconde est le corps du texte. Je souhaite garder cet ordre logique en html mais le voudrais inversé sur un écran PC de sorte que mon menu soit bien à droite.

Une idée à me proposer ?

J'ai téléversé ma maquette sur le web par commodité à cette adresse : http://www.enveloppes-ardennes.com/essais/index.php.

Merci

Marie

Salut,

Personnellement j'ai mis un float:left sur id="corps">

et un float:right sur id="menudroit">

je me retrouve avec ça


C'est ce que tu demande ?
Modifié par JuseN (15 Jun 2012 - 14:22)

Bonjour JuseN et merci de ta réponse

C'est exactement ce que je souhaite effectivement mais j'ai oublié de rappeler sur ce post que je suis une habituée du "float" et que je profite de ma mise à niveau avec HTML5/CSS3 pour quitter ce type de positionnement.

Raphaël décrit une manip' en page 131 de son dernier bouquin : display: table-footer-group; ou display: table-header-group; mais cela ne semble pas logique sur un tableau en colonnes comme le mien (?). As-tu une idée qui irait dans ce sens ?

Marie

Hummm... moi tu m’enlève les float, je meurs

Malheureusement sur ce point là, je pence pas être assez calé en HTML5 ET CSS3 pour te dire une autre solution, désolé et bonne chance

Cordialement,
Modifié par JuseN (15 Jun 2012 - 14:45)

Pas de problème JuseN, tu auras d'autres occasions de me secourir

J'espère que quelqu'un a une solution... !

Merci

Marie

Bonjour,

la seule autre alternative utilisable actuellement sera les position (avec un absolute sur ta nav).

C'est logique puisque tu souhaites rompre le flux : il ne te reste que les float ou les position..
Dans un certain avenir on pourra manipuler les positions bien plus facilement, mais pour le moment on reste un peu limité...

Bonjour Ten

C'est ballot tout de même : il est possible de modifier en css l'ordre des lignes dans un tableau mais pas ses colonnes... .

Bon, il y a quand même plein d'autres raisons de passer à HTML5/CSS3 alors je continue mon apprentissage

Merci Ten !

Marie
Modifié par Marie08 (15 Jun 2012 - 15:25)

Bonjour,

tu peut inverser le sens d'affichage des colonnes de ton tableau avec direction.

ex:

#centre {
direction:rtl;
}

et ensuite le rétablir dans les cellules :

#menudroit , #corps {
direction:ltr;
}

J'avais fait des test la dessus en 2008 http://yidille.free.fr/plux/valign/index.php?0014-float
avec cette page en demo : http://gcyrillus.free.fr/essai/testdroite-gauche-inline-block.html

en passant par inline-block, display:table/table-cell et un veritable tableau.

Je pense que cela correspond tout a fait a ce que tu cherches.

Cordialement, GC

Bonjour GC-Nomade et un grand merci à toi !

Ta méthode fonctionne et voici la page de test : http://www.enveloppes-ardennes.com/essais/index.php.

En html brut, j'ai bien mon menu d'abord et pour le style écran pc mon menu est bien à droite... c'est génial !

Excellente semaine à toutes et tous

Marie