28173 sujets

CSS et mise en forme, CSS3

Design deux colonnes: comment bien positionner?

Bonjour à tous,
J'ai une question à propos des design à deux colonnes, assez courant quand il s'agit d'aligner le menu et le contenu.
Quand je fais ça, je décompose la page en deux/trois blocs parents (trois quand je mets un titre principal en h1 qui vient se loger tout en haut). Parmi eux, on trouve donc un bloc menu et un bloc contenu.
Ma question est simple: comment bien positionner en CSS ces deux blocs?
Actuellement, je définis ces deux éléments comme flottant; l'un à gauche; l'autre à droite. Cela me paraît plus "naturel" qu'un positionnement absolu; mais dans la réalité qu'est-ce qui convient le mieux?
Pour spécifier les largeurs, j'utilise l'unité '%' qui m'assure une très bonne capacité d'adaptation aux résolutions différentes des navigateurs. L'unité 'px' est définie pour une résolution donnée; l'unité 'em' est plus libre mais se cantonne à un ratio largeur/hauteur défini dans le cas des deux colonnes et reste dépendante de la taille de la police de l'utilisateur, non de la résolution elle-même.

Cependant, un problème persiste: les bordures sont considérées comme externe à l'élément; et surtout les marges internes ne sont pas comptées dans la largeur de l'élément. Avec des largeurs définies en pourcentage; sur une très petite résolution ça va finir par provoquer un débordement; et on va donc avoir une colonne au dessus de l'autre et non un alignement.

La seule solution que j'ai trouvée pour avoir des colonnes bien alignées partout est de supprimer les marges internes/externes et les bordures. Un sacrifice plus que regrettable.

Comment avoir un alignement parfait quelle que soit la résolution?
Le but, par rapport au tableau, reste d'avoir un site accessible sans CSS; pour ma part quand je fais en deux colonnes je mets un lien "Aller au menu" ou "Aller au contenu" pour éviter un long défilement à l'utilisateur et avoir une navigation agréable sur des écrans minuscules et sur des navigateurs qui ne supportent pas les CSS.
Salut,

Je pense qu'au lieu de nous "raconter" ta feuille de style, si tu nous fournissais dans l'idéal une page en ligne, ou au moins l'intégralité du code html ET css, il serait plus facile de t'aider. Smiley cligne
Je souhaitais parler d'une manière générale; mais par exemple, ça se résume en ce type de page: 
<html>
        <head>
        <title>Manger</title>
                <style>
                        div#menu {
                                float: right;
                                margin: 0;
                                padding: 0.1em;
                                border-style: solid;
                                border-width: 1px;
                                width: 30%;
                        }

                        div#contenu {
                                float: left;
                                width: 70%;
                                margin: 0;
                                padding: 0.1em;
                                border-style: solid;
                                border-width: 1px;
                        }
                </style>
        </head>
        <body>
                <div id="menu">Ceci est le bloc de menu.<ul><li>1</li><li>2</li><li>3</li></ul></div>
                <div id="contenu">Ceci est mon bloc de contenu</div>
        </body>
</html>

Ma question était donc de savoir s'il était possible de conserver un alignement parfait (si le visiteur souhaite utiliser la CSS) quelle que soit la résolution du visiteur, et ce, bien sûr, sans tableaux.
Les deux éléments bloquants sont:
- Le padding: n'est pas inclus dans le compte de la largeur: ça devrait déborder sur l'autre bloc; donc le navigateur case un bloc sous l'autre.
- Les bordures: ne sont pas incluses dans le compte de la largeur; les conséquences sont les mêmes que précédemment.

L'idéal serait donc de pouvoir indiquer dans width un truc du genre "70%-1px-0.1em;" pour que ça colle; mais ça ne doit pas se faire...
Sujet clos
Aller à