Adaptation du tutoriel sur les images réactives

Bonjour à toutes et à tous

Suite à la lecture de ce tutoriel, j'aimerais l'adapter au menu que j'ai crée sur mon site.

Je ne sais pas comment l'adapter à ce que j'ai déjà fait...

Je vous laisse le code de mon menu ainsi que celui de mon CSS.

<div id="menu">

				<ul id="liens">
					<li class="marginRight"><a href="antares.php">Accueil</a></li>
					<li class="marginRight"><a href="bottes.php">Bottes</a></li>
					<li class="marginRight"><a href="ceintures.php">Ceintures</a></li>
					<li class="marginRight"><a href="congratulations/livre.php">Livre d'or</a></li>
					<li class="clr"></li>
				</ul>

			</div>

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#E9E9E9;
}
#conteneur {
	width:80%;
	margin: 0 auto 0 auto;
	border-style:solid;
	border-width:thin;
	background-color:#FFFFFF;
}
#banniere {
	width:100%;
	height: 150px;
	background-image:url(../images/banniere.png);
	background-repeat:no-repeat;
}
#menu {
	width:100%;
	margin: 0 0 5px 0;
	border-top: solid thin;
	border-bottom: solid thin;
	height: 28px;
	background-image:url(../images/fond_menu.png);
}
#liens {
	list-style-type:none;
	margin:0 auto 0 auto;
	padding:0;
	width: 660px; 
}
li.marginRight {
	margin-right:5px;
	float:left;
}
li a {
	display:block;
	padding:5px;
	width:150px;
	text-decoration:none;
	color:#FFFFFF;
	text-align:center;
}
.marginRight a:hover {
	background-image:url(../images/fond_menu2.png);
}
.clr {
	clear:both;
}
#contenu {
	clear:both;
	padding: 5px 5px 5px 5px;
}
.titre {
	font-size:14px;
	font-weight:bold;
	margin-left:50px;
	margin-right:50px;
}
.texte {
	font-size:12px;
	margin-left:50px;
	margin-right:50px;
}
.separateur {
	margin: 0 auto 0 auto;
	height:3px;
	width:40%;
	background-color:#006699;
}
#pied {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}

Modifié par Baldy (09 May 2007 - 12:05)

Déjà, tu aurais intérêt à remplacer ton sélecteur li a {...} par div#menu li a {...}, afin d'éviter que ce style ne s'applique à tous les liens de toutes tes listes (note : il est possible et même souvent souhaitable d'utiliser des listes pour des contenus, pas uniquement pour le menu de navigation).

Ensuite, ça serait pas mal de faire un menu extensible en hauteur, pour prévoir l'agrandissement du texte (faire un ou deux Ctrl+Plus avec Firefox, pour voir ce que ça donne). Ce qui implique de ne pas le figer en hauteur. Donc au revoir le height: 28px. À la rigueur, un min-height: 28px sera peut-être utile.

Enfin, pour appliquer le tutoriel, je pense que le tutoriel lui-même est assez clair. Si besoin, reconstruit les styles de ton menu à partir de zéro, en suivant le tutoriel et en adaptant en fonction du résultat souhaité.

Un conseil toutefois : il est préférable d'utiliser une image avec les deux états du bouton côte-à-côte, et pas l'un en dessous de l'autre. Si au final le lien n'a pas pile la hauteur souhaitée, on ne verra pas apparaitre la partie de l'image qui correspond au deuxième état.

Voir par exemple ce menu :
http://css.alsacreations.com/xmedia/exemples/menunew/menu4.html
extrait de ce tutoriel (partie «retour en haut de page
Un menu graphique, avec rollover mais sans javascript») :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Creer-des-menus-simples-en-CSS

Merci pour le tuto, je vais essayer le l'appliquer à mon site.

Le soucis pour moi c'est que je voudrais que le menu (enfin la liste) soit centrée dans le DIV.

Après étude du tuto que tu m'a donné j'ai fait ceci (juste quelques changements personnels rien de très différent à la base) :

<style>
#navigation {
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
	overflow: hidden ;		/* Création du contexte de formatage */
	}
	#navigation li {
	float: left ;
	width: 150px ;
	color: #fff ;
	background: #c00 ;
	}
#navigation li a {
	display: block ;
	background: #c00 url(test.png) left top no-repeat ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	padding: 4px 0 ;
	text-align: center ;
	text-decoration:none;
	}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: #900 url(test.png) right top no-repeat ;
	}
</style>
<!--[if lt IE 7]>
			<style type="text/css">
			#nav {							/* Contexte de formatage pour IE6 */
				overflow: visible ;
				height: 1% ;
				}
			</style>
			<![endif]-->
</head>

<body>
<div style="width:100%; border: solid thin;">
<ul id="navigation">
	<li><a href="#" title="aller à la section 1">item1</a></li>

	<li><a href="#" title="aller à la section 2">item2</a></li>
	<li><a href="#" title="aller à la section 3">item3</a></li>
	<li><a href="#" title="aller à la section 4">item4</a></li>

	<li><a href="#" title="aller à la section 5">item5</a></li>
</ul>
</div>

A partir de la l'ultime étape serait de centrer le contenu du DIV (donc la liste complète) dans le DIV lui même...

Est ce possible?

Baldy a écrit :
A partir de la l'ultime étape serait de centrer le contenu du DIV (donc la liste complète) dans le DIV lui même...

Tu as 5 items de 150px chacun, ce qui te fait une largeur totale de 750px. En donnant cette largeur au ul, tu devrais pouvoir le centrer avec la technique des marges automatiques.

ul#navigation {
width: 750px;
margin: 0 auto;
}

Ca à l'air impeccable, merci beaucoup pour ton aide, il ne me reste plus qu'à l'adapter à mon site, ça devrait être facile désormais je pense.