[Résolu] Problème Div et Table

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par finstreet, 5 Juin 2007.

  1. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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

    [​IMG]

    :arrow: Firefox

    [​IMG]

    :arrow: Opera

    [​IMG]

    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 :)
     
  2. etrusco
    etrusco WRInaute discret
    Inscrit:
    31 Décembre 2004
    Messages:
    204
    J'aime reçus:
    0
    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;
     
  3. frenchhorn
    frenchhorn WRInaute passionné
    Inscrit:
    8 Février 2007
    Messages:
    1 136
    J'aime reçus:
    3
    utilise les feuilees de styles t(auras moins de problemes (.CSS)
     
  4. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 677
    J'aime reçus:
    0
    les tableaux pour de la mise en forme simple =>[]
     
  5. Morph1er
    Morph1er WRInaute occasionnel
    Inscrit:
    7 Juillet 2004
    Messages:
    280
    J'aime reçus:
    0
    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
     
  6. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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 :)
     
  7. Morph1er
    Morph1er WRInaute occasionnel
    Inscrit:
    7 Juillet 2004
    Messages:
    280
    J'aime reçus:
    0
    Regarde mon code, j'ai mis un margin-left justement pour éviter que les pointillés passent sous l'image ;).
     
  8. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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 :)
     
  9. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    n'hésite pas à me donner une solution surtout :)
     
  10. etrusco
    etrusco WRInaute discret
    Inscrit:
    31 Décembre 2004
    Messages:
    204
    J'aime reçus:
    0
    Re: Problème Div et Table

    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.
     
  11. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 728
    J'aime reçus:
    171
    Fais une feuille de style avec un reset détaillé (pas seulement margin* padding*, mais aussi notamment les td)
     
  12. etrusco
    etrusco WRInaute discret
    Inscrit:
    31 Décembre 2004
    Messages:
    204
    J'aime reçus:
    0
    un reset total et global :

    * {
    margin:0;
    padding:0;
    }
     
  13. lefou
    lefou WRInaute discret
    Inscrit:
    7 Juin 2005
    Messages:
    126
    J'aime reçus:
    0
    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...
     
  14. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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.
     
  15. fra_arf
    fra_arf WRInaute occasionnel
    Inscrit:
    22 Novembre 2005
    Messages:
    390
    J'aime reçus:
    0
    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 ??
     
  16. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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...
     
  17. etrusco
    etrusco WRInaute discret
    Inscrit:
    31 Décembre 2004
    Messages:
    204
    J'aime reçus:
    0
    c'est pour ça que " ma " solution prevoit à la fois la presence et l'absence d'une pub.
     
  18. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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)
     
  19. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 358
    J'aime reçus:
    2
    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.

    :)
     
Chargement...
Similar Threads - [Résolu] Problème Div Forum Date
probleme area="poly" et placement de div [RESOLU] Développement d'un site Web ou d'une appli mobile 8 Octobre 2009
[résolu]Problème affichage DIV sous Firefox Développement d'un site Web ou d'une appli mobile 15 Avril 2007
[RéSOLU] problème de <div> sous wordpress Développement d'un site Web ou d'une appli mobile 5 Mars 2007
Problème images en https (forum phpbb) [résolu] Développement d'un site Web ou d'une appli mobile 18 Novembre 2017
[RESOLU] probleme d'indexation des pages en httpS Crawl et indexation Google, sitemaps 20 Mars 2012
[Résolu] Problème d'importation de base MySQL en UTF8 chez 1&1 Administration d'un site Web 3 Juillet 2011
[Résolu] Problème pour gérer 2 campagnes AdWords 17 Novembre 2010
[RESOLU] Probleme d'erreur 302 non voulue Développement d'un site Web ou d'une appli mobile 30 Mai 2010
[Résolu] Problème de remonté de stats de campagne mails via GA Google Analytics 13 Mai 2010
[RESOLU]probleme lors de l'update des informations Développement d'un site Web ou d'une appli mobile 7 Avril 2010
[RESOLU] probleme de tri descendant de tableau ... Développement d'un site Web ou d'une appli mobile 4 Avril 2010
[résolu] Problème sur certains navigateurs ? Développement d'un site Web ou d'une appli mobile 16 Octobre 2009
[RESOLU] Problème avec PHPMAILER (apparition des headers dans le message) Développement d'un site Web ou d'une appli mobile 31 Juillet 2009
Problème URL Rewriting complexe avec les dossiers rééls et les autres chemins [Résolu] URL Rewriting et .htaccess 16 Juin 2009
[Résolu] Problème de onbeforeunload / frame Développement d'un site Web ou d'une appli mobile 12 Juin 2009
[Resolu]Probleme soumission boutique 1and1 Problèmes de référencement spécifiques à vos sites 25 Mai 2009
[résolu] problème de variables chez OVH Développement d'un site Web ou d'une appli mobile 21 Février 2009
[résolu] problème php chez OVH Développement d'un site Web ou d'une appli mobile 9 Février 2009
[RESOLU] Problème de redirection permanente URL Rewriting et .htaccess 18 Janvier 2009
Probleme de formulaire [Résolu] Développement d'un site Web ou d'une appli mobile 18 Janvier 2009