28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bloc flottant ne prend pas toute sa largeur

Bonsoir,

Je suis parti d'un "kit" pour réaliser un thème pour Dotclear, avec trois colonnes réalisées avec trois blocs flottants. Il doit normalement y avoir 5% de marge à droite et à gauche, puis une colonne prenant 15% de large de chaque côté, et au centre un bloc prenant les 60% restants (5+15+60+15+5=100%, ouf !).

Mais assez étrangement, le bloc central ne prend pas les 60% indiqués dans la feuille de style, mais apparemment seulement 55%. Voici le site en question (je fais les modifications "en direct" sur le site) : http://nicopensource.free.fr/ et la feuille de style : layout.css (+ la partie style) dont voici l'essentiel :
/* centrage */
body { text-align : center; }
#page { margin : 0 auto; text-align : left; }

/* mise en page */
#page { width: 100%; }
#wrapper { margin : 0 5%; }
#main { width : 60%; margin : 0 0 0 20%; float : left; display:inline; }
#blognav, #blogextra { margin : 0; padding : 0 6px; display:inline; }
#blognav { width : 15%; float: left; margin-left: -80%; overflow:hidden; }
#blogextra { width : 15%; float:right; overflow:hidden; }


La structure de la page :
#page
  |- #wrapper
    |- #main (colonne centrale)
    |- #blognav (colonne de gauche)
    |- #blogextra (colonne de droite)


Pour s'y repérer, le fond clair remplit tout #main et les bordures intérieures des colonnes sont marquées par les bordures dégradées (côté "net").

Je constate ça tant avec Firefox qu'Opera (je n'ai pas d'IE sous la main). Quelqu'un verrait-il ce qui cloche ?

Merci.
Modifié par nico@nc (20 Apr 2009 - 23:17)
Je renonce pour le moment à "coller" mes colonnes en mettant mes bordures dégradées sur la colonne centrale, mais si quelqu'un a une idée je reste preneur.
Sous IE6 IE7 et IE8 c'est disons corecte, mais pour le left trop au ras du left !!

A mon avis c'est le Smiley eek margin-left: -80%;
Ah zut, ça part en effet dans le décor tout ça... Smiley ohwell

Il n'y a pas de problème avec la version de démonstration (enfin on dirait que si mais c'est à cause du margin-left: -82% corrigé en margin-left: -80% dans la version téléchargeable). Je vais essayer de voir ce qui cloche (ce n'est pas simple n'ayant que IE NetRenderer pour voir ce que ça donne) et de comprendre comment s'organise le tout (je suis un peu perdu dans ces pourcentages).

édité... c'est la marge agrandie à droite et gauche du #wrapper qui casse tout...
Modifié par nico@nc (10 Apr 2009 - 21:12)
C'est réglé pour IE, mais j'en reviens à mon problème de départ : il y a un petit espace entre la colonne de droite et celle du milieu, ce qui fait qu'à gauche il n'y a plus le pourcentage prévu.

Je cherche actuellement à avoir ça :
marge | colonne |  colonne  | colonne | marge
  3%  |   16%   |    62%    |   16%   |  3%


et voilà où j'en suis côté CSS (version allégée en matières grasses) :
/* centrage */
body { text-align: center; }
#page { margin: 0 auto; text-align: left; }

/* mise en page */
#page { width: 100%; }
#wrapper {	margin: 0 0px; }
#main { width: 60%; margin: 0 0 0 19%; float: left; display: inline; } /* col centrale */
#content { margin: 0; padding: 14px 34px; }
#blognav, #blogextra { margin: 0; padding: 0 6px; display: inline; }
#blognav { width: 16%; float: left; margin-left: -77%; overflow: hidden; } /* col gauche */
#blogextra { width: 16%; margin-right: 3%; float: right; overflow: visible; } /* col droite */
Bonjour,

1. 60% de 90%, ça ne fait pas 60%. Smiley cligne

2. Faire des calculs savants avec des pourcentages, c'est le meilleur moyen de n'arriver à rien. Ne serait-ce qu'à cause de l'incertitude des arrondis au pixel dans les navigateurs (l'un arrondit au pixel inférieur, un autre au pixel supérieur, et paf pour un des deux ça ne tient plus ou bien il y a un vide d'un pixel...).

3. Hop: http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html

4. Re-hop: http://www.alsacreations.com/static/gabarits/liste.html (gabarits 9, 10 et 11)

Bonne continuation. Smiley smile
Magnifique ! Je n'avais pas cherché à revoir complètement la structure des colonnes (qui a parlé de fainéantise ? Smiley rolleyes ), mais les gabarits proposés sont en effet très bien, merci !

Je suis donc arrivé à ceci : http://nicopensource.free.fr/newtest/test.html mais j'ai un petit soucis vers le bas de la page (avec Firefox 3.1b3 et Opera 9.63) : le body s'arrête à une quinzaine de pixels du bas de la fenêtre, et j'ai ce même espacement en bas du contener des 3 colonnes, juste avant le footer. J'ai pourtant mis une marge et un padding de 0 pour tous ces blocs et éléments, et je n'arrive pas à trouver d'où vient cet espace avec l'inspecteur DOM de Firefox. Smiley ohwell
Ah on dirait bien, peut-être. Smiley lol

Me voilà donc avec 2 marque-pages en plus, et un sujet résolu. Merci à vous trois. Smiley biggrin
Sujet clos
Aller à