Sujet Précédent Sujet Suivant

Mon menu deroulant ne se decalle pas

Résolu/Fermé
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009 - 3 mars 2009 à 09:07
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009 - 3 mars 2009 à 10:47
Bonjour,
Je n'arrive pas a décaler mon menu déroulant

Voila mon code css

#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;/* donne la position par apport au coin de la fenêtre*/
top: 400; /* à 400px du haut du coin de la fenetre*/
left: 400;/* à 400px du gauche du coin de la fenetre*/
}

Je lui demande donc de décaler mon menu de 400px vers le haut et 400px vers la gauche

En fait j'ai pris un tut sur le net et j'essaye de voir comment ca marche en faisant des test. Mais la ne comprend pas car il devrais decaller.

je vous donne le code html de ma page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Jour J</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline41.css" />

</head>

<body>
<!-- fond -->

<div id="rubrique">
<div id="menu">
<img src="image/emeline_rub.jpg" style="float: left">
<ul id="menuDeroulant">
<li>
<a href="#">Partie 1</a>
<ul class="sousMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul>

</li>

<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>

<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>

<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>

<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>

<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>

<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
</ul>



</div>



</body>
</html>

et voici tout mon code css

body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}


#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

/* menu deroulant*/

#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;/* donne la position par apport au coin de la fenêtre*/
top: 400; /* à 400px du haut du coin de la fenetre*/
left: 400;/* à 400px du gauche du coin de la fenetre*/
}

#menuDeroulant li
{
float: left;
margin: 0;
padding: 0;
border: 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 li a:link,
body
{
background-color: #FBE3DE;
}
img {
border:0;
}



#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#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
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

voici ma page test

http://www.sandrineetgwen.fr/emelinepresentation.html
Merci par avance
A voir également:

3 réponses

Réponse 1 / 3
Archeus01 Messages postés 1567 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 447
3 mars 2009 à 10:21
#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;/* donne la position par apport au coin de la fenêtre*/
top: 400px; /* à 400px du haut du coin de la fenetre*/
left: 400px;/* à 400px du gauche du coin de la fenetre*/
}

Met l'unité, ça marche mieux (testé et approuvé by moi...)
0
Réponse 2 / 3
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009
3 mars 2009 à 10:38
ok je vais tester
0
Archeus01 Messages postés 1567 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 447
3 mars 2009 à 10:45
Par unité, j'entends le px après les 400.
0
Réponse 3 / 3
gaya_102 Messages postés 14 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 8 mars 2009
3 mars 2009 à 10:47
merci c'est rectifié et ça marche
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses