Ajout de sous menu en CSS

Question

lvm100

5 Jan 2011 à 17:17

Bonjour, j'aimerais ajouter des sous menu à mon menu en css qui fonctionne sous IE6 et plus et sur Mozilla Firfox mais comme je suis débutant et même après avoir lu plusieurs forum je ne comprends pas trop comment faire merci de m'aider, vous trouverez ci-joint mon code html et css. Merci encore de m'aider.
Le code n'a pas d'indentation (merci de ne pas m'en aviser car je le sais déjà)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>POOL DES SERIES 2010-2011</title>
<META name="POOLHOCKEY" content="pool des series">
<META name="keywords" content="pool, series, hockey, 2010">
<META name="verify-v1" content="wltdCcvaQ8EFEAKCS1OaV3bu+Q3BuuEBm3HO4PZSj50=" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!-- <link rel="stylesheet" type="text/css" href="stylemenu.css" media="screen" /> -->
<!--<script language="javascript" src="functions.js"></script>-->
<script language="javascript">
var d=new Date();
var monthname=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = d.getDate() + " " + monthname[d.getMonth()] + ", " + d.getFullYear();
//---------------   END LOCALIZEABLE   ---------------
function placeF() {
var nomIDF=document.connexion.pseudo
nomIDF.focus()
}
</script>

</head>
<?php
require('dbconfmk.php');
$db = mysql_connect($host,$user,$pass)  or die('Erreur de connexion '.mysql_error());
mysql_select_db($ntable,$db)  or die('Erreur de selection '.mysql_error()); 
$req = mysql_query('SELECT COUNT(*) AS cptins FROM client');
$nbenreg = mysql_fetch_array($req);
$nbenreg['cptins'] = $nbenreg['cptins'] -1;

$req1 = mysql_query('SELECT COUNT(*) AS cptins1 FROM clienttemp');
$nbenreg1 = mysql_fetch_array($req1);
$nbenreg1['cptins1'] = $nbenreg1['cptins1'];
mysql_close();
?>
<body onload="placeF()">
<map name="cadres">
 <area shape="rect" coords="54, 74, 74, 94" href="http://www.newyorkrangers.com" target="_blank" alt="Rangers de New York" title="Rangers de New York">
 <area shape="rect" coords="85, 74, 105, 94" href="http://www.anaheimducks.com" target="_blank" alt="Ducks d'Anaheim" title="Ducks d'Anaheim">
 <area shape="rect" coords="113, 74, 138, 94" href="http://www.atlantathrashers.com" target="_blank" alt="Thrashers d'Atlanta" title="Thrashers d'Atlanta">
 <area shape="rect" coords="146, 74, 172, 94" href="http://www.bostonbruins.com" target="_blank" alt="Bruins de Boston" title="Bruins de Boston">
 <area shape="rect" coords="180, 74, 202, 94" href="http://www.sabres.com" target="_blank" alt="Sabres de Buffalo" title="Sabres de Buffalo">
 <area shape="rect" coords="208, 74, 238, 94" href="http://www.calgaryflames.com" target="_blank" alt="Flames de Calgary" title="Flames de Calgary">
 
 <area shape="rect" coords="270, 74, 293, 94" href="http://www.chicagoblackhawks.com" target="_blank" alt="Blackhawks de Chicago" title="Blackhawks de Chicago"> 
 <area shape="rect" coords="243, 74, 266, 94"  href="http://www.carolinahurricanes.com" target="_blank" alt="Hurricanes de la Caroline" title="Hurricanes de la Caroline">
 <area shape="rect" coords="301, 74, 324, 94" href="http://www.coloradoavalanche.com" target="_blank" alt="Avalanche du Colorado" title="Avalanche du Colorado"> 
 <area shape="rect" coords="333, 74, 355, 94" href="http://www.bluejackets.com" target="_blank" alt="Blue Jackets de Columbus" title="Blue Jackets de Columbus">
 <area shape="rect" coords="364, 74, 389, 94" href="http://www.dallasstars.com" target="_blank" alt="Stars de Dallas" title="Stars de Dallas">
 <area shape="rect" coords="394, 74, 417, 94"  href="http://www.detroitredwings.com" target="_blank" alt="Red Wings de Detroit" title="Red Wings de Detroit">
 
 <area shape="rect" coords="422, 74, 442, 94" href="http://www.lakings.com" target="_blank" alt="Kings de Los Angeles" title="Kings de Los Angeles">
 <area shape="rect" coords="449, 74, 470, 94" href="http://www.wild.com" target="_blank" alt="Wild du Minnesota" title="Wild du Minnesota">
 <area shape="rect" coords="476, 74, 500, 94" href="http://www.canadiens.com" target="_blank" alt="Canadiens de Montreal" title="Canadiens de Montreal">
 <area shape="rect" coords="505, 74, 530, 94" href="http://www.nashvillepredators.com" target="_blank" alt="Predators de Nashville" title="Predators de Nashville">
 <area shape="rect" coords="534, 74, 562, 94" href="http://www.newjerseydevils.com" target="_blank" alt="Devils du New Jersey" title="Devils du New Jersey">
 <area shape="rect" coords="566, 74, 589, 94" href="http://www.newyorkislanders.com" target="_blank" alt="Islanders de New York" title="Islanders de New York">
 
 <area shape="rect" coords="596, 74, 617, 94" href="http://www.ottawasenators.com" target="_blank" alt="Sénateurs d'Ottawa" title="Sénateurs d'Ottawa">
 <area shape="rect" coords="621, 74, 646, 94" href="http://www.philadelphiaflyers.com" target="_blank" alt="Flyers de Philadelphie" title="Flyers de Philadelphie">
 <area shape="rect" coords="652, 74, 677, 94" href="http://www.phoenixcoyotes.com" target="_blank" alt="Coyotes de Phoenix" title="Coyotes de Phoenix">
 <area shape="rect" coords="678, 74, 704, 94" href="http://www.pittsburghpenguins.com" target="_blank" alt="Penguins de Pittsburgh" title="Penguins de Pittsburgh">
 <area shape="rect" coords="709, 74, 732, 94" href="http://www.sjsharks.com" target="_blank" alt="Sharks de San Jose" title="Sharks de San Jose">
 <area shape="rect" coords="737, 74, 763, 94" href="http://www.stlouisblues.com" target="_blank" alt="Blues de St. Louis" title="Blues de St. Louis">
 
 <area shape="rect" coords="767, 74, 789, 94" href="http://www.tampabaylightning.com" target="_blank" alt="Lightning de Tampa Bay" title="Lightning de Tampa Bay">
 <area shape="rect" coords="796, 74, 820, 94" href="http://www.canucks.com" target="_blank" alt="Canucks de Vancouver" title="Canucks de Vancouver">
 <area shape="rect" coords="830, 74, 851, 94" href="http://www.washingtoncapitals.com" target="_blank" alt="Capitals de Washington" title="Capitals de Washington">
 <area shape="rect" coords="867, 74, 889, 94" href="http://www.mapleleafs.com" target="_blank" alt="Maple Leafs de Toronto" title="Maple Leafs de Toronto">
 <area shape="rect" coords="895, 74, 918, 94" href="http://www.floridapanthers.com" target="_blank" alt="Panthers de la Floride" title="Panthers de la Floride">
 <area shape="rect" coords="924, 74, 945, 94" href="http://www.edmontonoilers.com" target="_blank" alt="Oilers d'Edmonton" title="Oilers d'Edmonton">
 
   
</map>
<div id="wrap">
<div id="header">
<img alt="Pool des séries" title="Pool des séries" usemap="#cadres" src="images/poollogo.png" height="100" width="1000" border="0">
<br /><br />
<form name="connexion" action="authuser.php" method="post">
  <h2>Code usager: <input maxlength="20" size="20" name="pseudo" type="text">
Mot de passe: <input maxlength="8" size="20" name="mdp" type="password"> <font size="1"><input value="Connexion" style="font-size: 8pt;" type="submit"></font>&nbsp;&nbsp;<a style="font-size: 8pt;" href="#">Oublié mot de passe?</a></h2>


  <script language="javascript">document.write("<h2 style='text-align: right;'>" + TODAY + "</h2>");</script>

</form>
</div>

<div id="menu"> <!-- c'est ici que j'aimerais mettre mes sous menu -->

<ul>
<li><a href="index.php"><b>ACCUEIL</b></a></li>
<li><a href="reglements.php">RÈGLEMENTS</a></li>
<li><a href="pointage.php">POINTAGE</a></li>
<li><a href="#">COMMENT FAIRE</a></li>
<li><a href="inscription.php">INSCRIPTION</a></li>
<li><a href="envoiecour1.php">NOUS JOINDRE</a></li>
</ul>
</div>

<div id="content">
<div class="right"> 

<h2>BIENVENUE SUR POOLML</h2>
<div class="articles">
<font size="3">Le
site se veut
un divertissement et avoir du
plaisir pendant
les séries éliminatoires de hockey 2010-2011,
seulement <font color="#EA4515"> <span style="font-weight: bold;">$5.00</span></font>
par inscription. Le site poolML des séries est bien
particulier et très apprécié des
participants car les prédictions se font après
chaque tour des séries et non juste une fois. Le site est
sans but lucratif sauf un certain pourcentage pour
l'hébergement et la maintenance du site. Le pourcentage sera
déterminé en fonction du nombre de participants.
Pour une cinquième année de suite sur internet et
une septième comme administrateur du pool, cette
année je vise plus de cent participants et mon objectif est
au moins deux cents. Il y aura plusieurs changements cette
année, des prix de participation (certificats cadeaux),
prédiction des deux équipes finalistes ainsi que
l'équipe gagnante de la coupe stanley. Pour en savoir plus
voir les règlements.	 
<br /><br />
En ce qui concerne les certificats cadeaux, ils seront
attribués s'il y a plus de cent participants. Je vous
souhaite bonne chance et bon pool des séries 2010-2011,
votre webmaster.</font>
<br /><br />
<img src="images/cup2010chic01.png" alt="Example pic" style="border: 3px solid #ccc;" width="300" height="250" /><br>
<font size="1">Photo des Blackhawks de Chicago, gagnant de la coupe stanley 2009-2010.</font>

<br /><br />
</div>
<h2>LES NOUVEAUTÉS POUR 2011</h2>
<div class="articles">
<font size="3">Contrairement
aux années passées, l'inscription
était directement en ligne sans aucune confirmation. Cette
année, afin d'éviter certains
problèmes de l'an passé, j'ai
décidé après votre inscription (Code
d'usager, Mot de passe, Courriel, Nom, Prénom) de vous envoyer un courriel de
réception d'inscription. Par la suite, lors de votre
paiement vous allez recevoir un courriel de confirmation de paiement,
dans ce courriel il y aura un lien pour activer votre compte, par la
suite vous pourrez entrer sur le site. 
<br /><br />
Aussi dans les nouveautés de cette année
vous allez devoir vous faire un gabarit de prédiction dans le cas ou vous seriez en retard
ou dans l'impossibilité de faire vos prédictions pour un tour des séries alors votre gabarit s'appliquera.
<br /><br />
Merci de votre participation.
</font>
</div>
</div>

<div class="left"> 

<h2>Classement 10/p</h2>
<ul>
<li>abcde</li> 
<li><a href="#">aaaaaa</a></li> 
<li><a href="#">bbbbb</a></li> 
<li><a href="#">cccccc</a></li>
<li><a href="#">dddddd</a></li> 
<li><a href="#">eeeeee</a></li>
</ul>

<h2>Statistiques</h2>
<ul>
<li>Inscription(s):<font color="#FF0000"><?php echo $nbenreg['cptins'] ; ?></font></li>
<br />
<li>En attente:<font color="#FF0000"><?php echo $nbenreg1['cptins1'] ; ?></font></li>
<br /><br />
</ul>

</div>
<div style="clear: both;"> </div>
</div>

<div id="footer">Copyright &copy; 2006-2011 Pool des s&eacute;ries, 
Tous droits r&eacute;serv&eacute;s
</div>
</div>

</body>
</html>

* {padding: 0px; margin: 0;}

body {background: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #333333;;}

img {border: none;}

a {color: #57626a; text-decoration: none;}

a:hover {text-decoration: underline; color : #000;}

#wrap {margin: 0 auto; width: 1000px;}

#header {padding: 10px 0 20px 0;}

#header h1 {font-size: 12px; font-weight: 100; letter-spacing: -1px; padding: 12px 0 5px 10px;}

#header h1 a {color: #57626a; text-decoration: none;}

#header h1 a:hover {color: #57626a; text-decoration: none;}

#header h2 {color: #000; font-size: 15px; font-weight: 100; padding: 0 0 0 11px; letter-spacing: -1px; line-height: 12px;}

#menu {
background:#57626a url('images/menu1.jpg') no-repeat;
height: 40px;
line-height: 40px;
text-transform: uppercase;
}

#menu ul {
padding-left: 10px;
list-style-type: none;
}

#menu ul li {
display: block;
float: left;
}

#menu ul li a {
color: #eee;
padding: 0 10px;
text-decoration: none;
font-weight: 100;
font-size: 14px;
letter-spacing: -0.5px;
}

#menu ul li a:hover {
background-color: #008000; /* #0000FF; */
/* border-style:outset; */
color: #000000; /*#FFFFFF; */
/*text-decoration: underline; */
text-decoration: none;
font-weight: bold;
}

