[Résolu] Positionner un div en width=100% dans un tableau

Bonjour,

mon problème est le suivant :

J'ai un tableau qui est dans une <div> configurer en position fixe de largeur égale à 98% de la fenêtre. A l’intérieur de ce tableau en 3 colonnes, j'ai une <div> dans la 2ème colonne. J'aurais souhaités que la <div> prenne toute la largeur que prends la colonne, sauf que lorsque je configure cette <div> sur 100%, elle dépasse de l'écran

Voici mon code:

HTML :

<div id="cacherbo1" style="display:none;">
<center>
\*Tableau Englobe*/
<table width="98%">
<tr>
<td>
\*Premier tableau*/
<table width="100%">
<tr>
<td>
Intérieur du tableau
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
\*Deuxième tableau*/
<table width="100%">
<tr>
<td width="7">
</td>
<td>
<div id="menuder" class="menuder">
\*Tableau Problème*/
<table><tr>
<td>
Intérieur du tableau qui dépasse de l'écran</td>
</tr>
</table>
</div>
</td>
<td width="7">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

Alors, j'utilise énormément les tableaux, donc je suis désolé si ça horripile certains spécialistes.

Voici le CSS :

#cacherbo1{
position: fixed;
height: 163px;
width: 100%;
bottom: 0px;
left:0px;
z-index: 110;
}

#menuder, .menuder{
width:100%;
overflow:auto;
height: 109px;
z-index: 120;
margin-left:10px;
}

Avec ce code donc, le "Tableau Englobe" dépasse de l'écran, le problème provient de la <div id="menuder" class="menuder">, si je met une largeur fixe comme 900px, alors le tableau ne dépasse plus.

J'aurais aimé que la <div id="menuder" class="menuder"> prenne toute la place que lui offre sa colonne dans "Tableau Problème" afin de s'adapter à la taille des écrans ou de la fenêtre.

J'avoue que là je ne comprends pas pourquoi ça ne veut pas fonctionner, quelqu'un pourrait-il m'aider?
Modifié par Nheavy (25 May 2011 - 00:10)

Personne n'a de soltutions ?

Je ne sais pas si c'est un soucis de HTML (une <div> ne peut pas avoir une taille définie vis à vis d'un <table>) ou si c'est un soucis de CSS.

Si on pouvait déjà me dire duquel des deux vient mon problème, je pourais peut-être comprendre l'erreur.

Je vous remercie d'avance pour toutes les réponses que vous m'apporterez .

Bonjour,

On pourrait voir une page en ligne? Ce serait plus simple pour analyser ton code et éventuellement tester des solutions.

Là comme ça, vu que tu as pris le parti de t'embarquer dans une structure bien casse-gueule en tableaux imbriqués, je n'ai pas grand chose à dire à part lis le chapitre de la spec CSS 2.1 sur les tableaux, et notamment la partie sur les algorithmes de calcul des largeurs. Attention, c'est sportif (et en anglais).

Tu gagneras peut-être à passer en fixed table layout, voire à laisser tomber les tableaux pour ta mise en page. (Et les éléments CENTER dans la foulée, histoire de passer définitivement au 21e siècle. )

^^ je veux bien passer au 21 ème siècle, mais je fais avec ce que je maîtrise avant tout.

D'ailleurs, j'ai pas bien compris, mais je n'arrive pas à centrer mes <div> avec margin-left:auto; enfin là n'est pas le problème, c'est une incompréhension parmi tant d'autres.

Pour le site, voila le lien:

http://www.funeralforamanga.com

Tu clique sur "Choix animés" en bas à gauche de ta fenêtre de navigateur, et là ça t'ouvre le code que j'ai donné; sauf que là j'ai mis <div id="menuder" class="menuder"> en width:900px; pour que les internautes puissent se servir de l'outil.

Voila ce que ça donne en width:100%; :

http://s4.e-monsite.com/2011/05/24/07/prob.jpg

