28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde... D'habitude en CSS, je me débrouille, je trouve des feintes ou je fais des compromis, mais là...

Je fais un site, design extensible, jusque là rien de méchant. Mais pour ma messagerie privée, je présente les mp dans un tableau (message, auteur, date, lu ? ...) à 5 colonnes, et nombre de mp lignes.

Rien de méchant, où est le CSS là dedans me direz vous ?

Hé bien, c'est facile, le tableau doit faire 100% de largeur (pour convenir au div #corps) moins 20px à gauche et à droite.

Pour firefox impec, pour IE, il me fout mon tableau 100px plus bas dans la page -_-.

bout de CSS :
div.default
{
   width: 100%; /* 100% du corps */
   margin: 0px 20px 0px 20px; /* Moins les marges */
}

table.default
{
    width: 100%; /* 100% du div conteneur : default */
}



et bout de xHTML :
<div class="default"><table class="default">
<tr>
  <td>mon contenu</td>
  <td mon contenu 2</td>
</tr>
</table></div>


Petits screen :
Firefox :
http://img131.imageshack.us/img131/5454/017lk.png

Internet Explorer :
http://img92.imageshack.us/img92/7740/028me.png

Je précise que le div conteneur #default est nécessaire, même pour Firefox, afin qu'il exécute correctement les marges de 20px .... Smiley smile
Modifié par aeonor (11 Apr 2006 - 09:22)
Donc en gros :

1- Le div défaut donne 100% de la largeur du corps de page (si il n'a pas de margin ou padding) : mais 100% de combien ?
2- Le tableau prend 100% de largeur du div qui prend la largeur 100% du corps de page

Bref ça ressemble pas trop à ce que tu explique...

- rajouter un height : 0;
- tenter le padding plutôt que le margin (souvent ça revient au même pour un div vide comme le tient)
- Valign: top au pire
- Et puis surtout tu donnes le même nom de classe à deux trucs différents, à absolument ne jamais faire !
Merci, j'ai essayé tes méthodes, rien n'y faisait mais cela m'a donné l'idée de faire un height: 100% sur le div et ça a fonctionné (pour info, le height:0; j'avais tenté, mais Firefox le comprenant ainsi, réduisait tous mes div parents).

Merci pour l'intention Smiley cligne .