#content {padding: 10px 20px;}

.right {width: 775px; float: left; text-align: justify;}

.right h2 {color: #57626a; font-size: 20px; letter-spacing: -1px; font-weight: 100; padding : 10px 0 15px 0;}

.left {width: 150px; float: right; padding: 12px; border: 1px solid #bbb; font-size: 12px;}

.left ul {/*list-style-type: none;*/ list-style-type: decimal; padding: 5px 10px 10px 20px; color: #57626a;}

.left h2 {height: 30px; font-size: 14px; color: #666; line-height: 30px; font-weight: 600;}

.left a {text-decoration: none}

#footer {background: url('images/menu1.jpg') no-repeat; height: 40px; /*background: #F3400C;*/ /*border-top: 3px solid #57626a;*/ margin-top: 20px; text-align: center; color: #eee; font-size: 11px; padding: 10px;}

/* Fin de la section de style généré par WebExpert le 2010-05-09 14:02:18 */

oliviadox

5 Jan 2011 à 18:01

Salut,
Pour faire des sous menus la façon la plus courante est de faire des listes imbriquées que tu différencie par des class pour les styler différemment. Par exemple :


<ul class="top_menu">
   <li><a href="#">Lien menu</a></li>
      <ul class=sub_menu">
             <li><a href="#">Lien sous-menu</a></li>
             <li><a href="#">Lien sous-menu</a></li>
       </ul>
   <li><a href="#">Lien menu</a></li>
   <li><a href="#">Lien menu</a></li>
   <li><a href="#">Lien menu</a></li>
</ul>

Puis en CSS tu style a ta convenance Smiley cligne

2 ou 3 tips tu déclares en Xhtml STRICT... Donc en l'état j'ai bien peur que ta page compte quelques trucs obsolètes. En vrac :
- à quoi te sert la balise <font> si tu utilises des css ?
- les noms des balises en minuscule
- pense à refermer toutes les balises que tu a ouvertes
- utilise des <p> (paragraphe) plutot que les <br/>
- je ne suis pas sure de l'utilité de toutes tes area/map (sans voir c'est difficile à dire.. Smiley lol

)
- pas de target:_blank

Voilà grosso modo, bon courage pour la suite !

Sujet clos

CSS et mise en forme, CSS3

Ajout de sous menu en CSS