[XHTML/CSS]Débordement et marges [Trucs & Astuces]

**RB Greg** · 17/11/2005, 15h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**SpaceFrog** · 17/11/2005, 16h54

position relative ...

**RB Greg** · 17/11/2005, 17h51

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...

**spirou** · 17/11/2005, 20h15

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.

**RB Greg** · 18/11/2005, 09h43

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...)

**RB Greg** · 18/11/2005, 10h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!-- DO NOT EDIT THIS FILE! IT WAS AUTOMATICALLY GENERATED FROM CDSware SOURCES. LOOK THERE FOR THE COPYRIGHT INFO. -->
<!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>

**denisC** · 18/11/2005, 11h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**RB Greg** · 18/11/2005, 12h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!!

m'enfin...

[XHTML/CSS]Débordement et marges [Trucs & Astuces]

CSS

Discussions similaires

Partager

Partager