Bonjour et bonne année à toutes et tous
J'ai un petit sur mon site que je suis en train de refaire et qui n'est donc plus en ligne. Je souhaiterais construire une page avec deux menus quasi identiques à http://css.alsacreations.com/modelesmenus/g02.htm chez Alsacréations. Ils seront l'un au dessus de l'autre et seule l'image de fond sera différente.
Celui du haut marche très bien. Voici la CSS + HTML :
Or je ne parviens pas à répéter deux le bloc menu. Je me perd dans la CSS (il faut dire que la sooirée a été longue !
Bref, faut-il un ul#menu_haut et un ul#menu_bas dans la CSS ? Lorsque j'essaie, c'est la cata
.
Si vous avez deux minutes pour me répondre, mon année commencerait bien
En attendant, bonne année à nouveau
Xavier
Modifié par XavierD (02 Jan 2006 - 20:36)
J'ai un petit sur mon site que je suis en train de refaire et qui n'est donc plus en ligne. Je souhaiterais construire une page avec deux menus quasi identiques à http://css.alsacreations.com/modelesmenus/g02.htm chez Alsacréations. Ils seront l'un au dessus de l'autre et seule l'image de fond sera différente.
Celui du haut marche très bien. Voici la CSS + HTML :
<title>La méthode rose - Guitares</title>
<style type="text/css">
body {
background: #000;
}
a {
font-size:13px;
font-variant: small-caps;
font-style: italic;
text-decoration: none;
color: #FFFF99;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
font-style: normal;
}
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
ul {
position: absolute; /* positionnement pour IE5 et IE5.5 */
top: 0;
left: 100px;
background: transparent url(images/robin_instruments.jpg) top left no-repeat; /* arrière-plan général du menu */
width: 810px;
text-align: center;
}
li {float: left;}
li a { /* dimensions et définitions des boutons */
display: block; /* mise en block de <a> pour lui donner des dimensions */
height: 420px;
width: 90px;
font-size: 12px;
line-height: 20px; /* hauteur de ligne pour éviter les paddings */
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
a#menu1:hover {
background-position: -270px 0%;
background-image:url(images/FenderPrecisionvert.jpg); /* décalage de l'arrière-plan pour chaque bouton */
}
a#menu2:hover {
background-position: -360 0%;
background-image:url(images/Gibson330TDvert.jpg);
}
a#menu3:hover {
background-position: -450px 0%;
background-image:url(images/Mosritecombovert.jpg);
}
a#menu4:hover {
background-position: -540px 0%;
background-image:url(images/Simonetpatrickvert.jpg);
}
a#menu5:hover {
background-position: -630px 0%;
background-image:url(images/Jolanavert.jpg);
}
a#menu6:hover {
background-position: -720px 0%;
background-image:url(images/GibsonES225Tvert.jpg);
}
a#menu7:hover {
background-position: -810px 0%;
background-image:url(images/Danelectrovert.jpg);
}
a#menu8:hover {
background-position: -900px 0%;
background-image:url(images/robinvert.jpg);
}
a#menu9:hover {
background-position: -990px 0%;
background-image:url(images/GuildB4Evert.jpg);
}
#presentation {
position:absolute;
float:left;
text-decoration:none;
bottom: 40px;
left: 10%;
margin: 0 0 5px 0;
}
#mp3 {
position: absolute;
float:left;
text-decoration:none;
bottom: 40px;
left: 48%;
right:auto;
margin: 0 0 5px 0;
}
#accueil {
position:absolute;
float:left;
text-decoration:none;
bottom: 40px;
left: 85%;
right:auto;
margin: 0 0 5px 0;
}
-->
</style>
</head>
<body>
<ul>
<li><a id="menu1" title="" accesskey="1" href="images/FenderPrecision.jpg"> <br>Fender<br>Precision</a></li>
<li><a id="menu2" title="" accesskey="2" href="images/Gibson330TD.jpg"><br>Gibson<br>ES330TD</a></li>
<li><a id="menu3" title="" accesskey="3" href="images/Mosritecombo.jpg"><br>Mosrite<br>Combo</a></li>
<li><a id="menu4" title="" accesskey="4" href="images/Simonetpatrick.jpg"><br>Simon<br>et<br>Patrick</a></li>
<li><a id="menu5" title="" accesskey="5" href="images/Jolana.JPG"><br>Jolana<br>Basso V</a></li>
<li><a id="menu6" title="" accesskey="6" href="images/GibsonES225T.jpg"><br>Gibson<br>ES225T</a></li>
<li><a id="menu7" title="" accesskey="6" href="images/Danelectro.jpg"><br>Danelectro<br>baryton</a></li>
<li><a id="menu8" title="" accesskey="6" href="images/robin.jpg"><br>Robin<br>Freedom 1</a></li>
<li><a id="menu9" title="" accesskey="6" href="images/GuildB4E.jpg"><br>Guild<br>B4E</a></li>
</ul>
<div id="presentation">
<a href="LMR_presentation.html">Présentation</a></div>
<div id="mp3">
<a href="LMR_mp3.html">Mp3</a></div>
<div id="accueil">
<a href="index.html">Accueil</a></div>
</body>
</html>
</head>
Or je ne parviens pas à répéter deux le bloc menu. Je me perd dans la CSS (il faut dire que la sooirée a été longue !
Bref, faut-il un ul#menu_haut et un ul#menu_bas dans la CSS ? Lorsque j'essaie, c'est la cata
.Si vous avez deux minutes pour me répondre, mon année commencerait bien
En attendant, bonne année à nouveau
Xavier
Modifié par XavierD (02 Jan 2006 - 20:36)
