Comprendre le bitcoin, l'intelligence artificielle, faire un site web... En 3 minutes en vidéo!

Menu CSS/HTML - images survolées défaillantes

Forum informatique > Aide création et gestion de site > Menu CSS/HTML - images survolées défaillantes

<<<1>>>

[Page 1 sur 1 - 1 message]
Informations Messages

mackrides

Avatar de mackrides
1 message
Neurone isolé
Neurone isolé

Lien direct Le 04 Février 2011 à 18h34

Bonjour,
J'ai commencé la création de mon propre site via Notepad, je me suis déjà collé la partie design sur Photoshop, et à présent je débute le codage... Mais voilà, à peine je commence et se présente à moi un problème dans mon menu. Je m'explique: j'ai dans l'esprit un menu simple, composé d'images (quatre, en fait, pour mes quatre parties), et aussi à base d'images survolées qui s'affichent quand on passe la souris dessus. Donc, huit images. Celui-ci doit tenir à l'horizontal. Inspiré de l'excellent tuto' du [/sites/details/siteduzero.com Site du Zéro], je me suis procuré un codage CSS/HTML où j'ai simplement modifié le texte du menu que j'ai donc remplacé par les images... Mais un *hic* à l'apperçu : le menu est niquel pour ce qui est des images fixes, mais dès lors que je passe la souris sur un onglet, l'image survolée ne s'affiche que partiellement, et un cran en dessous de l'image fixe en question (au départ, elle était relativement décalée, ne laissant apparaitre que le haut de l'image... en bas. J'ai pu légèrement modifié ça en touchant au css a:hover où j'ai rajouté no-repeat 0 -95). J'ai déjà essayé d'augmenter la valeur à côté de no-repeat mais ça ne fait que décaler d'avantage l'image survolée... Pour le codage, ça donne ça:

Code

<!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" >
<head>
<title>Menu du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

ul#navigation li {
display:inline ;
margin:0
padding:0
}

ul#navigation {
list-style-type:none;
}

.un a:hover {
background: url(C:/Users/MAIRE/Pictures/ongletaccueilsurvolé.png) no-repeat 0 -95px ;

}

.deux a:hover {
background: url(C:/Users/MAIRE/Pictures/ongletcommunautésurvolé.png) no-repeat 0 -95px ;

}

.trois a:hover {
background: url(C:/Users/MAIRE/Pictures/ongletjeuxsurvolé.png) no-repeat 0 -95px ;

}

.quatre a:hover {
background: url(C:/Users/MAIRE/Pictures/ongletforumssurvolé.png) no-repeat 0 -95px ;

}





</style>


</head>
<body>

<ul id="navigation">
<li class="un"><a href="#" ><img src="C:/Users/MAIRE/Pictures/ongletaccueil.png" alt="Accueil" /></a></li><li class="deux"><a href="#" ><img src="C:/Users/MAIRE/Pictures/ongletcommunauté.png" alt="Communauté" /></a></li><li class="trois"><a href="#" ><img src="C:/Users/MAIRE/Pictures/ongletjeux.png" alt="Jeux" /></a></li><li class="quatre"><a href="#" ><img src="C:/Users/MAIRE/Pictures/ongletforums.png" alt="Forums" /></a></li>

</ul>

</body>
</html>



Vous aurez remarquez que j'ai placé tous les <li> sur la même ligne afin d'évirer l'espace entre chaque onglet. Je débute, et je ne suis par conséquent pas un pro du codage, donc je suis ouvert à toute remarque pertinenteClin d'oeil Je vous remercie par avance de l'aide que vous allez m'offrir, et vous dit donc à bientôtSourire

 

Publicité

<<<1>>>

[Page 1 sur 1 - 1 message]

Forum informatique > Aide création et gestion de site > Menu CSS/HTML - images survolées défaillantes