Sujet Précédent Sujet Suivant

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

Fermé
mackrides Messages postés 55 Date d'inscription samedi 29 août 2009 Statut Membre Dernière intervention 6 juillet 2011 - 4 févr. 2011 à 18:06
mackrides Messages postés 55 Date d'inscription samedi 29 août 2009 Statut Membre Dernière intervention 6 juillet 2011 - 6 févr. 2011 à 13:53
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 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: 


<!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 pertinente ;) Je vous remercie par avance de l'aide que vous allez m'offrir, et vous dit donc à bientôt :)
A voir également:

1 réponse

Réponse 1 / 1
mackrides Messages postés 55 Date d'inscription samedi 29 août 2009 Statut Membre Dernière intervention 6 juillet 2011 6
6 févr. 2011 à 13:53
Grande modif' : Grâce à l'aide du site cnetfrance.fr, on m'a donné ce code : 

body
#navigation {
		margin: 150px 0 0 0 ;
		padding: 0;
		list-style: none;
		text-align: center;
}
#navigation li {
		display: inline;
		margin-right: 1px;
		color: #fff;
		background: #c00;
		text-align: center;
}
a {
		text-decoration: none;
		text-align: center;
}

/* Accueil */

#navigation li a{  
		background: #fff url("images/ongletaccueil.png") left top no-repeat;
		color: #fff;
		font: 1em Arial;
		text-align: center;
		padding: 46px 125px 46px 125px;  /* En fonction de ton image tu devras modifier ces valeurs pour afficher pile poil l'image à sa bonne dimension */
} 

#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
		background: #fff url("images/ongletaccueilsurvolé.png") right top no-repeat;
}

/* Fin Accueil */


/* ---------------------- */


/* Communauté */

#navigation li a.deux{  
		background: #fff url("images/ongletcommunauté.png") left top no-repeat;
		color: #fff;
		font: 1em Arial;
		text-align: center;
		padding: 46px 125px 46px 125px;
} 

#navigation li a.deux:hover, #navigation li  a.deux:focus, #navigation li a.deux:active {
		background: #fff url("images/ongletcommunautésurvolé.png") right top no-repeat;
}

/* Find Communauté */


/* ---------------------- */


/* Jeux */

#navigation li a.trois{  
		background: #fff url("images/ongletjeux.png") left top no-repeat;
		color: #fff;
		font: 1em Arial;
		text-align: center;
		padding: 46px 125px 46px 125px;
} 

#navigation li a.trois:hover, #navigation li  a.trois:focus, #navigation li a.trois:active {
		background: #fff url("images/ongletjeuxsurvolé.png") right top no-repeat;
}

/* Fin jeux */


/* ---------------------- */


/* Forums */

#navigation li a.quatre{  
		background: #fff url("images/ongletforums.png") left top no-repeat;  
		color: #fff;
		font: 1em Arial;
		text-align: center;
		padding: 46px 125px 46px 124px; 
} 

#navigation li a.quatre:hover, #navigation li  a.quatre:focus, #navigation li a.quatre:active {
		background: #fff url("images/ongletforumssurvolé.png") right top no-repeat;
}

/* Fin forums */


/* ---------------------- */


On m'aide exclusivement sur ce site, mais si quelqu'un peut m'apporter une aide supplémentaire, ce serait grandement sympa. ;)
Par contre, j'ai fais un fichier .css externe et j'ai ajouté le link sur mon fichier .html, mais rien y fait, le menu ne s'affiche pas, si ce n'est que quatre points les uns en dessous des autres...
Merci :)
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
Image cliquable dans html
pau -
efS -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses