Créer un menu en css

.cadredumenugauche : le nom que je donne à moncadre .
float : permet de donner le "flottement" du menu à l'interieure de mon cadre qui est #moncadre .
left ou right : gauche ou droite .
color : couleur d'ecriture à l'interieure du menu .
Pour les autres partie du code voir création d'un cadre en css .

Le code :  

<style>
.cadredumenugauche {
float:left;
text-align:left;
width:150px;
padding:10px;
background-color:#FBFBFF;
border:1px solid #000000; /* cadre menu */
color:#666666;
}
  </style>

Dans l'exemple ci dessous de création d'un menu en css dans une page html ou php, j'ai repris la partie création d'un cadre en css auquelle j'ai rajouté une menu gauche et un menu droite .

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr"> <title>exemple d'un menu en css</title> <style> /* ici le cadre */ #moncadre { width:800px; margin:auto; padding:10px; background-color:#FFFF00; border-left:1px solid #000000; /* couleur du cadre */ border-right:1px solid #000000; border-bottom:1px solid #000000; border-top:1px solid #000000; } /* ici le menu de gauche */ .cadredumenugauche { float:left; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; color:#666666; } /* ici le menu de droite */ .cadredumenudroite { float:right; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; color:#666666; } </style> </head> <body> <div id="moncadre"> <div class="cadredumenugauche">menu gauche</div> <div class="cadredumenudroite"> menu droite</div> </div> </body> </html>

Pour utiliser les styles il suffit de les appeller de cette façon dans un document :
 <div class="cadredumenugauche">ici mon texte</div>
 <div class="cadredumenudroite">ici mon texte</div>


Voir/déposer un commentaire (0) | Signaler un problème