Structure d'une page HTML en CSS (feuille de style)

| Vous êtes sur la page : structure une page css | Favoris :

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 :

<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 même 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 :

CSS Débutant .com

» Structure d'une page en CSS

Structure d'une page en CSS

Comment constuir une un site en CSS

Débuter en CSS :

Comprendre et coder en CSS

Tutoriels

Liens