[Résolu] Problème Div et Table

[finstreet]

Bonjour,

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

Code: Tout sélectionner

<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 :

IE 7



Firefox



Opera



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

[etrusco]

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;

[frenchhorn]

utilise les feuilees de styles t(auras moins de problemes (.CSS)

[bproductiv]

les tableaux pour de la mise en forme simple =>[]

[Morph1er]

ps : vous pouvez vous marrer en regardant le code

Enorme le coup du tableau pour mettre une image

Un truc du style

Code: Tout sélectionner

<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

[finstreet]

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: Tout sélectionner

<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: Tout sélectionner

<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

[Morph1er]

Regarde mon code, j'ai mis un margin-left justement pour éviter que les pointillés passent sous l'image .

[finstreet]

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

[finstreet]

utilise les feuilees de styles t(auras moins de problemes (.CSS)

n'hésite pas à me donner une solution surtout

[etrusco]

Code: Tout sélectionner

<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: Tout sélectionner

.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: Tout sélectionner

<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.

[Marie-Aude]

Fais une feuille de style avec un reset détaillé (pas seulement margin* padding*, mais aussi notamment les td)

[etrusco]

Fais une feuille de style avec un reset détaillé (pas seulement margin* padding*, mais aussi notamment les td)

un reset total et global :

* {
margin:0;
padding:0;
}

[lefou]

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...

[finstreet]

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.

[fra_arf]

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 ??