[Résolu] Menu horizontal "une ligne"

Bonjour à tous,
j'utilise le 'menu déroulant sur une ligne' expliqué en tutorial par Raphaël pour l'ébauche de ce site.
A noter que celui-ci est basé pour des résolutions égales ou supérieures au 1024*768.

Mon problème est le suivant (hormis les nombreuses incompatibilités avec ie), j'aurais voulu :

1 - pouvoir positionner les sous-menus centrés par rapport à la barre des menus et ceci quelque soit la résolution.

2 - pouvoir redimensionner chaque sous-menu afin de placer en fond et au survol une image.

Mais, problèmes :

1 - les sous-menus sont positionnés en 'absolute' (les balises <dd>) et conservent donc une position non relative ce qui gêne pour un centrage homogène en fonction de la résolution.

2 - mes liens de sous-menus sont en inline (normal me direz vous), ce qui empêche ce genre de manip (j'ai bien tenté en faisant du block couplé avec du float mais sans grand résultat) ... disons que j'arrive à coller des images mais le positionnement c'est pas trop ça.

voilà un bref test avec les balises a en block et placées en float ici ... testé en 1280*1024 pour le 1er menu, hormis le gif de fond qui ne s'affiche pas (sûrement à cause de son animation ... je ne sais pas), mais qui ne tient pas le changement de résolution.

Voilà grossomodo les problèmes sur lesquels je fais appel à votre aide.
Merci

Je conviens que la solution est peut être évidente, mais je vous assure que j'ai véritablement essayé et que la solution échappe à mon maigre savoir.
Je conviens également que mes explications peuvent être somme toute assez floues alors n'hésitez pas à questionner.
Modifié par RaGe (08 Nov 2006 - 21:57)

bonsoir ,

un mauvais calcul de la position , du a une class qui trainer a.sm1 ... a enlever a mon avis.

rajouter #sousmenu5 a , a la petite famille et tout va rentrer dans l'ordre.
Quand ça coince , vaut mieux laisser passer un moment et de revnir dessus avec les idées plus claires

#sousmenu1, #sousmenu2, #sousmenu3, #sousmenu4 ,  #sousmenu5  {
position: absolute;
left: 260px;
font-size: 0.9em;
width: 1020px;
}

#sousmenu1 a, #sousmenu2 a, #sousmenu3 a, #sousmenu4 a , #sousmenu5 a{
text-align:leftt;
color: #ff1800;
float: left;
width: 100px;
background: url(images/sm.gif) left no-repeat;
}



#sousmenu5 a{
color: gray;
}

bonne nuit

Merci gcyrillus d'avoir répondu aussi rapidement
Et je suis tout à fait d'accord sur le fait qu'il est bénéfique de faire des breaks quand ça coince.

Par contre, sans vouloir t'offenser le moins du monde, je pense que tu n'as pas saisi le fond de mon problème (et ceci certainement à cause de mon explication assez vague) ... je vais tâcher de mieux définir tout ça :

comme on peut le voir, la page globale est centrée et de largeur fixe (1020px).
Tout est symétrique par rapport au centre de la page.

Ce que je recherche avant tout, c'est que les sous-menus soient eux même symétriques par rapport au centre de la page et ce quelque soit le menu "père" concerné.

En d'autres termes, que l'on pointe la souris sur le menu 'accueil' ou 'menu 2' ou 'menu 5', j'aurais aimé que l'affichage de la ligne des sous-menus correspondant soit centré.

En position absolute, il m'est possible d'arriver à un tel résultat en décalant les balises <dd>, englobant ces sous-menus, vers la gauche.
Mais celà ne marche que pour UNE résolution donnée (et en pleine écran bien sûr).

J'ai effectué cette manip pour le lien 'Accueil' par un décalage de 260px pour un plein écran en 1280*1024.

J'ai le sentiment que la solution à ce problème est simple mais qu'elle ne me vient pas à l'esprit ... alors oui, je vais laisser celà de côté et j'y reviendrai avec plus de recul.

Encore merci gcyrillus
Modifié par RaGe (08 Nov 2006 - 19:08)

bonsoir,

:) , en fait ce qui m'a trompé , c'est l'heure tardive et les sous menus tous de même taille.

essai ceci :
assez peut de modif en fait :

body{
margin: 0;
text-align: center;
background-color: #2282ed;
}

#page{
margin: auto;
width: 1020px;
}

#page_haut{
width: 1020px;
height: 135px;
background: url(images/haut.gif);
}

/***********************************************************************************

*********************************************/
/***********************************************************************************

*********************************************/
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu {
width: 1020px;
height: 25px;
background: url(images/menu.gif) no-repeat;
position:relative;
}

#menu dl {
float: left;
width: 100px;
height: 25px;
}

#menu1{
margin-left: 260px;
display:inline;
}

#menu1_on, #menu2_on, #menu3_on, #menu4_on, #menu5_on{
font-weight: bold;
display: block;
width: 100px;
height: 25px;
}

#menu1_on:hover{
background: url(images/menu1_rouge.gif) no-repeat;
color: #FFF;
}

#menu2_on:hover{
background: url(images/menu_rouge.gif) no-repeat;
color: #fff;
}

#menu3_on:hover{
background: url(images/menu_rouge.gif) no-repeat;
color: #fff;
}

#menu4_on:hover{
background: url(images/menu_rouge.gif) no-repeat;
color: #fff;
}

#menu5_on:hover{
background: url(images/menu5_gris.gif) no-repeat;
color: #fff;
}

#menu li {
display: inline;
}

#menu a {
text-decoration: none;
font-family: arial;
}

#menu1_on, #menu2_on, #menu3_on, #menu4_on{
color: #ff1800;
}
 
#menu5_on{
color : gray;
}

#sousmenu1, #sousmenu2, #sousmenu3, #sousmenu4, #sousmenu5 {
position: absolute;
font-size: 0.9em;
width:1024px;
left:0;
}

#sousmenu1 a, #sousmenu2 a, #sousmenu3 a, #sousmenu4 a{
color: #ff1800;

}

#sousmenu5 a{
color: gray;
}

#sousmenu1 a:hover, #sousmenu2 a:hover, #sousmenu3 a:hover, #sousmenu4 a:hover{
color: white;
background-color: #ff1800;
}

#sousmenu5 a:hover{
color: white;
background-color: gray;
}
#contenu{
width: 1020px;
height: 135px;
background: url(images/page_milieu.gif);
}


#menu ul {
margin:0 auto;
background:#eee;
text-align:center;
padding:0;

}
#menu ul li {
margin:0;
}

le sous menu vient s'afficher centre sous le menu lui même , c'est ça ?

++

C'est bon j'ai trouvé !!!!
Bon ok, c'est pas moi qu'est trouvé ...

Le problème venait du fait que le positionnenement absolute se basait sur le bord du body et non sur ma div 'page', et pour cause celle-ci n'était pas positionnée explicitement.

Donc zou ! on la positionne en relative et là, miracle ! les sous-menus se positionnent en absolute par rapport à la div 'page'.
... si j'ai bien compris ...

vous pouvez voir le résultat toujours ici

Merci pour ton idée gcyrillus .
Mais ce n'était pas vraiment l'effet escompté (je m'explique si mal que ça ?? ).
Mais ta petite idée de centrer les sous-menus par rapport au menu correspondant est forte intéressante, je vais donc la garder sous le coude
Je t'invite à voir le résultat que j'ai obtenu qui vaut toutes les explications du monde.
Et encore merci pour le temps que tu m'auras consacré.