Placement pour un menu simple

Version imprimable

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

Code:

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:

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>

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

Tu peux peut-être essayer de regarder des media queries :
http://www.w3.org/TR/css3-mediaqueries/#width
06/12/2011, 14h13
rambc

Bonjour Bisûnûrs.

Je connais déjà les media queries. Mon problème est juste celui du placement de mes trois éléments.
06/12/2011, 15h09
Bisûnûrs

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.
06/12/2011, 18h50
rambc

J'ai simplifié mon message. Est-ce plus clair ainsi ?
06/12/2011, 19h38
Bisûnûrs

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.
06/12/2011, 20h17
NoSmoking

je rajouterais display: inline et non display: inline-block pour #toc li.
07/12/2011, 18h58
rambc

J'ai essayé sans succès.

Citation:

Envoyé par rambc

J'ai essayé sans succès.

je serais curieux de savoir ce que tu as essayé

simple mise en application de ce qui est écrit

Code:

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
<!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{
   float:right;
   margin: 0;
}
#toc li{
  margin: 0% 0% 0% 12px; /* top , right, bottom , left */
  display: inline;
}
</style>
</head>
<body>
    <div id="toc">
        <h1 style="float:left">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" style="clear:both">
        Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
        bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, 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>

08/12/2011, 10h28
rambc

Merci, cela marche un peu mieux mais pas dans tous les cas. Du coup, j'opte pour quelque chose de plus simple.
08/12/2011, 10h59
Bisûnûrs

Faudrait penser à être plus précis.
08/12/2011, 13h06
rambc

En fait, j'aurais aimé avoir le titre et le menu côté à côte.

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:

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>

08/12/2011, 14h14
Bisûnûrs

Citation:

Envoyé par rambc

En fait, j'aurais aimé avoir le titre et le menu côté à côte.

Sauf que c'est ce que fait le code fourni plus haut. Donc quand tu dis que ça ne fonctionne pas, c'est dans quelle configuration ?

Un grand merci à toi Emyleen !

Citation:

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:

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:

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 ?

12/12/2011, 09h18
Emyleen

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é ^^

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:

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)

12/12/2011, 10h55
Macmillenium
Citation:

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:

1 2 3 4 5 <hgroup> <h1>Mon titre</h1> <h2>Mon sous-titre</h2> </hgroup>
Seul le h1 apparait dans l'outline.
12/12/2011, 21h04
rambc

Merci pour les compléments...