Créer un conteneur en css

Dans cette partie, le cadre centrale appellé "conteneur" permet de délimiter la zone de texte afin de ne pas "déborder" sur les autres partie du site .
#cadrecentrale : est le nom que je donne à mon style
min-height : permet de donner une hauteur au cadre . Le cadre s'allongera automatiquement .
margin-height: permet de mettre une marge entre le menu de gauche et le cadre centrale (conteneur) .
margin-right : permet de mettre une marge entre le menu de droite et le cadre centrale (conteneur) .
background-color : permet de donner une couleur de fond au cadre .
dashed : signifie que la bordure sera en pointillé .
Pour les autres partie du code voir création d'un cadre en css, création d'un menu en css, création d'un header en css .
Le code :

<style>
#cadrecentrale {
margin-left:180px;
min-height:150px;
margin-right:180px;
border-left:1px dashed #000000; /* couleur du cadre */
border-right:1px dashed #000000;
border-bottom:1px dashed #000000;
border-top:1px dashed #000000;
background-color:#00FBFF;
}
  </style>

Dans l'exemple ci dessous de création d'un cadre centrale ou conteneur dans une page html ou php, j'ai repris la partie création d'un header en css au quelle je rajoute le cadre centrale ou conteneur ici en bleu pour cette exemple . Ce code reprend donc l'ensemble des pages sur la création d'un site avec du Css .

<html>
<head>
  <meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>mon conteneur en css</title> <style type="text/css"> #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; } .cadredumenugauche { float:left; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; color:#666666; } .cadredumenudroite { float:right; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; color:#666666; } #cadrehaut { height:100px; background-color:#FFCCCC; margin-bottom:10px; } /* cadre du conteneur */ #cadrecentrale { margin-left:180px; min-height:150px; margin-right:180px; border-left:1px dashed #000000; border-right:1px dashed #000000; border-bottom:1px dashed #000000; border-top:1px dashed #000000; background-color:#00FBFF; } </style> </head> <body> <div id="moncadre"> <div id="cadrehaut"></div> <div class="cadredumenugauche"> </div> <div class="cadredumenudroite"> </div> <div id="cadrecentrale"> </div> </div> </body> </html>

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

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