[Résolu] Problème Div et Table

WRInaute accro
Bonjour,

J'explique un peu le problème. Voici le code :

Code:
<img width=300 height=250 align=left valign=top src="">Truc truc<br>
<div style="width:100%;"><table width=100%>
<tr valign=middle>
<td background="pointille.gif"></td>
</tr>
</table></div>

Et en gros ca donne ca, sur les différentes plateformes :

:arrow: IE 7

testieuc8.gif


:arrow: Firefox

firefoxgg3.gif


:arrow: Opera

operaoj6.gif


Comme vous pouvez le voir (normalement), sur opera, les pointillés débordent. En fait les 100% du tableau ne sont pas calculés sur la place qui reste mais déborde largement

Une tite idée ?

Rajout : le tout est dans un td, et le pointillé ne fait pas déborder le td mais affiche juste les pointillés en dehors du td... bref les pointillés sortent du tableau

ps : vous pouvez vous marrer en regardant le code :)
 
WRInaute discret
heu... Opera doit certainement pas trop aimer le table a 100% imbriqué dans un div à 100%.

est ce que tu aurais pas par hasrad une apparition de scroll horizontal ?

essaie de remplacer :

<div style="width:100%;"><table width=100%>

par

<div style="width:100%;overflow:hidden;"><table width=100%>

sinon je te conseillerais plutot de creer une class du genre :

.montextesouligne {
font-size:medium;
border-bottom:1px dotted #333
}

le #333 est a remplacer par la couleur de ton choix bien sur...

par contre vu que c'est ton td qui a l'air de deborder essaie de fixer une couleur de fond différente au div, a table et a td pour reperer ce qui depasse mais de ce que je sais c'est tres tres certainement, soir les conséquences d'une erreur située avant dans le code soit ça vient de ton 100% sur div et sur table;
 
WRInaute occasionnel
ps : vous pouvez vous marrer en regardant le code
Enorme le coup du tableau pour mettre une image :lol:

Un truc du style
Code:
<img style="float:left;" src="" />
<h2 style="border-bottom: 1px dotted #A9A9A9;width:100%;margin-left:300px;">Ton titre</h2>
Et bla bla bla, et bla bla bla

Evidemment, déporte les styles dans ta css...

EDIT : ça post vite ici
 
WRInaute accro
le pb c que l'image, c'est une pub et que donc quelquefois elle est là... et quelque fois, elle est pas là

Sinon j'ai testé ca :

Code:
<div style="width:100%;border-bottom:1px dotted #046496;">Truc machin</div>

Ca marche pas mal sauf que sous Firefox et Opera, le souligné passe sous la pub, et ressort... après... juste un petit point mais c pas beau

pour les pointillés c bon, par contre ca me laisse un problème sur ce genre de truc :

Code:
<div style=\"float:right;padding:4px;\"><SCRIPT LANGUAGE=\"JavaScript\">\n<!--\n OAS_AD('Middle');\n //-->\n </SCRIPT></div>
<div style=\"width:100%;\"><table cellspacing=0 cellpadding=0 width=100%><tr><td bgcolor=\"#FCAB0C\" width=3>&nbsp;&nbsp;&nbsp;</td><td bgcolor=\"#79A5BB\" width=98% class=\"titreNavGras\">&nbsp;Coucou</td></tr></table></div>

Et ca me met le div l'un par dessus l'autre sous Opera... y'a une solution ?

ps : oui oui on peut continuer à rigoler du code :)
 
WRInaute occasionnel
Regarde mon code, j'ai mis un margin-left justement pour éviter que les pointillés passent sous l'image ;).
 
WRInaute accro
Morph1er a dit:
Regarde mon code, j'ai mis un margin-left justement pour éviter que les pointillés passent sous l'image ;).

le pb c que parfois y'a pas de pub... donc le margin-left risque de faire un gros trou quand y'a pas la pub :)
 
WRInaute discret
Re: Problème Div et Table

finstreet a dit:
Code:
<img width=300 height=250 align=left valign=top src="">Truc truc<br>
<div style="width:100%;"><table width=100%>
<tr valign=middle>
<td background="pointille.gif"></td>
</tr>
</table></div>
si tu utilises des classes css ( float:left; clear:both etc... ) tu peux tres bien gerer le fait que l'image soit la ou pas la.
je suppose que la pub est affichée via PHP ?

