Placement pour un menu simple [Débutant(e)]

**rambc** · 05/12/2011, 22h46

Bonsoir,
dans le code donné plus bas je voudrais obtenir un placement du type suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
Quel est le titre de ce site ?         Ce site  |  Au Lycée  |  Programmer  |  Plus de Maths  |  Rédiger des Maths
 
Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
...

Comment faire ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Un exemple de mise en forme d'un menu</title>
 
        <style type="text/css">
#toc ul{
    margin: 0% 0% 0% 0%; /* top , right, bottom , left */
}
 
#toc li{
    margin: 0% 0% 0% 12px; /* top , right, bottom , left */
    display: inline-block;
}
        </style>
    </head>
 
    <body>
        <div id="toc">
            <h1>Quel est le titre de ce site ?</h1>
 
            <ul id="menu">
                <li>
                    <a href="#">Ce site</a>
                </li>
                <li>
                    <a href="#">Au Lycée</a>
                </li>
                <li>
                    <a href="#">Programmer</a>
                </li>
                <li>
                    <a href="#">Plus de Maths</a>
                </li>
                <li>
                    <a href="#">Rédiger des Maths</a>
                </li>
            </ul>
        </div> <!-- toc -->
 
        <div id="content">
            Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
            bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,...
        </div> <!-- content -->
    </body>
</html>

**Bisûnûrs** · 06/12/2011, 09h35

Tu peux peut-être essayer de regarder des media queries :
http://www.w3.org/TR/css3-mediaqueries/#width

**rambc** · 06/12/2011, 14h13

Bonjour Bisûnûrs.

Je connais déjà les media queries. Mon problème est juste celui du placement de mes trois éléments.

**Bisûnûrs** · 06/12/2011, 15h09

Le problème c'est que tu dis ce que tu ne veux pas que ça fasse, et non le comportement que tu souhaites avoir. A partir de là on peut te proposer tout et surtout n'importe quoi. Donc il te faut définir le comportement de ta page.

**rambc** · 06/12/2011, 18h50

J'ai simplifié mon message. Est-ce plus clair ainsi ?

**Bisûnûrs** · 06/12/2011, 19h38

Oui, alors un float:left sur le h1 et un float:right sur le menu ainsi qu'un clear:both sur le content devraient faire l'affaire.

**Emyleen** · 08/12/2011, 14h03

Voila voila

Mais tu devrais t'intéresser au CSS et HTML5, tu verras c'est très facile et très intéressant ^^

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un exemple de mise en forme d'un menu</title>
 
<style type="text/css">
body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        font-weight: normal;
}
header{
        float: left;
    height: 50px;
    width: 250px;
}
header h1 {
        font-weight: bold;
        color: #C00;
        font-size: 16px;
}
nav{
        float: right;
    height: 25px;
    margin-top: 15px;
}
nav a {
        display: inline-block;
        padding: 0px 10px;
        border-right: 1px solid black;
}
nav a:last-of-type {
        border-right: none;
}
article{
        clear: both;
}
article hgroup h2 {
        font-weight: bold;
        font-size: 14px;
        color: #33F;
}
footer{
}
</style>
</head>
 
<body>
	<header>
    	<h1>Quel est le titre de ce site ?</h1>
    </header>
    <nav>
        <a href="#">Ce site</a>
        <a href="#">Au Lycée</a>
        <a href="#">Programmer</a>
        <a href="#">Plus de Maths</a>
        <a href="#">Rédiger des Maths</a>
    </nav>
    <article>
    	<hgroup>
        	<h2>Titre de mon paragraphe</h2>
        </hgroup>
    	<p>
        Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,...</p>
    </article>
    <footer>
    </footer>
</body>
</html>

**rambc** · 10/12/2011, 23h13

Un grand merci à toi Emyleen !

Envoyé par Emyleen

Mais tu devrais t'intéresser au CSS et HTML5, tu verras c'est très facile et très intéressant ^^

Je suis en train de m'y mettre. Cela fait un moment que je suis convaincu du sémantique et j'avoue que le HTML5 est un très bon commencement !

Par contre ne devrait-on pas utiliser

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <article>
    	<h1>Titre de mon paragraphe</h1>
    	<p>
        Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,...</p>
    </article>

au lieu de ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <article>
    	<hgroup>
        	<h2>Titre de mon paragraphe</h2>
        </hgroup>
    	<p>
        Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,...</p>
    </article>

avec les petites modifications CSS correspondantes (je sais faire) ?

Je dis cela car je viens de lire que hgroup serait par exemple utile pour mettre un titre avec un sous-titre, et aussi que les h1 des articles ou sections est différents de celui du corps du texte ?

**Emyleen** · 12/12/2011, 09h18

De rien ^^

Disons que pour un h1 ce n'est pas approprié, en effet le h1 sera le titre de ta page c'est à dire le premier truc repéré par les moteurs de recherche en ce qui concerne le contenu. Donc il vaut mieux n'avoir qu'un seul h1 par page et plusieurs h2.

Oui pour le hgroupe, comme son nom l'indique (ou pas XD) c'est un groupe de titre, tu n'es pas obligé de le mettre si tu n'as qu'un seul titre

Par contre tu peux avoir plusieurs bloc "article"

Ensuite pour ce qui est des sections c'est très utile pour paginer en vue d'une impression

Mais je n'utilise pas trop les sections, je ne voudrais pas te dire de bétises

le mieux c'est de fouiller, d'apprendre, de comprendre et d'avancer par toi même ^^

En tout cas je sui contente de t'avoir aidé ^^

**Bisûnûrs** · 12/12/2011, 09h41

En fait, en HTML5 h1 peut être utilisé plusieurs fois, à chaque nouvelle section/article, qui sont censé avoir une hiérarchie indépendante, donc peuvent eux-mêmes contenir un header et/ou un footer.

Dans l'exemple plus haut, j'aurais fait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<section>
   <header>
      <h1>Titre de mon paragraphe</h1>
   </header>
   <p>
      Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
      bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
      bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
      bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
      bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
      bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla
   </p>
</section>

(section ou article en fonction de la représentation de ton contenu)

**Macmillenium** · 12/12/2011, 10h55

Envoyé par Emyleen

Oui pour le hgroupe, comme son nom l'indique (ou pas XD) c'est un groupe de titre, tu n'es pas obligé de le mettre si tu n'as qu'un seul titre

Disons que hgroup sert principalement à retirer les sous-titres de l'outline (plan du document).

En gros, si tu écris ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<hgroup>
  <h1>Mon titre</h1>
  <h2>Mon sous-titre</h2>
</hgroup>

Seul le h1 apparait dans l'outline.

**rambc** · 12/12/2011, 21h04

Merci pour les compléments...

Placement pour un menu simple [Débutant(e)] [CSS 3]

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager