28173 sujets
jpv a écrit :
e sélecteur enfant adjacent permets, comme son nom l'indique, d'atteindre l'enfant adjacent d'un element, à la condition qu'ils aient un parent commun.
...
Ca fonctionne sur Gecko, Opera, Safari et... IE7, mais pas IE6 ... Ce qui le rends inexploitable actuellement.
a écrit :
On se demande à quoi ils pensent chez nanosoft....
<a href="ancre#x" >18<span>adress nom <img ..>...<br > rue </span></a>
a {
position:relative;
}
a span {
position:absolute;
height:0;
width:0;
overflow:hidden; /* je l'avais oublié */
z-index:-1/* opera */
}
a:hover span {
height:auto;
width:6em;
left:-2.5em;
top:1em;
/* + la mise en forme pour le span devenu une boite
par le positionneemnt absolu */
}
. a écrit :
Je vais faire moi même le test bien sur mais ce serait intéressant de savoir ce qui est visé par ce sélecteur. J'aurai tendance à dire intuitivement que c'est le <div> adjacent au <a>, mais comme dans ton exemple tu mets un display:block; que div a déjà par défaut je dois me tromper.
a écrit :
... on respecte le rôle de l'élément a et on donne la possibilité aux utilisateurs de lecteurs d'écrans d'atteindre les textes "cachés" à partir de la liste des liens de la page, ...
<address>
<a href="ancre33" title ="l'epi d'or">15
<span>l'epi d'or<br>
15 rue des blés<br>
75 001 paris
</span>
</a>
</adress>
<ul>
<li>
<address>
<a href="ancre33" title ="l'epi d'or">15</a>
<p>l'epi d'or<br>
15 rue des blés<br>
75 000 paris
</p>
</adress>
</li>
etc ...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<title>Untitled</title>
<style type="text/css">
a{
text-decoration:none;
}
img{
border:none;
}
#div1{
position:absolute;
top:0;
left:0;
width:300px;
height:300px;
background-color:#ff6600;
}
#liste{
margin:0;
padding:0;
}
#liste li{
list-style-type:none;
}
#h1{
margin-top:20px;
margin-left:20px;
}
#h2{
margin-top:0px;
margin-left:40px;
}
#h3{
margin-top:-20px;
margin-left:60px;
}
#h4{
margin-top:-10px;
margin-left:80px;
}
.hotel{
position:absolute;
width:100px;
height:40px;
margin-top:-1000px;
background-color:#ffffff;
font-size:0.8em;
}
.titre{
display:block;
border-bottom:2px solid #990033;
}
#liste li a:hover .hotel{
display:block;
margin-top:-5px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="div1">
la carte
<ul id="liste">
<li id="h1">
<a href="#hotel1"><img src="pastille.gif" width="10" height="10" alt="" />
<span class="hotel">
<span class="titre">Hotel machin</span> adresse
</span>
</a>
</li>
<li id="h2" >
<a href="#hotel2"><img src="pastille.gif" width="10" height="10" alt="" />
<span class="hotel">
<span class="titre">Hotel truc</span> adresse
</span>
</a>
</li>
<li id="h3" >
<a href="#hotel3"><img src="pastille.gif" width="10" height="10" alt="" />
<span class="hotel">
<span class="titre">Hotel bidule</span> adresse
</span>
</a>
</li>
<li id="h4" >
<a href="#hotel4"><img src="pastille.gif" width="10" height="10" alt="" />
<span class="hotel">
<span class="titre">Hotel trucmuche</span> adresse
</span>
</a>
</li>
</ul>
</div>
</body>
</html>
.
Ce div est draguable
(Marcel) Les contenus licencieux ne sont pas admis sur ce forum.
(Gertrude)