Bonjour,
Depuis des lustres, je m'arrache régulièrement les cheveux pour positionner le contenu principal de ma page à droite du premier niveau de mon menu, c'est à dire à 150px du bord gauche du document. J'ai aussi essayé d'utiliser flexbox sans arriver à rien (je n'ai malheureusement pas conserver mes essais) mais je préfère utiliser l'affichage en table. A défaut de le maîtriser mieux, je le maîtrise moins mal.
Fichier html simplifié:Fichier structure.css
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> <link rel="stylesheet" media="all" type="text/css" href="structure.css" /> <!-- Dimensions et positions --> <link rel="stylesheet" media="screen" type="text/css" href="style0.css" /> <!-- Apparence --> </head> <body> <section id="main"> <div id="left"> <nav class="mainNav"> <ul class="col1"> <li><a href="">Accueil</a></li> <li><a href="">Test 1</a></li> <li><a href="">Test 2</a></li> <li><a href=""><img src="../images/user.png" /></a> <ul class="col2"> <li><a href="logout.php">Déconnexion</a></li> <li><a href="editPwd.php">Changer mot de passe</a></li> </ul> </li> </ul> </nav> </div> <article id="right"> <h2>Page d'accueil</h2> </article> </section> </body> </html>Fichier style0.css:
Code css : 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 body, table { font-size:11pt; } #main { display:table; width:100%; } #left { display:table-cell; /*width:150px;*/ width:50px; margin:0; padding: 3px; font-size:.9rem; border:1px solid black; } #right { display:table-cell; /*margin-left:-300px;*/ padding-left:20px; padding-right:20px; border:1px solid black; } nav { padding:3px; }
Code : 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 h1, h2 { text-align: center; } /* Menu selon proposition de jreaux62 La balise nav a été remplacée par la classe mainNav */ .mainNav { width: 450px; } .mainNav ul { width:30%; /* 3 niveaux de menu -> 30% de la largeur pour chaque niveau */ margin: 0; /*padding: 0 5px;*/ border: 1px solid #666; border-bottom: none; } .mainNav ul ul, .mainNav ul ul ul { position: absolute; width:100%; left:100%; /* décalé de 100% à droite du menu parent */ top: -1px; border: 1px solid #666; border-bottom: none; display: none; /* on masque */ z-index:15; } .mainNav ul li, .mainNav ul li ul li, .mainNav ul li ul li ul li { position: relative; list-style: none; border-bottom: 1px solid #666; height: auto; line-height: 20px; } .mainNav li a { text-decoration: none; padding: 4px 8px; display: block; width: auto; height: auto; line-height: 20px; color:maroon; } .mainNav ul li:hover > ul { display: block; /* on affiche */ } .mainNav ul, .mainNav ul ul, .mainNav ul ul ul { background-color: #ddd; }
Partager