Menu déroulant HTML/CSS
Fermé
skizi
Messages postés
3
Date d'inscription
mercredi 15 août 2012
Statut
Membre
Dernière intervention
15 août 2012
-
15 août 2012 à 17:30
skizi Messages postés 3 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 15 août 2012 - 15 août 2012 à 23:23
skizi Messages postés 3 Date d'inscription mercredi 15 août 2012 Statut Membre Dernière intervention 15 août 2012 - 15 août 2012 à 23:23
A voir également:
- Menu déroulant HTML/CSS
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Editeur html - Télécharger - HTML
- Windows 11 menu démarrer classique - Guide
4 réponses
@lobotomix:~# rm -rf *\
Messages postés
1392
Date d'inscription
dimanche 1 juillet 2012
Statut
Membre
Dernière intervention
14 décembre 2012
208
15 août 2012 à 19:25
15 août 2012 à 19:25
hello sarah, pourrait-on voir le code?
skizi
Messages postés
3
Date d'inscription
mercredi 15 août 2012
Statut
Membre
Dernière intervention
15 août 2012
15 août 2012 à 19:55
15 août 2012 à 19:55
Bonsoir, voici le code HTML :
Et le code CSS :
<!DOCTYPE html> <html> <p id="top"> </p> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <title>jap-animaton</title> </head> <body> <div id="bloc_page"> <header> <img src="images\logo.jpg" alt="bann" width="800px"/> </header> <div id="conteneur"> <div id="menu"> <dl> <dt a href="index.html">Accueil</dt> <dd> <ul> </ul> </dd> </dl> <dl> <dt>Forum</dt> <dd> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> <dl> <dt>Manga</dt> <dd> <ul> <li><a href="shonen.html">Shonen</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> <dl> <dt>Goodies</dt> <dd> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> <dl> <dt>Achat</dt> <dd> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> <dl> <dt>Vente</dt> <dd> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> <dl> <dt>Contact</dt> <dd> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> <dl> <dt>Livre d'or</dt> <dd> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> </ul> </dd> </dl> </div> </div> <section> <article> <p </p> </article> <div id="top"><a href="#top">Haut de page</a></div> </section> <hr></hr> <footer> 2012 - Tous droits réservés <br /> Copyright © </footer> </div> </body> </html>
Et le code CSS :
body{ background-image: url(images/fnd.png) ; } #bloc_page{ margin: auto; width: 800px; background: rgb(240,240,240); border-style: solid; border-color:black; border-width: medium; } header { text-align: center; border-style:solid; border-width:0px; border-color:black; } img { } footer{ text-align: center; font-style: italic; margin-top:5px; margin-bottom:5px; } section{ } article{ margin-left:10px; margin-right:10px; } #menu{ background-image: url(images/blue2.gif); height:40px; position:absolute; } #top{ text-align:right; margin-right:10px; font-size: 12px; } dl { height:40px; margin:0;padding:0; display:block; float:left; } dt { width:99px; display:block; height:40px; color:#FFF; font-weight:bold ; line-height:40px; text-align:center; border-right:groove 1px rgb(41,136,204); cursor:pointer; font-family: 'Trebuchet MS'; } dd{ display:block; margin:0; padding:0; background:url(images/menu.png); } dd ul { margin:0;padding:0; text-align:center; list-style:none; } dd ul li a{ color:rgb(32,102,179); text-decoration:none; height:30px; line-height:30px; display:block; border-right:solid 1px rgb(41,136,204); border-left:solid 1px rgb(41,136,204); border-bottom:solid 1px rgb(41,136,204); } dd ul li a:hover{ background:url(images/rouge2.png); color:white; } dl dd{ display:none; } dl:hover dd { display:block; } #conteneur{ background:black; height:40px; position:relative; } a[href]{ text-decoration: none; } a:link { color: rgb(32,102,179) ; } #menu a:visited { color: white ; } a:visited{ color:rgb(32,102,179); } a:hover { color: rgb(32,102,179) ; text-decoration: none ; font-weight:bold ; } dl:hover{ background:url(images/rouge.gif); } #top a { color:rgb(32,102,179); }
bg62
Messages postés
23652
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
29 octobre 2024
2 384
15 août 2012 à 20:10
15 août 2012 à 20:10
vois si tu peux trouver ton bonheur ici, en adaptant un peu au niveau 'look' ... il y a le codage :
https://www.unesourisetmoi.info/menus/menus.php
;)
https://www.unesourisetmoi.info/menus/menus.php
;)
skizi
Messages postés
3
Date d'inscription
mercredi 15 août 2012
Statut
Membre
Dernière intervention
15 août 2012
15 août 2012 à 23:23
15 août 2012 à 23:23
Re-bonsoir,
j'ai réussi a peu près a faire avec les méthode ul mais j'ai un autre problème je vous montre un screenshot. Par contre ce n'est pas le même code que celui du dessus.
Screenshot: http://img16.imageshack.us/img16/9292/bugydg.png
Merci,
Sarah
j'ai réussi a peu près a faire avec les méthode ul mais j'ai un autre problème je vous montre un screenshot. Par contre ce n'est pas le même code que celui du dessus.
Screenshot: http://img16.imageshack.us/img16/9292/bugydg.png
Merci,
Sarah