Creer un header en css

#cadrehaut : le nom que je donne à mon cadre du haut qui me sert de header.
height:100px : hauteur du cadre haut .
margin-bottom : marge entre le bas du cadre haut (header) et le début du menu
Pour les autres partie du code voir création d'un cadre en css ou création d'un menu en css
Le code :

<style>
#cadrehaut {
height:100px;
background-color:#FFCCCC;
margin-bottom:10px;
}
  </style>

Dans l'exemple ci dessous de création d'un cadre haut ou header dans une page html ou php, j'ai repris la partie création d'un menu en css au quelle je rajoute le cadre haut ou header ici en rose pour cette exemple . A ce stade nous avons une bonne base dans le design du site .

<!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 cadre haut */ #cadrehaut { height:100px; background-color:#FFCCCC; margin-bottom:10px; } /* 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 id="cadrehaut">texte du cadre du haut </div> <div class="cadredumenugauche">texte du menu gauche </div> <div class="cadredumenudroite">texte du menu droite </div> Texte de la partie centrale </div> </body> </html>

Pour utiliser le style il suffit de l'appeler de cette façon dans un document :
<div id="cadrehaut">ici mon texte</div>


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