28172 sujets

CSS et mise en forme, CSS3

Affichage d'icones dans un menu

Bonjour tout le monde,
J'ai un petit problème d'affichage sur mon site, ( pour l'instant il n'est pas en ligne donc je ne pourrais vous montrez que du code Smiley langue )

alors voici le code HTML:

  	<div id="navigation">
		<ul>
			<li class="accueil"><a href="accueil.html">Accueil</a></li>
			<li class="creation"><a href="creations.html">Créations</a></li>
			<li class="ressources"><a href="ressources.html">Ressources</a></li>
            <li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
	</div> <!-- fin de la div navigation -->



et voici les différents CSS en rapport avec cette <div>:

    
/* Navigation */

#navigation a {
	color: white;
}

#navigation a:hover, #navigation a:focus {
	
	background-color: rgba(255,255,255,0.1);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px ;
	border-radius: 8px;
	text-decoration:none;
}


#navigation {
	width: 18%;
	float: left; 
}
#navigation ul {
	margin: 0;
	padding: 20px 30px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%; 
	padding: 6px 6px 6px 10px;
	line-height: 1.5;
	font-size: 1.6em;
	text-decoration: none;
}


Maintenant que vous avez le sujet, voici la question:

Je souhaite qu'apparaisse a droite de chaque section de mon menu ( Accueil, créations, etc)
un icône en rapport. Voici un icône qui me plairais: http://www.iconfinder.com/icondetails/34274/128/

Le problème, c'est que je n'arrive pas à afficher cet icône... j'ai essayer un
 
#navigation .accueil {
background-image: url("trucmachin.png") no-repeat top-left;
}

mais sa n'a donner aucun résultat.
Quelqu'un aurait il une idée de la démarche a suivre?

Merci d'avance et bonne soirée!
Hi!

Ce n’est rien de grave ton problème, tu t’es juste emmêlé les pinceaux avec les arguments de la propriété background-image : tu as donné à background-image, des arguments qui auraient dût être données à background-repeat et background-position.

Essai un copié-collé de ce qui suit, tu verra, ça marche.

Note : je me suis permis de changer top-left en left, parce que je trouve c’est plus joli, et d’ajouter un padding à la classe, de sorte à ce qu’il n’y ait pas de chevauchement entre le texte et l’icône.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <META http-equiv="content-type" content="text/html; charset=utf-8">
      <META http-equiv="content-style-type" content="text/css">
      <STYLE type="text/css">
         body {
            background-color: black;
         }

         #navigation a {
            color: white;
         }

         #navigation a:hover, #navigation a:focus {
            background-color: rgba(255,255,255,0.1);
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -khtml-border-radius: 8px ;
            border-radius: 8px;
            text-decoration:none;
         }

         #navigation {
            width: 18%;
            float: left;
         }

         #navigation ul {
            margin: 0;
            padding: 20px 30px;
            list-style: none;
         }

         #navigation a {
            display: block;
            height: 1%;
            padding: 6px 6px 6px 10px;
            line-height: 1.5;
            font-size: 1.6em;
            text-decoration: none;
         }

         #navigation .accueil {
            background-image: url("http://icons3.iconfinder.netdna-cdn.com/data/icons/49handdrawing/32x32/home.png");
            background-repeat: no-repeat;
            background-position: left;
            padding-left: 32px;
         }
         </STYLE>
      <TITLE>Page de Teste</TITLE>
   </HEAD>
   <BODY>
      <H1>Page de Teste</H1>
      <DIV id="navigation">
         <UL>
            <LI class="accueil"><A id="test" href="accueil.html">Accueil</A></LI>
            <LI class="creation"><A href="creations.html">Créations</A></LI>
            <LI class="ressources"><A href="ressources.html">Ressources</A></LI>
            <LI class="contact"><A href="contact.html">Contact</A></LI>
         </UL>
      </DIV> <!-- fin de la div navigation -->
   </BODY>
</HTML>


Aperçu :

upload/4742-page-de-tes.png
Modifié par hibou57 (30 Apr 2010 - 19:49)
Si vraiment tu souhaites utiliser une écriture condensée, il te suffit de ne pas spécifier "-image" :
#navigation .accueil { 
   background: url("trucmachin.png") no-repeat top-left; 
}

Modifié par phpdoesnotcare (30 Apr 2010 - 22:48)
Merci à tous les deux.

Au fait j'aurais aimé savoir si c'était possible en passant par une balise <img>?
Naturellement. Il te suffit alors de placer ta balise <img /> dans la balise <li>, avant la balise <a> ou juste après (pour que l'utilisateur puisse aussi cliquer sur l'image pour utiliser le lien).
... mais dans la mesure où ça reste de la décoration, il est sans doute plus correcte de passer par une une image de fond, plutôt qu'une "vraie" image.
L'image ne serre qu'a décorer.
Mais le problème c'est que je voulais appliquer à cet icône du CSS3 pour faire faire une rotation de l'icône en a:hover et a:focus



 -moz-transform: rotate(5deg);


c'est pourquoi je ne sais pas si c'est faisable avec cet icône en background... peut tu m'éclairer la dessus ? Smiley langue
Ah. Dans ce cas, je pense que tu vas devoir utiliser une image alors, plutôt qu'un fond. Sauf erreur de ma part, ce n'est pas encore possible d'appliquer une rotation à un arrière-plan.
Sujet clos
Aller à