problème de flux avec infobulle

mailer · 2 Mars 2006

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>

Delapouite · 2 Mars 2006

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)

mailer · 2 Mars 2006

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