problème de flux avec infobulle

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par mailer, 2 Mars 2006.

  1. mailer
    mailer WRInaute discret
    Inscrit:
    26 Juin 2005
    Messages:
    155
    J'aime reçus:
    0
    bonjour;
    je me mets aux css, je comprends pas mal de choses maintenant mais je bute actuelement sur les infobulles.
    En effet si vous regardez ma page
    http://imotep.freezee.org
    vous verrez que j'ai un problème avec de flux, ou de position, car tout est en dehors de mon bloc (le trait vert correspond aux bordures ).

    j'aimerais bien savoir pourquoi j'ai ce problème .

    Merci de votre aide
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title></title>
    
    
    <style type="text/css">
    #galerie{width: 520px;  border: 1px solid green; margin-bottom:10px;}
    * .galerie{margin: 0; padding: 0; list-style: none; }
    
    
    .galerie li{display: block;
                                    width: 119px;
                                    height: 95px;
                                    float: left;
                                    margin: 1em 3em}
                                   
    .galerie li a.info{
        position:relative;
        z-index:24;
        color:#000;
            background-color:#83787C;
        text-decoration:none}
           
            .gallery li a.info img {
    margin: 0 auto;
    }
    
    .galerie li a.info:hover{z-index:25; background-color:#ff0}
    
    .galerie li a.info span{display: none}
    
    .galerie li a.info:hover span{
    /*le contenu de la balise span ne
    sera visible que pour l'état a:hover */
            display:block;
            position:absolute;
        top:-2em; left:0;
            width:11em;
        border:1px solid #6699cc;
        background:#eeeeee url("../photogenic/images/arrow.gif") no-repeat;
            color:#6699cc;
        text-align: justify;
        font-weight:none;
        padding:1px;
       
        }
    
    cl {width:100%; height:auto; clear:both; }
    </style>
    </head>
    
    
    
    <body>
    <div id="galerie">
            <ul class="galerie">
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li><li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>       </a>
            </li>
            <li><a href="#" class="info"> <img src="images/thumb.gif" alt="image thumbnail" /><span>Ici vous trouverez une infobulle concernant le cheval</span>    </a>
            </li>
            </ul>
            </div>
                   
    <div id="cl">&nbsp;</div> 
    </body>
    
    </html>
     
  2. Delapouite
    Delapouite WRInaute discret
    Inscrit:
    9 Janvier 2005
    Messages:
    156
    J'aime reçus:
    0
    Ca vient surement de ton div "cl" dont le role est de clearer les float (oui c'est du gaulois ;))

    Essaie en mettant :

    Code:
    <div id="cl">&nbsp;</div> 
    avant le dernier </div> (celui à la bordure verte)
     
  3. mailer
    mailer WRInaute discret
    Inscrit:
    26 Juin 2005
    Messages:
    155
    J'aime reçus:
    0
    Bonjour
    effectivement en atribuant une propriété clear, tout fonctionne bien!
    Par contre un problème persiste!
    Il s'agit de la position des infobulles, sous firefox, tout fonctionne super, sous IE6 la position est differente et est placé beaucoup plus haut!
    sous opéra, par contre, les infobulles reste ne disparaissent pas après le hover, elle reste toute static ensuite

    un exemple http://imotep.freezee.org/
    voir avec plusieurs navigateurs
     
Chargement...
Similar Threads - problème flux infobulle Forum Date
Probléme avec un flux rss Demandes d'avis et de conseils sur vos sites 4 Novembre 2019
Problème de flux RSS Développement d'un site Web ou d'une appli mobile 14 Octobre 2014
Gros problème avec le flux RSS de mon blog Problèmes de référencement spécifiques à vos sites 8 Mars 2012
Probleme d'affichage d'un flux rss sous IE7 Développement d'un site Web ou d'une appli mobile 28 Janvier 2011
Probleme fichiers xml et flux rss s'affichent bizarrement Développement d'un site Web ou d'une appli mobile 16 Janvier 2011
Problème flux RSS Développement d'un site Web ou d'une appli mobile 13 Septembre 2010
Création d'un flux RSS avec PHP, problème récurrent avec getElementById Développement d'un site Web ou d'une appli mobile 13 Juin 2010
Flux RSS probleme accent et traduction(buddypress) Développement d'un site Web ou d'une appli mobile 13 Juin 2010
Création d'un flux RSS (problème d'affichage) Développement d'un site Web ou d'une appli mobile 22 Février 2010
Problème doctype flux RSS Développement d'un site Web ou d'une appli mobile 24 Décembre 2009
Problème de fou avec parsage de flux xml traded*** et encodage utf8 en php Développement d'un site Web ou d'une appli mobile 16 Septembre 2009
Probleme flux RSS comment faire Débuter en référencement 17 Décembre 2008
[Résolu]Problèmes d'accent dans le Flux RSS Développement d'un site Web ou d'une appli mobile 29 Mai 2008
Intégration Flux RSS : problème de restitution Développement d'un site Web ou d'une appli mobile 2 Mai 2008
Problème pour afficher les flux RSS google actu Administration d'un site Web 20 Mars 2008
Probleme changement de flux rss et referencement Noms de domaine et référencement 26 Janvier 2008
Probleme flux rss Développement d'un site Web ou d'une appli mobile 27 Décembre 2007
Probleme de flux rss ? Développement d'un site Web ou d'une appli mobile 20 Septembre 2007
Problème de flux RSS2.0 valide mais pas compatible netvibes Développement d'un site Web ou d'une appli mobile 17 Août 2007
Probleme flux RRS et palte forme de blog Débuter en référencement 26 Juin 2007