problèmes codage site!
Bonjour à tous,
je rencontre des problèmes que je ne parviens pas à traiter pour le codage d'un site:
-problème du corps de la page: je veux qu'il soit centré et fixe, pas trop grand, j'ai mis le bon code mais ca ne marche pas
-problème sur le menu: il déplace le texte lorsque l'on passe le curseur desssus, et je n'arrive pas à faire en sorte que les "menus 1", "menu 2" ... changent de couleur au passage de la souris comme pour le bouton accueil!
je vous mets ci-joint le css et le html de mon projet.
vous pouvez le modifier-le et renvoyez le moi, ce sera le plus simple et il n'y aura pas de problème de non-comopréhension de ma part (avec une petite explication pur que ca me serve!)
Le css:
Code:/* Design d'exemple du Site du Zér0 Réalisé par zaz, venom et mateo21 <lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien> */ body { width: 760px; margin: center; /* Pour centrer notre page */ margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */ margin-bottom: 20px; /* Idem pour le bas du navigateur */ background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */ } /* L'en-tête */ #en_tete { width: 760px; height: 100px; background-image: url("images/banniere.png"); background-repeat: no-repeat; margin-bottom: 10px; } /* Le menu */ <style type="text/css" media="screen"> <!-- body { margin: 0; padding: 0; background: green; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; /* placement du menu, à modifier selon vos besoins */ top: 10px; left: 150px; z-index:100; width: 100%; /* correction pour Opera */ } #menu dl { float: left; width: 10em; } #menu dt { cursor: pointer; text-align: center; color: #FFFFFF; font-weight: bold; background: #000000; border: 1px solid white; margin: 1px; } #menu dd { display: none; border: 1px solid white; } #menu li { text-align: center; background: #000000; } #menu li a, #menu dt a { color: #FFFFFF; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { background: #FFFFFF; color: #000000; } --> </style> /* Le corps de la page */ #corps { margin-left: 140px; margin-bottom: 20px; padding: 5px; color: #B3B3B3; background-color: #626262; background-image: url("images/motif.png"); background-repeat: repeat-x; border: 2px solid black; } #corps h1 { color: #B3B3B3; text-align: center; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; } #corps h2 { height: 30px; background-image: url("images/titre.png"); background-repeat: no-repeat; padding-left: 30px; color: #B3B3B3; text-align: left; }
le html:
Code:<!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> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="mouche.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <!-- L'en-tête --> <div id="en_tete"> </div> <<script type="text/javascript"> <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <div id="menu"> <dl> <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt> <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> <ul> <li><a href="#">Sous-Menu 1.1</a></li> <li><a href="#">Sous-Menu 1.2</a></li> <li><a href="#">Sous-Menu 1.3</a></li> <li><a href="#">Sous-Menu 1.4</a></li> <li><a href="#">Sous-Menu 1.5</a></li> <li><a href="#">Sous-Menu 1.6</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> <li><a href="#">Sous-Menu 2.4</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.2</a></li> <li><a href="#">Sous-Menu 3.3</a></li> <li><a href="#">Sous-Menu 3.4</a></li> <li><a href="#">Sous-Menu 3.5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.2</a></li> <li><a href="#">Sous-Menu 4.3</a></li> </ul> </dd> </dl> <!-- Le corps --> <div id="corps"> <br><br /><br><br /><br><br /> <br /> <p> Bienvenue sur mon super site !<br /> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa-D </p> <h2>A qui s'adresse ce site ?</h2> <p> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa </p> <h2>L'auteur</h2> <p> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa </p> </div> <!-- Le pied de page --> <div id="pied_de_page"> <p>Copyright 2005, tous droits réservés</p> </div> </body> </html>
je vous remercie d'avance!
-----
