Creation du menu à gauche du corps
2I++
Messages postés
793
Statut
Membre
-
2I++ Messages postés 793 Statut Membre -
2I++ Messages postés 793 Statut Membre -
Bonjour à tous,
Je profite de cette occasion pour vous adresser tres chers CCM, mes meilleurs voeux en cette nouvelles année.
Je voudrais mettre le menu d'un site web à gauche du corps en utilisant float dans mon fichier CSS . Malheureusement, j'y arrive pas. Je voudrais que vous voyez s'il ya des erreurs tant dans le HTML que dans le CSS. Les voici:
code HTML
<div id=" menu ">
<!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
</div>
Code CSS
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
Je profite de cette occasion pour vous adresser tres chers CCM, mes meilleurs voeux en cette nouvelles année.
Je voudrais mettre le menu d'un site web à gauche du corps en utilisant float dans mon fichier CSS . Malheureusement, j'y arrive pas. Je voudrais que vous voyez s'il ya des erreurs tant dans le HTML que dans le CSS. Les voici:
code HTML
<div id=" menu ">
<!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
</div>
Code CSS
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
3 réponses
-
Bonne année a toi aussi, moi je ferai dans se style pour le css :
#menu
{
float: left;
width: xxpx;
height: xxpx;
margin : xpx xpx xpx xpx;
background: #45D166 url("images/motif.png");
border: 2px solid black;
margin-bottom: 20px;
position: absolute;
color: #FFFFFF;
font-family police1: Arial, "Arial Black", "Times New Roman", Times, serif;
} -
Salut.
Voilà des exemples valides et compatibles sur un max. de navigateurs :
http://www.alsacreations.com/static/gabarits/liste.html
@ced3E: Evite de faire des copier/coller de tes scripts ou de ceux que tu trouves sur le Web. Tu ajoutes des propriétés dont 2I++ n'a pas parlé et tu en retires d'autres. -
Merci à tout le monde, je vais essayer respectivement les differentes solutions qui me sont proposées.
Je vous en tiendrai au courant.
