Menu vertical CSS et texte sur fond de page.

**HiRoN** · 04/11/2008, 20h42

Je viens de reprendre ton code, et tu avais bel & bien un problème de lien vers le fichiers CSS (ou alors je deviens fou

)

Donc, dans un dossier :
- index.php
- menu.css (au même niveau)

Code Page index.php :

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
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
<!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" />
</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>
 
<div style="background-color:blue; float:left; border:1px solid black;"> 
ici ton contenu blablablablabla blablablablablabla blablablablablablabla blablablabla blabla blablablablablabla blablablablablabla blablablablablablablabla<br />
ici ton contenu blablablablabla blablablablablabla blablablablablablabla blablablabla blabla blablablablablabla blablablablablabla blablablablablablablabla<br />
ici ton contenu blablablablabla blablablablablabla blablablablablablabla blablablabla blabla blablablablablabla blablablablablabla blablablablablablablabla
</div>
 
</body>
</html>

Code menu.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
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
#menu {
width:225px; /*100px*/
text-align:center; /*center*/
float:left;
}
.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*/
}

Testé sous FF3 & IE7, je te joins les captures d'écran que j'obtiens.

**devyan** · 04/11/2008, 21h33

Bonsoir,

Tout semble correcte...

Est-ce que le problème persiste lorsque tu désactive la seconde CSS (varape.css) ?

**dudule0** · 04/11/2008, 22h01

Je suis confus, tout fonctionne !!!
J’ai remis tout en base simple. J’ai modifié les sous dirctory’s et me suis aperçu que la « panne » venait bien de la configuration, mais il y en a de bien meilleures !!! Pas la tête

Je vais donc continuer, mais en progression lente, la conception de mes pages. Si vous le voulez bien je reviendrai poser des questions à un autre stade de la construction par exemple pour les tableaux à la place des textes.
Merci Devyan et HaRon pour l’aide précieuse que vous m’avez apporté.
Cordialement.

**HiRoN** · 04/11/2008, 22h19

Par exemple pour les tableaux à la place des textes.

J'espère que tu utiliseras les tableaux (<table>) à bon escient (affichage de données tabulaires) sinon l'utilisation des <div> est préconisée ! (j'ai moi-même mis du temps à me sortir des tableaux à les avoir trop utilisé (car bien plus simple à mettre en place), ne fais pas la même erreur

)

Menu vertical CSS et texte sur fond de page.

CSS

Discussions similaires

Partager

Partager