NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Une interface extensible, avec un menu fixe

Une interface extensible, avec un menu fixe


Dans ce cours, nous allons apprendre à créer une interface de site, grâce aux CSS, qui a la particularité d'être extensible en fonction de la taille de la fenêtre de vôtre navigateur web.
Au passage, on en profitera pour créer un petit menu qui reste fixé à gauche lorsque vous faites défiler votre page, pratique et original. :)



Le plus simple, c'est que je vous montre déjà le résultat final : hop, par ici!

Bon, c'est pas du grand art, mais le but n'est pas d'en faire, juste de vous apprendre la technique à utiliser pour faire tout ça... À vous par la suite de changer les couleurs, les dimensions de vos blocs, d'ajouter des images, etc... :)

Alors, après une courte analyse, ce qu'il nous faut dans un premier temps, c'est un grand bloc, qui "englobera" le tout. Nous allons l'appeler "global".
Il nous faudra ensuite trois autre blocs : le menu, le header, qui comporte le titre du site, et le contenu de la page.

Alors, commençons comme d'habitude, avec la partie html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <meta http-equiv="Content-Language" content="fr" />
                <title>Titre du site</title>
                <link href="styles.css" rel="stylesheet" type="text/css" media="all" />
        </head>
<body>

<div id="global">
</div>


</body>
</html>


Enregistrez donc cette portion de code sous le nom "index.html" par exemple.
Bien entendu, si vous l'ouvrez depuis votre navigateur web, vous ne verrez rien, et c'est normal! ;-)

On passe au fichier CSS, dans un nouveau document que l'on nommera "styles.css" et que l'on placera dans le même dossier.

Dans la balise body, nous allons donc définir :
- Marges à 0 > margin: 0;
- Couleur de fond en gris foncé > background-color: #313131;
- Couleur du texte en blanc par défaut > color: white;
- Famille de polices par défaut > font-family : sans-serif;
- Taille de la police par défaut > font-size: 0.8em;

Voilà, ça suffit :)
On récapitule, en CSS nous avons donc dans notre fichier :

body {
        margin: 0;
        background-color: #313131;
        color: white;
        font-family: sans-serif;
        font-size: 0.8em; }


Ensuite, on personnalise le bloc "global" :
- On transforme le div en bloc > display: bloc;
- La largeur sera automatique > width: auto;
- Marges à gauche > margin-left: 30px;
- Marges à droite > margin-right: 30px;
- Marges en haut > margin-top: 30px;
- On donne un bord blanc d'un pixel au bloc > border: 1px solid #F3F3F3;
- On donne une couleur d'un gris plus clair au fond > background-color: #5D5D5D;
- Pour un CSS plus valide, on détermine encore la couleur par défaut du texte > color: white;

On récapitule, le CSS donne donc :

#global {
        display: block;
        width: auto;
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 30px;
        border: 1px solid #F3F3F3;
        background-color: #5D5D5D;
        color: white; }


Si vous essayez d'ouvrir le fichier html depuis votre navigateur web, vous verrez pour le moment juste les bords du cadre, blanc sur fond gris foncé...

Juste pour essayer, dans votre fichier html, placez quelques lettres à l'intérieur du div "global" :

<div id="global">ddd
</div>


Rafraîchissez la page de votre navigateur, vous verrez un peu mieux ce que l'on à fait! ;)

Allez, on efface nos petites lettres dans le div "global", et on continue avec ... le menu! :)

Dans le fichier html, nous allons laisser un peu de lignes blanches entre les balises d'ouverture et de fermeture du div "global".
On insert ici notre menu, qui est un bloc également.

<div id="menu">
        <p>Lien rubrique 1</p>
        <p>Lien rubrique 2</p>
        <p>Lien rubrique 3</p>
        <p>Lien rubrique 4</p>
</div>


Côté CSS, nous avons pour le menu :
- Position fixe dans la page lorsque l'on scroll en hauteur > position: fixed;
- Largeur du menu > width: 115px;
- On donne un bord autour du menu > border: 1px solid #F3F3F3;
- On donne un fond encore un poil plus clair au fond du menu > background-color: #707070;
- Toujours pour la standardisation, on re-définit la couleur du texte > color: white;
- On donne des marges de 5px autour du bloc du menu pour qu'il ne colle pas tout à fait au bloc "global" > margin: 5px;

