[Résolu] Problème Div et Table

finstreet · 5 Juin 2007

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

:arrow: Firefox

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

u15391 · 5 Juin 2007

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 · 5 Juin 2007

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

bproductiv · 5 Juin 2007

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

Morph1er · 5 Juin 2007

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

finstreet · 5 Juin 2007

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

Morph1er · 5 Juin 2007

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

.

finstreet · 5 Juin 2007

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

finstreet · 5 Juin 2007

frenchhorn a dit:
utilise les feuilees de styles t(auras moins de problemes (.CSS)

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

u15391 · 5 Juin 2007

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.

Marie-Aude · 5 Juin 2007

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

u15391 · 5 Juin 2007

Marie-Aude a dit:
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 · 5 Juin 2007

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 · 5 Juin 2007

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 · 5 Juin 2007

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

finstreet · 5 Juin 2007

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

u15391 · 5 Juin 2007

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

Cliquez pour agrandir...

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.

finstreet · 5 Juin 2007

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)

finstreet · 5 Juin 2007

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.