alors tu cree qq classes

Code:
.monimageflottanteagauche {
float:left;
margin-right:5px;
}
.montitreacotedemonimageflottanteagauche{
font-size:medium;
border-bottom:1px dotted #333;
margin-top:0;
}
.monseparateurquicorrigeleflottant {
clear:both;
}
.monconteneur { // heu les valeurs indiquées sont juste des exemples si tu veux tu peux les modifier, on sait jamais si ça trouve elles ne vont pas coller comme il faut :lol: 
width:155000px;
height:897000px;
// etc...
}

**************************

soit :

Code:
<div class="monconteneur">
<img class="monimageflottanteagauche" src="...." width="300" height="250" alt="" longdesc="" />
<h2 class="montitreacotedemonimageflottanteagauche">Mon titre</h2>
<p>Mon contenu, formulaire etc</p>
<div class="monseparateurquicorrigeleflottant">&nbsp;</div>
</div>


il ne s'agit que d'une source d'inspiration bien sur, je n'aime pas refiler de la viande déjà machée à mes invités ( lol ). Plus sérieusement, te donner le code qu'il faut c'est pas évident car ça dépend du contexte du code mais en gros là tu a peu près ce qu'il te faut.
 
WRInaute accro
Fais une feuille de style avec un reset détaillé (pas seulement margin* padding*, mais aussi notamment les td)
 
WRInaute discret
Peut-être un truc du genre :

<div><img src='' style='float:left;'><div style='margin:width de ton image'>Ici se trouve ton texte</div></div>

Pour contrer le fait que la pub soit là ou non tu fais un code php testant l'existant du fichier pub ou non. S'il n'existe pas alors le margin du <div> contenant ton texte est à 0 et la balise img n'existe pas.

Je ne sais pas si ma solution peut convenir à tes besoins...
 
WRInaute accro
Je vais un peu fouiller en testant vos solutions

Sinon non, je ne peux pas tester avant savoir si la pub sera là ou pas là malheureusement.
 
WRInaute occasionnel
Quel est le but si il n y a pas d'image ??

Il faut que le texte reste au même en droit avec un truc vide à la palce de la pub ??
 
WRInaute accro
fra_arf a dit:
Quel est le but si il n y a pas d'image ??

Il faut que le texte reste au même en droit avec un truc vide à la palce de la pub ??

ben non le texte est décalé et se calle sur la droite

En fait mes pubs sont gérées par 24/7 et donc je ne peux pas savoir à l'avance si il y aura une pub ou non... donc si la pub disparait, j'ai pas envie d'avoir un gros placard blanc...
 
WRInaute discret
finstreet a dit:
fra_arf a dit:
Quel est le but si il n y a pas d'image ??

Il faut que le texte reste au même en droit avec un truc vide à la palce de la pub ??

ben non le texte est décalé et se calle sur la droite

En fait mes pubs sont gérées par 24/7 et donc je ne peux pas savoir à l'avance si il y aura une pub ou non... donc si la pub disparait, j'ai pas envie d'avoir un gros placard blanc...

c'est pour ça que " ma " solution prevoit à la fois la presence et l'absence d'une pub.
 
WRInaute accro
etrusco a dit:
c'est pour ça que " ma " solution prevoit à la fois la presence et l'absence d'une pub.

oui mais ca ne marche qu'enpartie... la pub passe bien par dessus les pointillés... très bien

mais le soucis c'est que à ce même niveau, je peux aussi coller un tableau classique ... et là avec un table, ca fout tout en l'air (sur Opera toujours)
 
WRInaute accro
Bon alors tout le monde s'en moque surement mais ca y est ! j'ai trouvé :)

Alors attention c à mourir de rire mais ca marche

Code:
<div style="width:100%;">
<table>
<tr>
<td background="images/point.gif" width=100%></td>
<td></td>
</tr>
</table>
</div>

Alors en gros il faut pas mettre de 100% sur la table mais sur un TD... et ca ne marche que si il y a 2 TD

Et la meme astuce fonctionne quand on veut mettre un tableau plus classique.

:)
 
Discussions similaires
Haut