28220 sujets

CSS et mise en forme, CSS3

Menu récalcitrants.svp !

Mon bonjour à tous !.

J'ai trouvé un menu, mais je n'arrive pas à le placer correctement à la bonne place.
Quelqu'un pourrait-il m'aider ?.
Je voudrais le placer à la place du menu :

<ul id="Lmenu">
<li><a href="index.php">Accueil</a></li>
<li><a href="nocario1.php">Nocario 1</a></li>
<li><a href="nocario2.php">Nocario 2</a></li>
</ul>
-- -- -- --


</head>
<body>
<div id="template">

<div id="header">
<img class="TêteCorseg" src="design/logo.gif" alt="" />
<img class="TêteCorsed" src="design/logog.gif" alt="" />
<h3>Commune de Nocario</h3>
</div>

<ul id="Lmenu">
<li><a href="index.php">Accueil</a></li>
<li><a href="nocario1.php">Nocario 1</a></li>
<li><a href="nocario2.php">Nocario 2</a></li>
</ul>

<ul id="Rmenu">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

<div id="content">
<p></p>
</div>

<div id="footer">
<p>Le site de la commune de Nocario a été créé en 2003</p>
</div>

</div>
</body>
</html>
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
/* CSS Document */

* { color: #333; font: 100% Verdana, Arial, Helvetica, sans-serif; list-style: none; margin: 0; padding: 0; }
#template { border-top: 5px solid #333; left: 50%; margin: 0 0 0 -350px; position: absolute; width: 701px; }
body>#template { 
width: 776px;/*origine 700 */
background-color: #CC0000;
}

#header { /*hauteur */
background: #F00; 
border-bottom: 
1px solid #000; 
height: 100px; 
text-align: center;
font-size: 30px; 
}
.TêteCorseg {float: left; margin-left: 60px; margin-top: 20px; 
}
.TêteCorsed {float: right;margin-right: 60px; margin-top: 20px;
}

#Lmenu { /*colonne de gauche */ 
background: #FF6600; 
float: left; width: 
150px; 
}

#Rmenu { /*colonnes de droite */ 
background: #FF6600; 
float: right; 
width: 150px; 
}

#content { /*central */ 
background: #FFCC66; 
margin: 10px 160px; 
}

#footer { background: #CCC; border-top: 1px dotted #DDD; clear: both; padding: 5px 0; text-align: center; }
#template>#footer { padding: 5px 0; }
#footer p { font-size: 85%; }
-->
-- -- -- -- -- -- -- -- -- -- -- -- -- --

je voudrais remplacer l'ancien menu par celui-ci.Mais je n'arrive pas à le placer aux bonnes endroits. À chaque fois et il se met dans les milieux.


CODE SOURCE CSS ET HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.liste, .liste li, .liste a {padding:0px ; margin:0px} /*met à 0 les marges internes et externes de la liste et des liens */ 

.liste {width :15em ; /* largeur de la liste : environs 15 lettres majuscules - voir em */
list-style-type:none} /* suppression des boutons CSS devant les items de la liste */ 

.liste li a {border-left:1.5em solid gray ; /* crée un gros carré gris à gauche des liens non survolés */
background-color:#CCD ; /* couleur de fond des liens non survolés */
display:block; /* force le lien à prendre 100% de la largeur de la liste */ 
padding-left:0.5em ; /* insère un espace entre le texte du lien et le gros carré gris */
color:black ; /* la police des liens non survolés est noire */
text-decoration:none ; /* on suprime le soulignement des liens */
height:1.5em} /* hauteur de chaque ligne. N'est indispensable que pour IE 5.0 et 5.5 */ 

.liste li a:hover { /* style des liens lors du survol */
background-color:black ; /* le fond du lien passe au noir */
color:white ; /* le texte passe au blanc */
border-left-color:red} /* crée un gros carré rouge à gauche des liens survolés */
</style>
</head>

<body>
<ul class="liste"><!-- liste -->
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 4</a></li>
</ul>
</body> 
</html>
Un grand merci par avance à ceux et celles qui voudront bien me donner un coup de pousse.
Cordialement.
Sujet clos
Aller à