Sur cette image, le contenu de la <div id="menuder" class="menuder"> sort de l'écran.

Un cours de développement web en anglais ... ça ne va pas être facile.

Je te remercie d'avoir pris le temps de me répondre
Modifié par Nheavy (24 May 2011 - 19:36)

J'ai regarder le site que tu m'a donné, je ne connaissais pas ces propriétés pour les tableaux.

Si j'ai bien compris fixed sert à définir les largeurs de colonnes dans le CSS ou à ce qu'elles aient toutes la même largeur (si pas de width définit) alors que auto sert à ce que chaque colonne s'adapte à son contenu.

Hors moi, j'ai un tableau en 3 colonnes avec un width en % relatif à son contenant, la colonne de droite et celle de gauche valent 7px. Donc, la colonne restante au milieu, doit prendre la place qu'il reste automatiquement sans utiliser de layout.

Ce qui ne marche pas, la colonne devient plus grande que la fenêtre et dégomme les colonnes qui l'entourent (elles disparaissent au profit de celle du centre).

Sur cette page, il ait dit d'utiliser la propriété table layout pour éviter que le navigateur calcul la place que prendra le tableau.

C'est aussi marqué d'éviter les tableaux imbriqués ^^.

En tout cas le table layout sert à faciliter l’interprétation au navigateur mais ça ne changera rien au niveau de mon problème à priori.
Modifié par Nheavy (24 May 2011 - 22:33)

Bingo!

J'ai réagit à ta remarque sur les tableaux imbriqués, et j'ai réussi à obtenir ce que je souhaité !

Mon code est maintenant comme ceci:

HTML :

<div id="cacherbo1" style="display:none;">
<center>
\*Partie Haute*/
<table cellpadding="0" cellspacing="0" width="98%">
<tr class="bo">
<td class="bocoin" width="14">
Intérieur du tableau
</td>
</tr>
</table>
\*Partie Basse*/
<div id="sousme">
<div id="bomanD"></div>
<div id="bomanG"></div>
<div id="bomanM">
<div id="menuder" class="menuder">
<table>
<tr>
<td>
Intérieur du tableau
</td>
</tr>
</table>
</div>
</div>
</div>
</center>
</div>

Et comme CSS:

#cacherbo1{
position: fixed;
height: 163px;
width: 100%;
bottom: 0px;
left:0px;
z-index: 110;
}


#sousme {
    width:98%;
    height:127px;
z-index: 115;
}


#bomanD {
    background-image:url(http://s4.e-monsite.com/2011/05/23/11/DERD.png);
    background-repeat:no-repeat;
    width:7px;
    height:127px;
z-index: 116;
float:right;
}


#bomanG {
    background-image:url(http://s4.e-monsite.com/2011/05/23/11/DERG.png);
    background-repeat:no-repeat;
    width:7px;
    height:127px;
z-index: 116;
float:left;
}


 #bomanM {
    background-image:url(http://s4.e-monsite.com/2011/05/23/12/DERM.png);
    background-repeat:repeat-x;
    height:127px;
z-index: 116;
margin-left:7px;
margin-right:7px;
}


#menuder, .menuder{
overflow:auto;
width:98%;
height: 109px;
margin-left:auto;
margin-right:auto;
padding-top:10px;
z-index: 120;
}


#menuder, .menuder{
overflow:auto;
width:98%;
height: 109px;
margin-left:auto;
margin-right:auto;
padding-top:10px;
z-index: 120;
}

Et voila. Je te remercie vivement, parce que sans toi, j'aurais pas tenter si tôt une autre solution que les tableaux imbriqués, et sans doute que je n'aurais pas trouvé de solutions à mon problème.

Toujours suivre les conseils des experts

Merci Beaucoup à Alsacréation, pour l'alternative aux tableaux, j'ai regarder vos modèles de mise en page (avec 3 <div> alignées) et c'est très bien expliqué.

Encore merci fvsch et bonne continuation !