Le code, au propre :

#menu {
        position: fixed;
        width: 115px;
        border: 1px solid #F3F3F3;
        background-color: #707070;
        color: #F3F3F3;
        margin: 5px; }


A ce stade, si on regarde la page depuis un navigateur, le bloc "global" est comme avant, on n'en voit que les bords, et le menu, lui, est déjà en place.

On continue avec le header.
Dans le html, on place sous le bloc "menu", un nouveau bloc "page".

<div id="header">
        <p class="titreheader">Titre du site</p>
</div>


Vous aurez également remarqué un "p class" pour le titre du site, contenu dans le header.
Nous créerons donc également une classe spéciale pour le titre du site dans le header.

Au niveau du CSS, on définit donc pour le bloc "header" :
- Marges à gauche de 130 pixels, pour ne pas passer sous le menu > margin-left: 130px;
- Hauteur de 80 pixels > height: 80px;

La classe "titreheader", elle, est définie comme suit :
- Marges à 0 pour éviter d'avoir un grand espace en haut du titre, qui correspondrai à la hauteur de ligne > margin: 0;
- On aligne au centre > text-align: center;
- On donne là une couleur bleue fluo au titre > color: #07BAF5;
- Pour que notre CSS soit valide, on définit une couleur de fond, qui sera transparent > background-color: transparent;
- Enfin, la taille de la police de ce grand titre > font-size: 4em;

Je récapitule la partie CSS :

#header {
        margin-left: 130px;
        height: 80px; }

.titreheader {
        margin: 0;
        text-align: center;
        color: #07BAF5;
        background-color: transparent;
        font-size: 4em; }


A ce stade, notre fichier html ressemble déjà plus à quelque chose, mais, étant donné qu'il n'y a aucun contenu dans notre page, il nous faut encore lui ajouter un bloc, rempli de texte factice pour avoir une meilleure idée du résultat final.

Dans la page html, nous allons donc, sous le div "header", placer un div "page".
Dans ce div, nous allons placer du texte factice, vous l'avez vu dans le lien vers l'exemple plus haut, j'ai écrit plusieurs fois à la suite "NoShade.net". Faites en de même, écrivez ce que vous voulez, ça n'a aucune importance, par contre, veillez à écrire beaucoup de texte, pour que nous puissions scroller dans la page par la suite. :)

<div id="page">
<p>NoShade.net NoShade.net NoShade.net NoShade.net

(...)

NoShade.net NoShade.net NoShade.net </p>
<p>NoShade.net</p>
<p>NoShade.net</p>


<</div>


Au niveau du CSS, pas grand chose à définir, si ce n'est que l'on souhaiterai, comme pour le header, décaler à gauche de 130 pixels, et à droite, laisser une petite marge de 5 px.
Pas de grand secret, en CSS ça donne :

#page {
        margin-left: 130px;
        margin-right: 5px; }


Voilà, chargez votre page "index.html", et voilà, c'est fini...
Amusez vous à recadrer la taille de la fenêtre de votre navigateur web pour voir que l'interface est bien extenssible, et à scroller dans la page, de haut en bas, pour voir que le menu est bien fixe.

Il vous reste pas mal de choses à faire avant de monter votre super nouveau site sur cette base, comme la personnalisation des liens dans le menu, changer les couleurs, peut-être les espacements, ajouter des images, en fond de page, dans le header, ou je ne sais pas, bref, amusez vous, essayez, c'est comme ça qu'on découvre! ;)

Reste encore un point, la compatibilité avec Internet Explorer, et ça c'est un autre débat... Mais le but ici est d'apprendre les CSS, pas le bricolage nécessaire pour pallier à l'incompétence de Microsoft. :)
Le 22/07/2006 par Legibe

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

puritin a écrit :

bon tutos mais tu aurais expliquer la manière de joindre la feuille de style css et également les deuxx fichiers doivent etre dans un meme repertoire. sinon quelqu'un qui n'a aucune notion xhtml css ne pourra pas en tirer profil facilement.
Merci

Olivier a écrit :

Merci pour cet article qui m'a été très utile.

Olivier a écrit :

Merci pour cet article qui m'a été très utile.

Ajouter un commentaire sur ce tutoriel

CSS, Interface extensible, Largeur totale, Agrandis, Toute la page, Design
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)