Les menus
Le grand avantage du CSS est qu'il permet de faire un menu sans les frames, celles-ci n'étant pas supportées par certains browsers et empêchant de surcroît de mettre des effets spéciaux sur la page d'index puisqu'il n'y a pas de balise <BODY>.
Voici comment faire:

<DIV id="contenu">
contenu de la page principale</DIV>
<DIV id="menu">
<A HREF="1.html">Lien 1</A>
<A HREF="2.html">Lien 2</A>
<A HREF="3.html">Lien 3</A>
</DIV>

Voici maintenant le code CSS à placer entre les balises <HEAD> et </HEAD>

#contenu{
float:right;
width: 75%;
}
#menu {
float:left;
 margin-right: 2%;
 width:22%;
 margin-left:1%;
 border: 1px solid #000000;
background:"#0131B4";
}

Voici le résultat:
Exemple sur les menus

Les boutons

Maintenant que nous avons bien placé notre menu, peut-être serait-il mieux de mettre des boutons plutôt que de vulgaires liens. Voici notre exemple un peu modifié:

#contenu{
float:right;
width: 75%;
}
#menu {
float:left;
margin-right: 2%;
width:22%;
margin-left:1%;
border: 1px solid #000000;
background:"#0131B4";
}</p>Et dans <BODY>:<p id="code">
<DIV id="menu">
<DIV
STYLE="
border-top: 2 solid red;
border-left:2 solid red;
border-bottom:2 solid red;
border-right:2 solid red;
background-color:yellow;
text-align: center;
width:72;
height:21">
<A HREF="1.html"
style="text-decoration:none;
color:green;
font-size:10pt;
font-family: Arial;
font-weight: bold">
Nom</A>
</DIV>
</DIV>

Exemple de bouton

:les propriétés des liens DOIVENT être dans cet ordre sinon votre bouton ne fonctionnera pas.



précédent   suivant

Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.3016 secondes.
Retour en haut de la page
Imprimer cette page