Bonjour,
J'ai une page model en Css de la presentation du site et un menu deroulant en css que je voudrai mettre dans
<div id="menu"><?php require("modele.php"); ?></div>
mais lorsque je fait ceci le menu ce retrouve a l'entete du site tout en haut au lieu de ce trouver a sont emplacement prevu.
Je pense que ma page model en css parasite le menu deroulant en css ce qui me décale mon menu dans l'entete.
Quelqu'un peut il m'aider, merci d'avance, cordialement
Ma page modele de style css
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
| <title>Document sans titre</title>
<style type="text/css">
#entete {
height: 200px;
width: 1024px;
}
#infos {
height: 400px;
width: 1024px;
}
#menu {
height: 50px;
width: 1024px;
}
#contenu {
width: 1024px;
}
#pied {
height: 35px;
width: 1024px;
}
#conteneur {
width: 1024px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="entete"><img src="../commun/@maison-1-468x60.gif" alt="" width="1024" height="150" /></div>
<div id="infos"><?php require("info-maison.php"); ?></div>
<div id="menu"><?php require("modele.php"); ?></div>
<div id="contenu">id "contenu"</div>
<div id="pied"><?php require("pied.php3"); ?></div>
</body>
</html> |
Menu deroulant en Css
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Testos</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="menu01.css" title="default" media="screen" /></head>
<body>
<ul id="menuDeroulant">
<li>
<a href="#">Accueil</a>
<ul class="sousMenu">
<li><a href="/maison/index.php" title="Accueil ">Accueil general</a></li>
<li><a href="/maison/N4/index.php" title="Accueil N4">Accueil N4</a></li>
<li><a href="index.php?page=sommaire" title="sommaire ">Sommaire N4</a></li>
</ul>
</li>
<li>
<a href="#">Domotique</a>
<ul class="sousMenu">
<li><a href="index.php?page=telecom1" title="telecom1 ">Telecommande HR10</a></li>
<li><a href="index.php?page=telecom2" title="telecom2">Telecommande HR10 ( Avec suivi des touches )</a></li>
<li><a href="index.php?page=X10-executer" title="x10executer">Suivie des commandes X10 executer</a></li>
<li><a href="index.php?page=actpro2" title="Télécommande2 ">ActiveHome Pro PHP (Sélection par nom)</a></li>
<li><a href="index.php?page=x10" title="Controle X10 par bouton">Controle X10 par bouton (Sans son)</a></li>
<li><a href="index.php?page=x10son" title="Controle X10 par bouton">Controle X10 par bouton (Avec son)</a></li>
<li><a href="index.php?page=tableaucmumodules" title="Controle X10 par bouton">Tableau des C.M.U des modules de la maison</a></li>
<li><a href="index.php?page=manuel-modules-X10" title="Les Modules X10">Les Modules X10</a></li>
<li><a href="http://fr.wikipedia.org/wiki/X10_(informatique)" title="Les inconvenient et avantage de la domotique X10">Les inconvenient et avantage de la domotique X10 </a></li>
</ul>
</li>
<li>
<a href="#">Gestion</a>
<ul class="sousMenu">
<li><a href="index.php?page=listes-courses" title="liste des courses ">Liste de course</a></li>
<li><a href="index.php?page=liste-commission" title="liste-commission" >Liste de course MySql</a></li>
<li><a href="index.php?page=liste-commission1lecture" title="liste-commission1lecture" >Modifer liste commision 1</a></li>
<li><a href="index.php?page=agenda-telephonique" title="agenda-telephonique" >Annuaire téléphonique</a></li>
<li><a href="index.php?page=comparateur-prix" title="comparateur-prix" >Comparateur de prix</a></li>
<li><a href="index.php?page=bouteil-gaz" title="comparateur-prix" >Bouteille de gaz</a></li>
<li><a href="index.php?page=EDF" title="Compteur EDF" >Compteur EDF</a></li>
<li><a href="index.php?page=HC-HP" title="HC-HP ">Les heures creuses et pleinnes </a></li>
<li><a href="index.php?page=quotidien" title="quotidien ">Les quotidiens de la maison</a></li>
<li><a href="index.php?page=salomer" title="Nabaztag ">Lapin nabaztag salomer</a></li>
<li><a href="liens">Agenda</a></li>
<li><a href="index.php?page=prog" title="liste programmes ">Liste des programmes</a></li>
<li><a href="index.php?page=liens" title="liens pc">Liens pour Pc et Wap</a></li>
<li><a href="index.php?page=cam" title="Les camèras">Les caméras</a></li>
<li><a href="index.php?page=media" title="media">Mèdia</a></li>
<li><a href="liens">Arrosage Dnai8 II </a></li>
<li><a href="liens">Niveau de la cuve à foil</a></li>
<li><a href="liens">Machine à laver</a></li>
<li><a href="liens">Consomation eau</a></li>
<li><a href="index.php?page=appli">Apllications</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul class="sousMenu">
<li><a href="index.php?page=mail">Envoyer un mail</a></li>
<li><a href="index.php?page=mail-webmaster">Contacter le webmaster</a></li>
</ul>
</li>
</ul>
</body>
</html> |
CSS du menu deroulant includé
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
|
body {
font: 11px verdana, sans-serif;
background: #AFA99B url("fond.jpg") top left no-repeat;
margin: 0;
padding: 0;
}
/* ------------------------------------------------------------------------------------
Menu
------------------------------------------------------------------------------------ */
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #6A6458;
width: 644px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#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;
border: 1px solid black;
background-color: #000;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#menuDeroulant li:hover > .sousMenu { display: block; } |
page modele en css avec menu deroulant horizontal en css ce parasite
Répondre avec citation
Partager