<Div> et width

<Div> et width - HTML/CSS - Programmation

Marsh Posté le 28-03-2003 à 21:55:41    

J'essaie de faire un <DIV> dans un tableau afin d'avoir des barres de scrolling. Je voudrais que le div prenne la largeur de la cellule dans lequel il est sachant que cette largeur de cellule n'est pas fixe.
Quand je mets au niveau du style "width:100%", le DIV réagit correctement sur NS6.2 (il prend la largeur de la cellule) mais sous IE5 il réagit complètement différemment puisqu'il essaie de s'adapter à ce qu'il y a dans le DIV. Ainsi, si le DIV est très large il va élargir la largeur de la cellule du tableau, ce que je ne veux surtout pas.
Du coup, j'ai été obligé de préciser une taille fixe pour la largeur du DIV mais c'est vraiment nul. Avez-vous une solution à ce problème ?
Peut-être cela fonctionne t'il correctement sous IE6 ?
 
Merci de votre aide.

Reply

Marsh Posté le 28-03-2003 à 21:55:41   

Reply

Marsh Posté le 28-03-2003 à 22:09:27    

Un <DIV> dans un tableau ? Euh... l'inverse je veux bien, mais un element de type bloc à l'intérieur d'un élément en ligne, c'est moyen.

Reply

Marsh Posté le 29-03-2003 à 00:48:11    

Ca dépend de ce que tu veux faire.  
 
En fait, j'ai déjà toute la page qui est formatée dans un tableau. Dans la zone principale qui est une cellule du tableau, il faut que je mette un div de sorte que j'affiche qqch qui est plus grand que le permet la cellule et qui sera visible avec les scrollbarre.
 
Tu vois le pb ?

Reply

Marsh Posté le 29-03-2003 à 10:02:07    

Janek a écrit :

Ca dépend de ce que tu veux faire.  
 
En fait, j'ai déjà toute la page qui est formatée dans un tableau. Dans la zone principale qui est une cellule du tableau, il faut que je mette un div de sorte que j'affiche qqch qui est plus grand que le permet la cellule et qui sera visible avec les scrollbarre.
 
Tu vois le pb ?


 
Fous un DIV en position:absolute en dehors du tableau.

Reply

Marsh Posté le 29-03-2003 à 10:09:50    

Le problème est que la dimension du DIV dépend de la taille de la cellule du tableau. Je m'explique.
 
Imagine un tableau 3x3 avec au centre la cellule ds laquelle apparait le texte principal du site qui dépend d'un click sur un menu.
La taille de cette cellule centrale dépend de la section du site ds laquelle on est (après avoir cliquer sur un item de menu) et de la taille de la fenêtre du navigateur.
Le DIV doit absolument se situer ds cette cellule et doit prendre la largeur de cette cellule sans quoi j'aurais des choses mal placées. Mon pb est que qd je mets un style="width: 100%" pour que le DIV s'adapte à la taille de la cellule, ça marche nickel de chez nickel sur NS6 mais sous IE le DIV prend une taille qui dépend du contenu du DIV (il y a aussi un tableau ds le DIV et ce tableau peut être d'une largeur supérieure à celle du DIV). Le résultat sous IE, c'est que le DIV étend la taille de la cellule ds laquelle il se situe pour s'adapter à son contenu ce qui fait tout foirer. Sous NS, c'est vraiment top.
La seule solution actuelle est de faire style="width:600px" ce qui est nul si on a un grand écran.
 
Ca fait qd même chié tous ces navigateurs qui réagissent différemment.

Reply

Marsh Posté le 29-03-2003 à 12:52:50    

axey a écrit :

Un <DIV> dans un tableau ? Euh... l'inverse je veux bien, mais un element de type bloc à l'intérieur d'un élément en ligne, c'est moyen.


Une cellule de tableau n'est pas un élément en-ligne. C'est un élément de type "cellule" et on a tout à fait le droit le droit de mettre un DIV dedans.
 
 
Janek, je ne vois pas bien pourquoi tu veux mettre un DIV dans ta cellule... On peut tout à fait appliquer les propriété d'overflow à un TD. Voir la FAQ à ce sujet.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 29-03-2003 à 19:41:33    

Ben merde. Je savais pas ça. Elle est où la FAQ ?  
Je met juste <TD overflow : auto> ????

Reply

Marsh Posté le 29-03-2003 à 19:48:37    

Reply

Marsh Posté le 29-03-2003 à 19:57:31    

Arf vi !!! C'était pas loin. Lolololol
 
Je lis et je vais testé tout ça.
 
Thx

Reply

Marsh Posté le 29-03-2003 à 22:51:50    

OK, j'ai lu. Le pb c'est que justement tous les exemples sont fait avec un overflow dans un DIV qui est ds un TD. C'est donc exactement comme moi.
Tous les exemples ont un div avec un div de taille fixe - genre width:400px -. Moi ce que je veux c'est un width:100% qui prend donc 100% de la largeur de la cellule.
 
Mince. Donc, toujours aucune solution à mon pb. D'autres idées ?

Reply

Marsh Posté le 29-03-2003 à 22:51:50   

Reply

Marsh Posté le 30-03-2003 à 11:47:52    

Mais je t'ai dit que tu n'avais pas besoin de DIV !
 

<td id="maCellule"> ... </td>


 
Puis, le style CSS :
 

td#maCellule {
  width: 400px;
  overflow: auto;
}


