CSSdebutant.com

Structure d'une page en CSS
CSS Débutant .com

Structure d'une page en CSS

Comment constuir une un site en CSS

Voici la base d'une page en CSS : les fondations :-)

Partons de deux fichiers :
  • la page de votre site : index.html
  • Le fichier CSS : default.css

Permière étape : le code HTML
Pour commencer, créer une page "index.html", à la racine du site avec ce code HTML :
</font> 
<body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<div id="navbar"> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left"> ...column left content... </div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
									</body>
Explication visuel : (qui parle d'elle meme normalement)


Etape suivante: Votre fichier CSS
Enfin, un petit copier/coller dans votre fichier default.css

L'élément #container fait dans ce code 780 pixels: Chaque éléments placés dans #container doit faire moins de 780 pixels! 
/* ------------------------------
Tutorial de cssdebutant.com (merci de laisser ce commentaire)
------------------------------ */

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, permet de faire deux colonne dans #container
*/

div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
Résultats !
Voici le résultat visuel :



Et voila :-)
  

Voulez-vous laisser une note ou un commentaire ?

Donnez votre avis sur ce contenu :
Votes: 4.2 (99%) 44 votes