HTML ~ développement multimédia

الأربعاء، 4 ديسمبر 2013

HTML

1:54 م

Unknown




<!DOCTYPE html>

2<html>

3    <head>

4        <meta charset="utf-8" />

5        <link rel="stylesheet" href="style.css" />

6        <title>Zozor - Le Site Web</title>

7    </head>

8

9    <body>

10        <header>

11            <h1>Zozor</h1>

12            <h2>Carnets de voyage</h2>

13        </header>

14        

15        <nav>

16            <ul>

17                <li><a href="#">Accueil</a></li>

18                <li><a href="#">Blog</a></li>

19                <li><a href="#">CV</a></li>

20            </ul>

21        </nav>

22        

23        <section>

24            <aside>

25                <h1>À propos de l'auteur</h1>

26                <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>

27            </aside>

28            <article>                

29                <h1>Je suis un grand voyageur</h1>

30                <p>Bla bla bla bla (texte de l'article)</p>

31            </article>

32        </section>

33        

34        <footer>

35            <p>Copyright Zozor - Tous droits réservés

36

37            <a href="#">Me contacter !</a></p>

38        </footer>

39        

40    </body>

41</html>

Je rappelle que, sans CSS, la mise en page ressemble à la figure suivante.

Nous allons essayer de placer le menu à gauche et le reste du texte à droite. Pour cela, nous allons faire flotter le menu à gauche et laisser le reste du texte se placer à sa droite.

Nous voulons que le menu occupe 150 pixels de large. Nous allons aussi rajouter une bordure noire autour du menu et une bordure bleue autour du corps (à la balise <section>) pour bien les distinguer :




1nav

2{

3    float: left;

4    width: 150px;

5    border: 1px solid black;

6}

7

8section

9{

10    border: 1px solid blue;

11}

Voici le résultat à la figure suivante. Ce n'est pas encore tout à fait cela.

Le menu est bien positionné mais collé au texte

Il y a deux défauts (mis à part le fait que c'est encore bien moche) :

Le texte du corps de la page touche la bordure du menu. Il manque une petite marge…
Plus embêtant encore : la suite du texte passe… sous le menu !

On veut bien que le pied de page (« Copyright Zozor ») soit placé en bas sous le menu mais, par contre, on aimerait que tout le corps de page soit constitué d'un seul bloc placé à droite.

Pour résoudre ces deux problèmes d'un seul coup, il faut ajouter une marge extérieure à gauche de notre <section>, marge qui doit être par ailleurs supérieure à la largeur du menu. Si notre menu fait 150 px, nous allons par exemple donner une marge extérieure gauche de 170 px à notre section de page (figure suivante), ici à la ligne 10.




1nav

2{

3    float: left;

4    width: 150px;

5    border: 1px solid black;

6}

7

8section

9{

10    margin-left: 170px;

11    border: 1px solid blue;

12}