[CSS] Probleme mise en page.
Bonjour,
Je suis une buse en CSS et je suis entreint de faire un site en php et j'esseye de mettre en page avec CSS mais j'ai un probleme.
Voila, j'ai un menu horizontal avec sous menu et en dessous j'ai fait deux blocks en CSS (taille, couleur de fond, etc..) un block central
de 600px et a cote un block (info divers) de 200px, et lorsque un sous menu s'ouvre il baisse l'un des deux blocks.
Deja est il possible de faire en sorte que les sous menus passent par dessus les 2 DIV?
Ensuite, lorsque j'ecris dans un des deux DIV il baisse l'autre.
Je suis sur (enfin j'espere) qu'il doit y avoir une solution toute bete, mais je ne vois pas...
voila mon codes CSS:
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
#menucentre
{
width:799px;
height:700px;
background-color:#FFFFFF;
margin: 0px;
}
#menudroite
{
width:200px;
height:679px;
background-color:#DFE0C5;
margin-left: 799px;
border: 1px solid black;
}
/* /////////////////////////////////////////////////
MENU HORIZONTAL DEROULANT
//////////////////////////////////////////////////*/
#menuDeroulant
{
text-align:center;
background: #6A6458;
width: 1000px;
height: 21px;
list-style-type: none;
margin: 0px;
padding: 0;
border: 0;
}
#menuDeroulant li
{
float: left;
width: 142.8px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #000000;
background: #9FE855;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #7B3B10; }
#menuDeroulant li a:active { background-color: #7B3B10; }
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #000000;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("../mages/fondT.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #9FE855;
}
#menuDeroulant li:hover > .sousMenu { display: block; } |
Tres bon menu en CSS sans js que j'ai trouve sur developpez,
et voici le HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ul id="menuDeroulant">
<li>
<a href="./accueille.php">Accueil</a>
</li>
<li>
<a href="#">Achat</a>
<ul class="sousMenu">
<li><a href="./truc.php">Machin.</a></li>
...
</ul>
<div id="menucentre">
<div id="menudroite">
</div>
</div> |
De plus avec IE, le block "menudroite" passe par dessus le menu alors que l'autre non o_O !!!!
Merci de m'eclairer,
Ewiekie.
Desole pour les accents mais j'ai un qwerty :D .
