28220 sujets

CSS et mise en forme, CSS3

[Résolu] 2 colonnes - accessibilité, pas de défilement horizontal

Bonjour,

j'utilise du code de cette manière :
<div id="conteneur">
<div id="contenu"><div id="enveloppe">
...
</div></div>
<div id="menu">
...
</div>
</div>


Je souhaite faire un design 2 colonnes dont le menu (à gauche) a une taille fixée, et le contenu non. Je tiens, pour des raisons d'accessibilité, à garder le HTML tel qu'il est (c'est tellement plus lisible avec Lynx Smiley cligne ).

J'arrive à faire le design désiré en utilisant un hack (je pense que c'en est un) : les marges négatives et le padding (d'où l'obligation d'utiliser le div enveloppe). Seulement, j'obtiens systématiquement une barre de défilement horizontal. Comment l'éviter ?

Merci d'avance,

Frór
Modifié par Fror (16 Sep 2005 - 14:43)
Plop,

Premier post donc je te souhaite la bienvenue par ici Smiley smile

Le principe de l'enveloppe avec les marges négatives n'est pas un hack mais plutôt une technique css.
Un hack est plutôt destiné à distribuer des règles CSS pour une palette de navigateurs restreinte.

Pour ton souci en lui-même, il est difficile de te dire, car pour l'avoir utilisée cette technique n'est pas censée engendrer cette scrollbar. Il faudrait donc voir le contexte de ta page par l'intermédiaire d'une page de test en ligne, c'est tellement plus simple Smiley langue

La seule piste que je peux t'indiquer, c'est de bien supprimer la valeur de tes padding de tes largeurs, phénomène qui peut engendrer des débordements.
Bonjour,

S'agit-t-il de centrage par les marges négatives ? Auquel cas ce centrage par les marges négatives entraîne un rognage irrémédiable de la partie gauche du contenu si la résolution est inférieure à celle prévue lors de la conception. A proscrire donc.

Si ce n'est pas le cas, merci de fournir une url vers le code complet, afin qu'on ne tâtonne pas pour identifier l'erreur.
Bonjour,

tout d'abord, je voudrais vous remercier de vous occuper de mon soucis.

Je n'ai malheureusement pas pour l'instant d'accès à un site internet quelconque. Je ne peux donc pas y déposer les fichiers souhaités. J'ai donc copié/collé ci-dessous le code essentiel de mon design.

Pour Mr Denis, il ne s'agit absolument pas de centrer le contenu avec des marges négatives. Juste de faire un design en deux colonnes, sans abuser de balises <div />.

En rapport avec le code qui suit, l'idéal serait de supprimer les barres de défilement horizontales qui apparaissent. Je suppose qu'il faut pour cela éviter la bande bleue que l'on voit en haut, cependant, je n'y arrive pas.

La section conteneur est importante, car j'utilise un en-tête et un pied de page. Dans la mesure du possible, ne pas y toucher serait un plus.

Voici le code HTML simplifié :
<body>

<div id="conteneur">
  <div id="enveloppe">
    <div id="contenu">
      <h1>Titre</h1>
      <p>Texte de remplissage</p>
    </div>
  </div>
  <div id="navigation">
    <h1>Liens</h1>
    <ul>
      <li><a href="#">Lien 1</a></li>
      <li><a href="#">Lien 2</a></li>
    </ul>
  </div>
</div>

</body>


Et voici maintenant le code CSS lié à cette page :

body, body * {
  margin: 0;
  padding: 0;
  border: 0;
}

#conteneur {
  background-color: red;
  margin: 1em 3em 0;
}

#enveloppe {
  background-color: blue;
  width: 100%;
  margin-right: -15em;
  float: right;
}

#contenu {
  background-color: yellow;
  margin-right: 15em;
}

#navigation {
  background-color: green;
  float: left;
  width: 14em;
}
Plop,

En fait tu inverses la marge négative.

Si tu positionnes ton menu à gauche, c'est de ce côté là qu'il faut laisser la place.

Il faut donc remplacer margin-right: -15em dans ton enveloppe par margin-left: -15em

:)
Bonjour,

merci de m'avoir aidé à résoudre ce souci. Ça fait quelques jours que je travaillais dessus, et je ne comprenais pas mon erreur. Ma page est toute belle, sans barre de défilement, maintenant.

Merci beaucoup Smiley cligne

Frór
Sujet clos
Aller à