28220 sujets

CSS et mise en forme, CSS3

Bon.. problème avec le menu en image

je sais que ça a l'air stupide comme question mais le mien est un peu particulier car je suis en train de construire un site assez original et qui sera bientôt publier... bon voilà où j'en suis :

en html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="generator" content="Namo WebEditor v6.0">   
<link rel="stylesheet" href="style/test.css"></link>
</head>


<div id="en_tete">
    <p><!-- Ici on mettra la bannière -->
</div>

<div id="menu">        
 <ul id="menu">
    <li id="about_me"><a href="about_me.xhtml">About me</a></li>
    <li id="gallery"><a href="gallery.xhtml">Gallery</a></li>
    <li id="wip"><a href="wip.xhtml">wip</a></li>
	<li id="contact"><a href="contact.xhtml">Contact</a></li>
	</ul>
           </div>

</div>


et en CSS
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

#en_tete
{
   width: 805px;
   height: 171px;
   background-image: url("../images/tittles.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
}

ul#menu
{
	margin: 0;
	padding: 0;
	list-style-type: none;
/* Suppression des marges externes (margin) et internes (padding) et des puces de la liste */
}
 
ul#menu li
{
	margin: 0 0 5px 0;
	padding: 0;
/* Suppression des marges internes et on définit une marge externe basse de 5 pixels pour aérer le tout */
}
 
ul#menu li a
{
	display: block; /* Permet de donner des dimensions à un élément en ligne (inline) comme un lien */
	width: 170px;
	line-height: 30px;
	color: #000;
	text-indent: 40px; /* On décale le texte de 40px du bord gauche */
	text-decoration: none;
	border: 1px solid #dbd;
	background: url(bg_menu.gif) no-repeat 0 0; /* On met une image de fond, que l'on positionne à 0 pixel du bord gauche et 0 pixel du bord haut */
}
 
ul#menu li a:hover
{
	border: 1px solid #f97;
	background-position: 0 -30px; /* Et ici on décale l'image de fond de 30 pixels vers le haut pour laisser apparaître la 2ème partie de l'image */
}


ce qui devrait donner ça : http://oekakiallaze.free.fr/index_1.html j'ai bon essayer de comprendre ce satané code et je n'ai même pas réussir à le faire fonctionner.... et malgré que j'ai trouvé les réponse dans ce forum mais je n'ai toujours pas réussi à comprendre ce problème... bon j'espère que vos explications seront d'une grande aide pour moi !

ps : vous pouvez me contacter par msn si vous voulez.
Modifié par allaze-eroler (14 Aug 2005 - 18:31)
ok je corrige celà de suite, mais le problème du menu persiste encore...

edit : bon... ce crétin de namo ne veut pas que je retire son truc de "generator namo web editor" et en plus il ne veut pas non plus ajouter le balise fermé..... -_-
Modifié par allaze-eroler (14 Aug 2005 - 18:02)
death83 a écrit :
tu espere attiré un max de visiteur, je te le déconseil avec free. Sinon tu va avoir des surprises Smiley cligne .


ce n'est nullement mon intention... mais je crée ce site uniquement pour montrer mes travaux graphiques aux boites comme ubisoft ou quanticdream ou encorenaughty dog histoire d'avoir un job.
Modifié par allaze-eroler (15 Aug 2005 - 00:14)
Sujet clos
Aller à