Message édité par gm_superstar le 30-03-2003 à 11:48:01

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 30-03-2003 à 19:07:22    

MAIS le pb c'est que je ne veux pas que la largeur de la cellule soit fixe. Dans ton exemple tu la fixe à 400px.
 
Imagine un tableau avec width="100%".
Dedans je mets une ligne.
Dans cette ligne, j'ai 3 cellules :
   - la première fait 50 pixels
   - la 3ème fait 100 pixels
   - la 2ème (celle du milieu) a donc une largeur qui dépend de la taille de la fenêtre du browser.
Dans la deuxième cellule je veux mettre des scrollbar comme tu me le suggère (je ne veux pas fixer la largeur à 400px ou quoi que ce soit d'autre). D'après ton code il faudrait :
 
<td id="maCellule"> ... </td>
 
et dans la feuille de style
 
td#maCellule {
  width: 100%;
  overflow: auto;
}
 
ou bien
 
td#maCellule {
  overflow: auto;
}
 
mais aucun des deux ne fonctionne sous IE.

Reply

Marsh Posté le 30-03-2003 à 21:12:50    

Bon mea culpa. On ne peut pas appliquer la propriété overflow à un <td>. C'est en effet réservé à un bloc, donc un DIV.
 
Je suis arrivé à faire ce que tu souhaites avec :
 


<td>
  <div id="maCellule">bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br></div>
</td>
 
div#maCellule {
  overflow: auto;
  height: 60px;
}


 
Testé avec IE 6 et Moz, ça marche.
 
Les cellules qui sont censées s'adapter à la taille de l'écran ne doivent jamais avoir de longueur déclarée.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 31-03-2003 à 09:57:05    

Alors maintenant c'est sûr, le problème vient de IE5.5. J'ai testé ton code sous IE5.5 et il réagit toujours mal car il agrandit la cellule dans laquelle se trouve le DIV car le DIV contient une TABLE qui est très grande (elle peut faire entre 1500 et 2000 px). Sous Mozilla et NS6.2, le code que j'avais marchait déjà ce qui est normal vu qu'il était quasiment équivalent au tien (j'avais juste mis dans le style du div width:100% afin que le div fasse 100% de la largeur de la cellule qui le contenait).
Du coup, dois-je imposer IE6 au moins d'après toi ? J'ai pas envie de mettre du code testant le navigateur dans le code de mon site. Je trouve que ce genre de code salope tout.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed