28173 sujets

CSS et mise en forme, CSS3

Salut,

Dans la page d'exemple suivante : http://philoulaloutre.free.fr/test.html, sous Firefox, le tableau n'est pas collé au bandeau vertical vert clair. Ce problème n'apparaît ni sous IE7, ni sous Opera (9.02) ni sous Safari (2.0.4).
En gros, tout ce qui est à droite du bandeau vert a la même marge gauche (12%). Les deux div non floatées appliquent bien la marge à partir du body (la marge passe "en dessous" du float), mais le tableau pas du tout (sa marge "commence" à droite du float).

1) c'est bien un bug, non ?
2) si oui, quelqu'un connaitrait-il des contournements possibles ?

merci Smiley smile
Salut,

Etrange en effet...
As tu essayé de mettre tes divs et ton tableau dans un conteneur auquel tu appliquerait la marge de 12%, et en supprimant celles des divs et du tableau ?
kofkof a écrit :
1) c'est bien un bug, non ?

Il semblerait que oui.
Par ailleurs, dans Konqueror 3.5 la marge passe bien sous le flottant, mais elle est différente dans le cas du tableau (comme si on avait une marge de 10.5%...).

kofkof a écrit :
2) si oui, quelqu'un connaitrait-il des contournements possibles ?

Construire sa mise en page autrement pour éviter ce cas de figure.
Visiblement FF applique une marge de 12% en plus de la marge de 10%, étrange...
Sous FF j'ai vaguement corrigé le problème comme ceci :
table {
margin-left: 2% !important;
}


J'ai un léger décallage genre 1px quand je maximise la fenêtre (réso : 1280x1024).

J'ai pas testé le bout de code avec autre chose que FF par contre...
Modifié par Faelar (01 May 2007 - 16:29)
Faelar a écrit :
J'ai pas testé le bout de code avec autre chose que FF par contre...

Ça risque d'être problématique avec tous les autres navigateurs qui comprennent le !important, entre autres : Internet Explorer 7, Safari, Opera, Konqueror... Smiley biggol

Comme dit plus haut, la solution est de concevoir autrement ta mise en page.

Grouper tous les éléments qui doivent être alignés dans un même bloc (div) et n'appliquer la marge qu'à ce bloc, comme suggéré par Mikachu, ne serait pas du luxe.
Mikachu a écrit :
mettre tes divs et ton tableau dans un conteneur auquel tu appliquerait la marge de 12%

C'est justement en voulant éviter ça (des div requises uniquement par les CSS) que je me suis retrouvé devant ce bug Smiley smile . Mais bon, apparemment il va falloir à nouveau en revenir à une variante du bon vieux :
<body>
	<div id="header">
	</div>

	<div id="main">
	</div>

	<div id="footer">
	</div>
</body>
C'est juste un peu dommage...
Modifié par kofkof (02 May 2007 - 10:23)
kofkof a écrit :
C'est justement en voulant éviter ça (des div requises uniquement par les CSS) que je me suis retrouvé devant ce bug

On va faire le vieux sage et citer la spécification HTML 4.01 :
a écrit :
Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour exploiter HTML selon leurs besoins et leurs goûts propres.

(C'est moi qui graisse, et la source est ici : http://www.la-grange.net/w3c/html4.01/struct/global.html#edef-DIV )

Faut pas se mettre martel en tête pour rien. Smiley rolleyes
kofkof a écrit :
C'est juste un peu dommage...

À part pour la satisfaction personnelle quelque peu mal placée de faire une mise en page «sans élément superflu», à quoi cela servirait-il ? Quel serait l'avantage concret ?
Florent V. a écrit :
satisfaction personnelle quelque peu mal placée
Pourquoi prendre ce ton ? Il ne me semble pas avoir été incorrect avec toi. C'est vraiment attristant de voir certaines personnes sur les forums (et à plus forte raison les modos) se comporter comme d'autres en voiture... Derrière l'écran, plus de courtoisie.

Pour finir, car les discussions sur ce ton ne sont pas vraiment ma tasse de thé, il s'agissait effectivement d'un test tout à fait personnel. Avec mes excuses pour vous avoir dérangé avec ça.
Modifié par kofkof (02 May 2007 - 11:00)
Mes excuses si le ton que j'ai employé te semble agressif. Ça n'était pas mon attention.

Mais je persiste et signe :
a écrit :
satisfaction personnelle

C'est généralement ce qu'on recherche en faisant de tels essais, non ? On se fixe arbitrairement une contrainte (ne pas utiliser de div pour la mise en page), et on tente d'atteindre un objectif (réussir la mise en page malgré tout).

a écrit :
mal placée

Le terme est peut-être mal choisi. Il faut comprendre : peu pertinente. Le fait de se passer des div n'est pas un objectif vers lequel tendre, aussi bien en production que dans un cadre «idéal». Comme je le signalais en citant la spécification HTML 4.01, l'utilisation des div comme support de mise en page n'est pas un procédé artificiel qui détournerait un élément de son usage normé (comme dans le cas des tableaux de mise en page).