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

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.

NoSmoking · 06/12/2011, 20h17

je rajouterais display: inline et non display: inline-block pour #toc li.

rambc · 07/12/2011, 18h58

J'ai essayé sans succès.

NoSmoking · 07/12/2011, 19h30

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 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
<!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>

rambc · 08/12/2011, 10h28

Merci, cela marche un peu mieux mais pas dans tous les cas. Du coup, j'opte pour quelque chose de plus simple.

Bisûnûrs · 08/12/2011, 10h59

Faudrait penser à être plus précis.

rambc · 08/12/2011, 13h06

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

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>

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

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 ?

rambc · 10/12/2011, 23h13

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

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 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...

06/12/2011, 09h35	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Tu peux peut-être essayer de regarder des media queries : http://www.w3.org/TR/css3-mediaqueries/#width
	00

06/12/2011, 14h13	#3
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Bonjour Bisûnûrs. Je connais déjà les media queries. Mon problème est juste celui du placement de mes trois éléments.
	00

06/12/2011, 15h09	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	00

06/12/2011, 18h50	#5
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	J'ai simplifié mon message. Est-ce plus clair ainsi ?
	00

06/12/2011, 19h38	#6
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	00

06/12/2011, 20h17	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	je rajouterais display: inline et non display: inline-block pour #toc li.
	00

07/12/2011, 18h58	#8
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	J'ai essayé sans succès.
	00

08/12/2011, 10h28	#10
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci, cela marche un peu mieux mais pas dans tous les cas. Du coup, j'opte pour quelque chose de plus simple.
	00

08/12/2011, 10h59	#11
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Faudrait penser à être plus précis.
	00

08/12/2011, 13h06	#12
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	En fait, j'aurais aimé avoir le titre et le menu côté à côte.
	00

12/12/2011, 09h18	#16
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	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é ^^
	00

12/12/2011, 21h04	#19
rambc Membre Expert Inscription : décembre 2006 Messages : 2 048 Détails du profil Informations forums : Inscription : décembre 2006 Messages : 2 048 Points : 1 087 Points : 1 087	Merci pour les compléments...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email