css: flottement du float

[Invité]

je floate sur:

Code : Tout sélectionner

#contenant {
  width:800px;
  margin:0 auto;
  padding:0;
  }
#contenu {
  padding-left:10px;
  padding-right: 10px;
  margin-left:160px;
  margin-right:160px;
  text-align:left;
  }
#menuG {
  float:left;
  padding-left:10px;
  padding-right:10px;
  width:150px;
  text-align:left;
  }
#menuD {
  float:right;
  width:150px;
  text-align:right;
  padding-left:10px;
  padding-right:10px;
  }

dans la boite 'contenant', j'ai un menu à gauche 'menuG', un menu à droite 'menuD' et du blabla au lilieu dans 'contenu'
alors que je voudrais le blabla centré entre les menus, mes 2 menus 'float' n'encadrent pas mon 'contenu', ils sont en-dessous de chaque côté, mon 'contenu' est bien centré,
pourquoi?

[ottomar]

zut!
post signé ottomar

[calimo]

Euh... pas sur d'avoir tout compris
Tu as un exemple ? On dit souvent qu'un exemple vaut mieux que mille discours

[ottomar]

je sais, je sais
http://ottomar.blogspot.com/
c'est le blog de google que j'essaie de triturer pour en faire un 3 colonnes
le pire, c'est que ce même code marche au poil sur ma page perso

[Invité]

c'est pas une histoire de clear ? ou bien d'ordre des div : en mettant tes MenuG et MenuD avant celui de Contenu ?

[calimo]

Je ne vois pas tes #menuD et #menuG, et ton code n'est pas des plus facile à lire, mais visiblement tes sidebar tu les a placées après le contenu, alors que pour que ça fonctionne un float doit être placé avant le contenu. En effet il est sorti du flux, et la suite s'écoule sur le côté. Ici il n'y a pas de suite...

Un peu de lecture : http://css.alsacreations.com/Bases-et-i ... ses-en-CSS

[ottomar]

j'ai essayé avec un clear:both, de toutes manières, il sert à rien puisque je suis sous le titre

=content/main/sidebar/sidebarright

[Invité]

bin c'est bien alors l'ordre :

Code : Tout sélectionner

#content
  +- #sidebar
  +- #siderightbar
  +- #main

au lieu de :

Code : Tout sélectionner

#content
  +- #main
  +- #sidebar
  +- #siderightbar

DOM inspector est génial pour observer la construction d'un site

[ottomar]

arff...c'est ce que je viens de faire, marche po !!!

[ottomar]

progrès: dans le body, j'ai passé le code du "main" entre celui de "sidebar" et celui de sidebarright"
la gauche est remontée à sa place, pas la droite

merci pour l'idée
http://ottomar.blogspot.com/

[ottomar]

résolu !

dans le body, le code doit être dans cet ordre

sidebar
sidebarright
main
donc le menu gauche, le menu droit, et le milieu

merci pour le coup de main

[calimo]

Oui, c'est exactement ce que je disais. Un float passe à-côté de ce qui vient après, donc tu dois mettre ton contenu après

[ottomar]

tu sais, Calimo, moi, le dimanche soir...

[gcyrillus]

une autre solution pour centrer le centre ! (lol) entre les menus quelque soit la largeur de la page (le centre occupera tout le centre !)

menu droite: float: right;
menu gauche: float:left;
et centre
margin-right:la largeur du menu de droite(minimum);
margin-left:la largeur du menu de gauche(minimum);

ajouter les pixel necessaire pour compenser les ecart de IE
et pour glisser un pied de page en dessous de tout ça sans le voir sauter dans tout les sens,
clear:both;

neanmoins la lecture de ces postes m'ont été benefique
voilou

[calimo]

Petit bémol toutefois, le problème avec les float c'est qu'il faut mettre le menu avant le contenu. C'est embêtant pour les navigateurs textes, plages braille et lecteurs d'écran, surtout si les menus sont long, qui doivent se farcir le menu sur chaque page avant de pouvoir passer au contenu. Quand il faut commencer par faire 10 fois "Page Down" dans Lynx avant de pouvoir commencer à lire le contenu, je peux t'assurer que ce n'est pas drôle, mais alors pas drôle du tout.

Il faut donc parallèlement mettre un lien d'évitement, soit comme mis en place sur le portail, soit visible comme on peut le voir parfois.

Plus d'infos : http://www.la-grange.net/accessibilite/day_10.html
(ne regardez pas la solution proposée, ça date quand-même d'il y a 3 ans et c'est totalement dépassé et déplacé, mais le problème reste bien expliqué et correctement mis en évidence).