Se connecter avec
S'enregistrer | Connectez-vous

probleme css debutant

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte

met ce code

.imgmenu1 {background-image:url(urlimg);}
.imgmenu1:hover {background-image:url(urlimg2);}


urlimg=>adresse de l'image quand la souris n'est pas sur le lien

urlimg2=>adresse de l'image quand la souris est sur le lien

tu met ensuite le lien suivant dans la page html :
<a href="urllien" class="imgmenu1"> </a>

Petit conseil de programmation web , fait un fichier externe qui ne contiendra que ton css , ca rendra plus clair ton code quand il sera plus étoffé .

La ligne à mettre dans ton head pour que le fichier css soit chargé.

  1. <link rel="stylesheet" type="text/css" href="style.css" />


Par contre je crois que ta balise style n'est pas utilisée comme il faut .

Si tu veux écrire dans ton html les propriétés css , ca devrait donner plutot ceci : 
  1. <p style="background-color:#FFFFFF;font-size:10px;" > le texte </p>


Edit :p etite note supplémentaire il n'y a rien entre tes balises <a> donc c'est normal que ca n'affiche rien . Donc je te dirai de mettre un width et un heigh definit pour qu'il prenne une taille par défaut.

pour le reste de mon site j'aurai un fichier .css t'inquiet
la c'etai juste pour l'exemple et ton idée de rajouté les dimension ne marche pas parce que les balise <a></a> sont des balise de ligne ou je sais plus quoi
personne ne s'y connai un peu avec <div></div>
(j'ai plus beaucoup d'espoire) :-(

bah si avec les div ca marche comme je te l'ai mis au dessus .

tu définis ton div dans le html:

  1. <div id="essai"></div>


tu définis les propriétés css
  1. #essai
  2. {
  3. width:200px;
  4. height:20px;
  5. background-image:url de ton image
  6. }
  7. #essai:hover
  8. {
  9. background-image:url de la deuxième image
  10. }

J'ai toujours fait comme ca , et ca marche .

Vu que t'as l'air d'en douter , je vais te filer carrément un source complet , à toi à changer juste le lien des deux images .

Pour le html :

  1. <div id="menu"> 
  2.     <ul>
  3.       <li><a href="index.php?trt=news">News</a></li>
  4.       <li><a href="index.php?trt=forum">Forum</a></li>
  5.       <li><a href="#">Compte</a></li>
  6.       <li><a href="#">Membres</a></li>
  7.       <li><a href="index.php?trt=forminscription">Inscription</a></li>
  8.       <li><a href="#">A propos de </a></li>
  9.     </ul>
  10.   </div>


pour le css 

  1. #menu
  2. {
  3. 	background-image:url(images/menuhaut.gif);
  4. 	position:absolute;
  5. 	top:25px;
  6. 	left:0px;
  7. 	text-align:left;
  8.  	font-family : arial; 
  9.  	font-size : 11px; 
  10. }
  11.  
  12. #menu ul
  13. { 
  14. 	width : 173px ; 
  15. 	height : 246px; 
  16. 	list-style:none;
  17. 	padding-left : 29px;
  18. 	padding-top: 29px;
  19. 	text-transform : uppercase; 
  20. }
  21.  
  22. #menu li
  23. {
  24. 	line-height : 30px;
  25. 	text-align : left;
  26. 	text-indent : 5px;  
  27. 	list-style:none;
  28. }
  29.  
  30. #menu li a 
  31. {
  32. 	background : transparent url(images/bg_menu.gif) bottom no-repeat; 
  33. 	width: 150px;
  34. 	display: block;
  35. 	height : 30px;
  36. 	text-decoration: none;
  37. 	margin :  0;
  38. 	padding : 0;
  39. 	color  : #232323;
  40. 	list-style:none;
  41. }
  42. #menu li a:hover 
  43. {
  44. 	background : transparent url(images/bg_menu_ov.gif) bottom no-repeat; 
  45. 	height : 30px;
  46. 	list-style:none;
  47. }


Et peut etre tout mon header :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
  3. <head>
  4. <title>Site</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta http-equiv="Content-Language" content="fr" />
  7. <meta name="Description" content="" />
  8. <meta name="Keywords" content="" />
  9. <link rel="stylesheet" type="text/css" href="style.css" />


Si après ca tu me dis que ca ne fonctionne pas , je crois que ta touche copier coller doit avoir un problème ;) 

probleme reglé, je met le code pour ceux que sa iinteresse

<html>
<head>
<style>
#Menu a{
background-image:url(Image/Menu/Menu.png);
width : 200px ;
height : 26px;
}

#Photos a{
background-image:url(Image/Menu/Photos1.png);
width : 200px ;
height : 26px;
}
#Photos a:hover{
background-image:url(Image/Menu/Photos2.png);;
}

#Liens a{
background-image:url(Image/Menu/Liens1.png);
width : 200px ;
height : 26px;
}
#Liens a:hover{
background-image:url(Image/Menu/Liens2.png);;
}

#Jeux a{
background-image:url(Image/Menu/Jeux1.png);
width : 200px ;
height : 26px;
}
#Jeux a:hover{
background-image:url(Image/Menu/Jeux2.png);;
}

#TV a{
background-image:url(Image/Menu/TV1.png);
width : 200px ;
height : 26px;
}
#TV a:hover{
background-image:url(Image/Menu/TV2.png);;
}

#ST a{
background-image:url(Image/Menu/ST1.png);
width : 200px ;
height : 26px;
}
#ST a:hover{
background-image:url(Image/Menu/ST2.png);;
}

#Skyblog a{
background-image:url(Image/Menu/Skyblog1.png);
width : 200px ;
height : 26px;
}
#Skyblog a:hover{
background-image:url(Image/Menu/Skyblog2.png);;
}

#Xiaoxiao a{
background-image:url(Image/Menu/Xiaoxiao1.png);
width : 200px ;
height : 26px;
}
#Xiaoxiao a:hover{
background-image:url(Image/Menu/Xiaoxiao2.png);;
}

#Livreor a{
background-image:url(Image/Menu/Livreor1.png);
width : 200px ;
height : 26px;
}
#Livreor a:hover{
background-image:url(Image/Menu/Livreor2.png);;
}
</style>
</head>
<body>
<div id="Menu"><a href=""></a></div>
<div id="Photos"><a href="index.php?trt=news"></a></div>
<div id="Liens"><a href="index.php?trt=news"></a></div>
<div id="Jeux"><a href="index.php?trt=news"></a></div>
<div id="TV"><a href="index.php?trt=news"></a></div>
<div id="ST"><a href="index.php?trt=news"></a></div>
<div id="Skyblog"><a href="index.php?trt=news"></a></div>
<div id="Xiaoxiao"><a href="index.php?trt=news"></a></div>
<div id="Livreor"><a href="index.php?trt=news"></a></div>
</body>
</html>
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde