Discussion :

[Arbisis]

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 :

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

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

[mullger]

Salut !

Dans ton calque menu centre essaie d'ajouter :

float:left ;
clear:both ;

Dans ton calque menu centre tu peux ajouter :

float:right ;

L'attribut float permet de forcer une calque à se placer à gauche ou à droite d'un autre. Quant à clear, il force un calque à se placer sous un autre (en l'occurence sous ton menu.

En ce qui concerne le fait que lorsque ton menu se déroule ça décale tout, j'ai eu le même problème il n'y a pas longtemps. Je ne me rappelle plus précisément comment je l'avais résolu mais ce que je te conseille c'est d'essayer d'ajouter dans ton calque menu un attribut :

position:absolute ;

ou

position:relative ;

Il me semble que c'est en mettant la position en relatif que ça avait marché mais je ne suis plus tout à fait sûr.

Si jamais cet article explique très bien les bases CSS pour mettre en page un site. Il m'a bien aidé au début : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Bon courage et bonne journée !

[Arbisis]

Merci de ta reponse mais non ca ne marche toujours pas.