Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter
Menu vertical CSS et texte sur fond de page.
Bonjour à tous,
En créant mon site perso en CSS, j'ai un problème.
Sur un fond de page, J'ai mis un menu vertical à gauche en css (feuille de style externe).
Je dois maintenant insérer une page de texte à droite du menu vertical, sur le fond de page. Je n'y arrive pas. Le texte se mélange au menu...
Pouvez-vous m'aider. Je suis un débutant.
Je peux joindre la feuille de style et le code html si vous me le demandez
Salut,
Qu'entends tu par "mélange" ?
peux-tu joindre une copie d'écran (par exemple)
Yan.
Bonsoir devyan,
Le texte (une page A4)que je tente de coller se met entre les blocks du menu vertical et ne s'insère pas à droite de ce même menu. As-tu une solution?
Merci.
Salut,
Sans la totalité du code (xHTML & CSS), il sera dur de t'aider.
Le mieu serait de fournir ton code, ou une page en ligne (voir un schéma de ce que tu souhaite obtenir).
Il y a de nombreuses façons de faire cela...
Hiron,
Voici les codes xHTML et CSS.
Voici la feuille de style menu.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mapage</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="stylesheet" type="text/css" href="varape.css" />
</head>
<body>
<div id="menu">
<div class="box">
<a href="#nogo">Accueil
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Votre page de réception </span> </a> </div>
<div class="box">
<a href="#nogo">Nous connaître
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Nos loisirs, nos activités. </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
<div class="box">
<a href="#nogo">TitrePage
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Aide Page </span> </a> </div>
</div>
</body>
</html>
J'ai collé mon texte aprés BODY...#menu {
width:225px; /*100px*/
text-align:center; /*center*/
position:relative; /*relative*/
position:fixed;
/*margin:2em auto; */
}
.box {
position:relative; /*relative*/
}
#menu a, #menu a:visited { /*configuration des blocks menu*/
/*text-decoration:none;*/
background-color:#E8312D;
color:#FFFFFF; /*ffff*/
display:block;
width:200px; /*88px*/
height:28px; /*16px*/
font-weight: bold; /*test gras*/
font-size:16px; /*14px*/
border:0px solid #fff; /*1px solid #fff (espacement vertical entre les blocks)*/
padding: 12px; /*5px*/
}
* html #menu a, * html #menu a:visited {
width: 225px; /*200px*/
height:28px; /*28px*/
width:88px; /*88px*/
height:28px; /*16px*/
}
#menu a span { /* blocks secondaires*/
display:none;
}
#menu a:hover { /*encadrement des block au survol*/
border:1px solid #ccc; /*000*/
}
#menu a:hover span.left, /* boutons de'encarement de texte*/
#menu a:hover span.right { /* boutons de'encarement de texte*/
display:block; /*block*/
position:absolute; /*absolute*/
height:0; /*0*/
width:0; /*0*/
/*overflow:hidden; /*hidden*/
border-top:8px solid #fff; /*#fff */
border-bottom:8px solid #fff; /*#fff */
}
#menu a:hover span.left { /* espacement horizontal de la gauche desboutons d'encarement du texte*/
left:13px; /*5px*/
top:15px; /*5px*/
border-left:8px solid #c00;
}
#menu a:hover span.right { /* espacement horizontal de la droite des boutons d'encarement du texte*/
left:210px; /*87px*/
top:15px; /*5px*/
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px; /*8px*/
height:20px; /*16px*/
w\idth:0; /*0px*/
h\eight:0; /*opx*/
}
#menu a:hover span.lk { /*définition des blocks explication*/
display:block;
position:absolute;
left:225px; /*120px*/
top:0; /*0px*/
padding:10px; /* 5px*/
width:250px; /*100px*/
background-color:#CCFFFF; /*définition couleur de fond blocks explication*/
/*background-color:#fff; /*fff*/
color:#000; /*000*/
border:1px solid #E8312D; /*1px solid #234*/
}
xhtml
Qu'ai-je oublié ?
Salut,
Je pense que ton problème vient du fait que le menu a "position:fixed".
Il suffit pour éviter le recouvrement de placer le reste du contenu de la page dans un cadre (DIV) ayant une marge (margin ou padding selon ton cas) à gauche de la largeur du menu. (dans ton cas au moins 225px)
Merci de ta réponse yan mais je ne comprends pas tout.Envoyé par devyan
Te serait-il possible de m'écrire le code pour faire un cadre (DIV) avec une marge de 225px, afin que je puisse intégrer mon texte à droite du menu
Je suis un débutant et j'en suis encore à, seulement, modifier des codes déjà constitués avec quelques bouquins.
Bonjour,
Il y plusieurs possibilités pour obtenir le même résultat... mais ce dont je parlais correspond à ajouter ce qui suit après le menu :
Pour te former, les cours et tutoriels pour apprendre CSS : http://css.developpez.com/cours/
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
Après avoir appliqué la modification <div style="margin-left:225px;"> ici ton contenu </div>le résultat est bien. Il n’y a plus de chevauchement. Néanmoins les positions sont incorrectes.
Je m’explique :
1°/ Le texte est bien à droite de l’écran. C’est parfait !
2°/ Un espace de 225px est bien sur la gauche de l’écran, mais le menu CSS ce trouve au dessous de cet espace.
Que puis-je faire pour que le menu et le texte soient côte à côte ?
2 possibilités :
1/ placer le code html du menu après de contenu dans le source. (gestion automatique des "couches")
2/ utiliser la propriété CSS "z-index" pour placer le menu au dessus du reste.
Merci de l'info.
Pas de changement aprés avoir placé z-index:1; au début du code CSS menu. Je dois ne pas l'avoir placé en bonne position.
Ou exactement dois-je placer le z-index:1;?
Salut,
Chez moi en faisant ceci, tout fonctionne correctement (si j'ai bien saisi ce que tu voulais faire) :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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
Donc, j'ai supprimé (dont je n'ai pas vraiment compris l'utilisation) :
- position:relative;
- position:fixed;
Et j'ai mis le menu en float:left;
Idem pour le div qui contiendra le contenu float:left + marging-left.
Testé sous FF3 & IE7 qui me donne le même résultat.
Dans mon cas de figure, null besoin, les sous-menu passent bien par dessus le div container. Sous quel navigateur fais-tu tes tests ?Ou exactement dois-je placer le z-index:1;?
Dans ton cas il faut que le menu ai un z-index supérieur à celui du contenu.
Par exemple :
Sinon, comme le précise HiRoN, il y a d'utres solutions qui permettent d'avoir un rendu similaire.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
HiRoN en donne une, une autre consiste à placer le <div id="menu"> toujours en bas de source html. (dans ce dernier cas, il se trouveras automatiquement au dessus)
Bonjour,
Je viens d'appliquer les exemples que vous avez bien voulu me proposer.
HiRoN j'ai recopié la totalité des codes et il se trouve que le texte est maintenant sous le menu !!!
Par contre le menu est bien à sa place en haut à gauche de l'écran.
Je voudrais que le texte puisse être intégré à droite du menu.
devyan j'ai intégré
Et le texte se trouve à droite du menu et un peu au-dessus.
Code css : Sélectionner tout - Visualiser dans une fenêtre à part #menu {z-ndex: 1;} et #menu a, # a:visited{z-index: 0;}
Que puis-je faire
As-tu tenté de rajouter un margin-left (de la largeur du menu voir un peu +) sur le div qui aura le contenu ?HiRoN j'ai recopié la totalité des codes et il se trouve que le texte est maintenant sous le menu !!!
Sous quel navigateur testes-tu ?
Heu... expliquer plus précisément ce que tu entends par "un peu au-dessus" par exempleEt le texte se trouve à droite du menu et un peu au-dessus.
Que puis-je faire
Me revoici avec un peu de retard.
Je viens de tout recommencer avec uniquement le codes que tu m'as donné HiRon.
1°/ Le menu est maintenant une série de lignes comportant seulement les titres des boutons. La couleur rouge a disparu avec la mise en forme
2°/ Le texte bla bla bla se trouve maintenant sous le menu...
Je pense que je ne vais pas y arriver.
Je travaille avec FF3, IE6 et IE7. Help !!!
Un dessin étant bien souvent plus clair que de longs discours serait-il possible d'avoir une petite copie d'écran de ton rendu "un peu au dessus" ainsi que les CSS et HTML associés ?
Je suis assez étonné que cela ne donnes pas le même rendu alors que tu testes sous FF3 & IE7 (donc les mêmes navigateurs que moi).
Quand tu dis :
Es-tu sûr que le fichier CSS est bien "linké" à ta page ? (car cela fonctionné correctement lorsque j'ai repris ton code, je l'ai moi-même visualisé).La couleur rouge a disparu avec la mise en forme
Le mieu serait de donner à nouveau la totalité de ton code (x)HTML & CSS...
Merci de votre réponse rapide Devyan et HiRon,
Voici une copie d'écran FF3
Accueil Votre page de réception
Nous connaître Nos loisirs, nos activités.
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
TitrePage Aide Page
ici ton contenu blablablablabla blablablablablabla blablablablablablabla blablablabla blabla blablablablablabla blablablablablabla blablablablablablablabla
ici ton contenu blablablablabla blablablablablabla blablablablablablabla blablablabla blabla blablablablablabla blablablablablabla blablablablablablablabla
ici ton contenu blablablablabla blablablablablabla blablablablablablabla blablablabla blabla blablablablablabla blablablablablabla blablablablablablablabla
Et voici les codes:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
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
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Répondre avec citation
Partager