[XHTML/CSS]Débordement et marges

Version imprimable

Bonjour à tous...
Après une bonne heure de recherches infructeuses sur le sujet, je me permets de poster ici. Mon problème est simplissime il me semble, et pourtant je patauge dans la semoule:

J'ai besoin d'un conteneur pour plusieurs informations très sémantiquement liées. L'un des éléments est un tableau de résultats, qui doit impérativement prendre le maximum de largeur possible. Les normes en vigueur sont d'avoir des marges autour de mon bloc d'information, qui fassent 20 pixels à chaque bord. La structure, extrêmement simple est exprimée en version basique ici dessous.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <head> </head> <body> <div style="width:100%;margin: 20px"> quelques infos de base<br /> <table style="width: 100%;background-color: #f0f"> <tr> <td>Hello</td> </tr> </table> </div> </body> </html>
Le tableau dépasse de la fenêtre à droite de 20 pixels! En somme il calcule la largeur du tableau comme étant 100% de la fenêtre au lieu d'être 100% de la surface à disposition!
L'effet est identique sous les navigateurs courants.
Code:

1 2 3 4 5 6 7 effet escompté effet obtenu ------------------------ ------------------------ | | | | | XXXXXXXXXXXXXXXXXX | | XXXXXXXXXXXXXXXXXXXXXXX | | | | ------------------------ ------------------------
Sauriez-vous m'expliquer le pourquoi du comment de ce comportement, et le moyen de régler cela? (j'ai bien sûr tenté de mettre un padding plutôt qu'un margin, mais rien n'y fait)

Merci mille fois d'avance,

Greg

EDIT

J'ai supprimé le width: 100% dans le conteneur, qui n'est pas très utile. Résultat: Sous Firefox et Safari, le résultat est parfait, mais sous MSIE 6.0, toujours le même problème...

17/11/2005, 16h54
SpaceFrog

position relative ...
17/11/2005, 17h51
RB Greg

Merci pour ta réponse.
Alors j'ai placé un width=100% sur mon div, j'ai essayé toutes les variantes de position:relative (sur le div et sur le tableau).
Résultat: ça marche sur MSIE, très bien, mais plus du tout sur Firefox ou safari, ce qui m'embête au plus haut point.

Je n'ai aucun amour pour MSIE, et c'est pas prêt de s'améliorer ;-)

Si quelqu'un a une explicaition...
17/11/2005, 20h15
spirou

Salut !!

Pour moi IE à encore une fois tort, puisque tu mets 100% + marges de 20px soit 100% + 40px de large, donc normal que ce soit plus large que ta page.

Pour le padding, idem, il se rajoute à la largeur.
18/11/2005, 09h43
RB Greg

Je suis d'accord sur le fait qu'IE se comporte faussement. Pour le padding, il devrait être calculé à l'intérieur du premier div, puis le tableau devrait prendre 100% de la largeur restante.

ça me tue de ne pas arriver à faire un truc aussi simple quand même...

SI quelqu'un a une solution efficace sur tous les navigateurs, je serai vraiment très heureux... Ah, bien entendu, mon employeur interdit le Javascript, et la structure en tableau est à proscire dans cet environnemnt (la structure est passablement plus compliquée que l'exemple que je donne...)

J'ai trouvé une solution (à l'aide d'autres personnes, il est vrai!!)
COmme cette solution peut intéresser d'autres, je vous la mets ici. Ce n'est pas très élégant, mais ça marche (et sur tous les navigateurs)...

Il s'agit en fait de rajouter un DIV absolument inutile entre la table et le conteneur. Celui-ci va pour une raison qui m'échappe encore casser le tableau. J'imagine qu'il doit avoir un principe d'héritage un peu foireux...

Testé: MSIE 6.0, Firefox 1.0, Safari 2.0.2, Konqueror 3.3.2, Lynx (!) 2.8.5. Je suppose donc que c'est fiable :P
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <div style="margin: 20px; background-color:red; height: 100px;"> <div style="margin:0px; background-color:green; height: 50px;"> quelques infos de base<br /> <table style="width: 100%; background-color: #f0f;"> <tr> <td>Hello</td> </tr> </table> </div> </div> </body> </html>

Après étude de la solution de plus près, il semble que ce soit la hauteur de la div qui soit la solution!!!!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <div style="margin: 20px; background-color:red; height: 1px;"> <table style="width: 100%; background-color: #f0f;"> <tr> <td>Hello</td> </tr> </table> </div> </body> </html>
Ca fonctionne très bien comme ça dans IE/FFx/Opera. C'est à n'y rien comprendre :evil:

effectivement, je viens de me faire la même remarque...
mais, en améliorant encore, je me suis rendu compte que totu ce qu'il veut c'est la précision d'une dimension. un width à 100% pour le div inutile règle l'affaire également. (je me voyais mal avoir un height:1pxjuste pour le fun ;-))

et donc voici le code final qui fonctionne sur tous les navigateurs (et même opéra)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body style="margin:0px;padding:0px;"> <div style="margin: 20px; background-color:red;"> <div style="margin:0px; background-color:green; width: 100%;"> quelques infos de base<br /> <table style="width: 100%; background-color: #f0f;"> <tr> <td>Hello</td> </tr> </table> </div> </div> </body> </html>
Jamais je comprendrais MSIE!!! :twisted: :evil: :evil:

m'enfin...