[Résolu] 3 colonnes, largeur fluide / table {width: 100%} / IE 5.x

Bonjour,

J'ai un souci lorsque je met la propriété width: 100% à un tableau dans le contenu du gabarit "Largeur fluide, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer."

Le tableau vient alors se positionner sous les menus car il fait non pas 100% de la largeur du contenu, mais 100% de la largeur totale...

Merci pour vos réponses (et bonnes fêtes à tous)
Modifié par nicolas.charlot (29 Dec 2005 - 17:29)

C'est un problème assez urgent.

Aucune solution ?

Bonjour

Si le pb est limité à IE :

#conteneur_du_tableau {
height: 1%;
}

(ou n'importe quelle autre propriétés lui conférant le layout - voir http://test.blog-and-blues.org/haslayout/trad_temp.html. A mettre en commentaire condtionnel pour le réserver à IE Win - voir FAQ du forum)
Modifié par Laurent Denis (29 Dec 2005 - 16:20)

Bonjour,

nicolas.charlot a écrit :
C'est un problème assez urgent.

Oui et les participants à ce forum sont bénévoles et ne doivent rien à personne

Pour ton problème, un morceau plus conséquent de ton code aiderait.
A priori, tu dois avoir donné une largeur à l'élément directement parent de ton tableau afin que le 100% s'applique à cette largeur.

Les dimensions en pourcentage s'appliquent au dernier parent dimenssionné.
Par défaut, body est à 100%

<edit>Grilled...</edit>
Modifié par Olivier (29 Dec 2005 - 16:17)

Comme je le disais, j'utilise directement le gabarit "Largeur fluide, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer."

Dans le div "centre", j'ai un simple tableau dont la propriété width est mise à 100%.

#centre {
   background-color: white;
   margin-left: 150px;
   margin-right: 150px;
   padding: 0 10px 10px 10px;
}

#mon_tableau {
   width: 100%;
}

En rajoutant avant le width le fameux voice-family, ça ignore IE5.x, mais je voudrais que ça fonctionne aussi avec.

Le parent direct de #mon_tableau, c'est #centre, donc il faut dimenssionner #centre aussi.

Ton 100% se base ici sur le dernier élément dimenssioné, vraissemblablement le body.

Oui, mais la largeur de #centre c'est 100% - 300px ?

nicolas.charlot a écrit :
Oui, mais la largeur de #centre c'est 100% - 300px ?

Mets comme Laurent te disais, height: 1%; et ça va rouler.

Ca fonctionne.

Merci

nicolas_charlot : Je sais que c'est un peu déroutant, mais : la mesure exacte qui sera placée en valeur de width ou de heigth n'a pas d'importance.

Il s'agit juste d'activer dans IE Windows un mécanisme propre à ce navigateur (le haslayout). Or, c'est le fait que le conteneur ait une propriété height ou width qui va l'activer, pas la valeur précise du width ou du height. On pourrait aussi bien utiliser d'autres propriétés qui ont le même effet (un filtre propriétaire IE, un zoom propriétaire, une position absolue, un float, un content-editable...)

La seule contrainte est évidemment que cette valeur ne perturbe pas la mise en page. C'est pourquoi on préfère généralement utiliser height (avec la valeur 1px ou 1%) plutôt que width. IE va tenir compte de la valeur précise de width bien plus souvent que de la valeur précise de height (le pourquoi du comment est assez compliqué, et on va sauter les détails).

Maintenant: pourquoi faut-il activer ce layout du conteneur de ton tableau ? Parce que, pour IE, un élément parent doté de layout force ses descendants à "tenir" dans l'espace qu'il définit. Il ne leur permet plus de calculer leur largeur ou leur hauteur sans tenir compte de lui. Autrement-dit, ton tableau sera contraint à tenir dans le conteneur, qui tient entre les deux menus latéraux...

Si si, CSS est simple. CSS+le modèle de formatage propre à IE Win 5.x-6.0, en revanche... Même les ingénieurs Microsoft ont avoué que c'était une boîte noire pour eux
Modifié par Laurent Denis (29 Dec 2005 - 17:32)

Déroutant, c'est le terme

En tout cas, merci...