Position relative et absolue

Bonjour
j'essaye de construire un menu déroulant dans un blog. Je progresse petit à petit en glanant des infos sur tous les forums mais cette fois ci je suis coincée : impossible de poser correctement les "positions relatives et absolues" pour que mon menu reste stable et passe au dessus du contenu du blog.
Voici mon css :

menuDeroulant
{
 width: 740px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 }
#menuDeroulant ul
{
 position: relative;
} 
#menuDeroulant li
{
 position: relative; 
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 }
#menuDeroulant .sousMenu
{
 list-style-type: none;
 display: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
 float: left;
 width: 120px;
 margin: 0;
 padding: 0;
 border: 0;
 position: relative;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #000;
 background:#ee8546;   
 margin: 0;
 padding: 0px 0px;
 border-right: 1px solid #b8c64d;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #b0b6b7;}
#menuDeroulant li a:active { background-color: #fff;}

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #000;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 118px;
 border-top: 2px solid transparent;
 border-right: 2px solid transparent;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #b0b6b7;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

et l'adresse du blog :http://rie-gradignan.blogspot.com/
Merci de votre aide

Salut,
Ton "#menuDeroulant .sousMenu" doit-être en position absolue. Ou alors les liens "#menuDeroulant .sousMenu li", si ça ne fonctionne pas correctement.

[EDIT]: Quoi que je ne suis pas sûr de ce que je dis, là...
Modifié par Etn (21 Dec 2011 - 22:51)

C'est bien ce que j'essaye de placer...mais dès que je mets une position absolue, plus rien ne bouge et du coup je n'ai plus les sous menus ...

Salut,

Faire un long tour ici << pré-requis + les liens indiqués à voir.

Ensuite il y a des positions partout dans ce code CSS.
Pour un menu déroulant j'utiliserais plutôt javascript ou jquery.
Enfin ceci me laisse perplexe:

a écrit :

#menuDeroulant li:hover > .sousMenu { display: block; }

C'est pour faire quoi?
Modifié par jmlapam (21 Dec 2011 - 23:55)

J'ai déjà lu tous ces liens mais cela n'a pas suffi à m'éclairer. Ce n'est pas comme si j'avais crée un site entièrement de mes petites mains : j'ai utilisé "blogger" qui a généré HTML et CSS et j'essaye maintenant de les adapter comme je peux....si j'ai bien compris, il me semble donc que je dois positionner mon menu par rapport à un élément du html du blog, mais lequel ?
J'ai enlevé toutes les positions dans le CSS et codé "position absolue" dans #menuDeroulant ul uniquement.
C'est OK, cela ne bouge plus , mais les sous menus sont sous le texte du blog.Une idée ?

Pour le code inconnu ci dessous, je me suis largement inspiré de ce tutoriel :
http://marcarea.com/tuto/

Merci de ton aide

Ton tuto, erreur typique:

a écrit :

Date de mise en ligne : 30.10.2003
Dernière modification : 27.01.2006

Il est hors phase !
Bon tu me diras cela ne répond pas à ta question mais faire gaffe aux tutos récupérés sur Google, viens plutôt apprendre ici.
Y a vraiment 3 voies:
-soit tu intégresdu tout fait récent sans pouvoir le modifier comme tu le voudrais réellement parce que tu n'as pas envie de te prendre la tête ou tu n'as pas le temps d'apprendre.
-soit tu apprends au moins la base pour pouvoir modifier des codes simples
-soit tu continues à intégrer des scripts dépassés sans savoir ce que tu fais et

Maintenant pour ton souci, ta page ne donne pas accès à l'ensemble du code CSS donc pour utiliser c'est mort. Difficile de deviner le code, je ne suis pas télépathe
poste le code en question html jusqu'au menu + CSS


EDIT: pour gagner du temps sur du débogage de script dépassé vas plutôt voir ceci:
http://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html
Modifié par jmlapam (22 Dec 2011 - 00:29)

Bonjour

J'avais un peu laissé tomber le menu déroulant puis les conges, les fêtes etc...mais il y a un autre truc qui m'agace...
Le Menu actuel sur mon vrai blog http://le-blog-du-rie.blogspot.com/ (l'autre me servait de brouillon) est généré automatiquement par blogger à partir des pages créées.
Si j'ajoute une septième page (page de plus), il y a un onglet qui se met sous accueil et cet onglet a les bords arrondis alors que les onglets de la première ligne sont rectangulaires.
J'ai essayé de décortiquer le html généré par blogger...mais je ne comprends pas pourquoi il ne génère pas tous les onglets à l'identique. As tu une idée ?
Et comment faire pour que les onglets de la deuxième ligne ne chevauchent pas la première ligne ?
Voici le html blogger qui concerne le menu
/* Tabs
----------------------------------------------- */
.tabs-outer {
position: relative;
background: transparent;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner {
padding: 0;
}

.tabs-inner .section {
margin: 0 35px;
}

*+html body .tabs-inner .widget li {
padding: 1px;
}

.PageList {
border-bottom: 1px solid $(tabs.border.bevel.color);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

background: $(tabs.selected.background.color) none ;
color: $(tabs.selected.text.color);
}

.tabs-inner .widget li a {
margin: 0;
margin-right: 1px;
padding: .65em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
background-color: $(tabs.background.color);

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
-----------------
sachant que :
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 10px Verdana, Geneva, sans-serif"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#ffffff" value="#333333"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#333333"/>
</Group>

<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#ffa183" value="#b8c64d"/>
<Variable name="tabs.background.color" description="Background Color" type="color" default="#ffdfc7" value="#ee8546"/>
<Variable name="tabs.border.bevel.color" description="Bevel Color" type="color" default="#fb5e53" value="#b8c64d"/>
</Group>

Merci de ta réponse et meilleurs voeux pour 2012.

Bonjour,

- Si tu veux que tout ton menu soit sur une seule ligne, tu dois réduire la taille de ta police ou du padding horizontal sur les li.
- Si t'es ok pour qu'il soit sur 2 lignes, sur tes li ajoute un height qui sera la taille réelle (d'après ce que j'ai calculé, il faut un height:21px;), puis mets un petit margin-bottom si tu trouves le menu de la 2e ligne trop collé.

Tous tes liens sont arrondis, on ne le voit pas sur ceux de la 1ere ligne parce qu'ils sont sur le background vert qui est de la même couleur, alors que celui de la 2e ligne chevauche la 1ere, et on voit sa forme grace aux couleurs différentes.
Quand tes liens de la 2e ligne ne chevaucheront plus la 1ere ligne, tu ne verras plus l'arrondi.
Même si le mieux est d'enlever tous les border-radius de ta feuille CSS.

Merci de ta rapidité mais je ne comprends pas ta réponse. J'ai remplacé le vert et le orange par du noir et blanc et on voit bien que les onglets de la première ligne ne sont pas arrondis. J'aimerais justement avoir deux lignes d'onglets arrondis et qui ne se chevauchent pas.
J'ai mis un height et un margin-bottom mais cela ne change rien...


.PageList {
border-bottom: 1px solid $(tabs.border.bevel.color);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

background: $(tabs.selected.background.color) none ;
color: $(tabs.selected.text.color);
}

.tabs-inner .widget li a {
margin: 0;
margin-right: 1px;
margin-bottom: 5px;
height : 21px;
padding: .65em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
background-color: $(tabs.background.color);

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

Tu devais ajouter ces propriétés sur li et non sur a.
Mais sinon le plus simple, c'est de mettre un display:block sur tes a et a:hover.

Super, ça marche ! merci...!