4 liens d'un menu qui ne fonctionnent pas. [Résolu]

[dragonno]

Si quelqu'un comprend quelque chose là ?
Je suis perdu.

En fait il s'agit d'un menu horizontal qui possède 4 liens.
Chaque lien <a href.... est dans un div nommé "lien" et les 4 div liens sont dans un div de centrage pour pouvoir centrer horizontalement le menu.
D'autre part ce div de centrage est contenu dans un div de positionnement ce qui permet de placer le menu horizontal où je veux sur la page si besoin.

Le problème est que le lien ne fonctionne que si j’enlève l'attribut absolute (la main apparaît sur le lien quand on le survole avec la souris) ce qui n'est pas le cas quand je remet l'attribut absolute.

Voilà le css du DIV positionneur avec l'attribut absolute :

Code :

1
2
3
4
5
6
7
8
9
10
 
.positionneur
{
position: absolute;
left:0;
top:15%;
width:100%;
height:5%;
background-color:#CC9966;
}

Pour permettre de centrer le menu horizontalement avec l'attribut "margin:auto" j'ai dû mettre le menu dans un DIV nommé centreur.
Voilà le css du DIV centreur

Code :

1
2
3
4
5
6
7
8
9
10
 
.centreur
{
position: relative;
margin:auto;
top:0;
width:750px;
height:100%;
text-align:center;
}

Chaque lien "a href" est contenu dans une balise <span> nommée "liens".
Ce qui permet d'avoir une classe commune aux 4 liens du menu.
Voilà le CSS du span liens :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
.liens
{
width:150px;
height:100%;
float:left;
top:0;
margin-right:15px;
text-align:center;
font-size:16px;
font-style:"times new roman";
}

Le code HTML du menu :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="positionneur">
 
<div class="centreur"> 
 
 <span class="liens"><a href="#" onclick="fonction1()">lien1</a></span> 
 <span class="liens"><a href="#" onclick="fonction2()">lien2</a></span> 
 <span class="liens"><a href="#" onclick="fonction3()">lien3</a></span> 
 <span class="liens"><a href="index.html">lien4</a></span> 
 
</div> 
 
</div>

Je signale que le menu complet c'est à dire le div de positionnement est situé dans un DIV "contener" qui cadre toute la page (le body).
Ce div contener est lui aussi en absolute avec width=100% et height=100%.

Je résume la question en disant que les liens ne fonctionnent pas si je met l'attribut absolute au div de positionnement et donc pourquoi cela ne fonctionne-t'il pas ?

C'est une bizarrerie pour moi .....ou alors je bûche trop :/

NB:
J'ai remplacé les div des liens par des <span> pour alléger le source en div.
Le problème est toujours là en tous cas, je cherche...

[NoSmoking]

Bonsoir,

Je signale que le menu complet c'est à dire le div de positionnement est situé dans un DIV "contener" qui cadre toute la page (le body).
Ce div contener est lui aussi en absolute avec width=100% et height=100%.

tu as visiblement un problème de "position de ouche", donc de conception du document.

Nota : ce type de menu est réalisable sur base de liste UL LI en display inline.

A voir choix de menus horizontaux

[dragonno]

Je te remercie, je vais voir ton lien

EDIT :
le problème reste le même, ce n'est pas la création du menu qui me pose problème, je sais faire, c'est seulement le fait que si je place le menu à l'intérieur du DIV positionneur les liens ne fonctionnent plus, mais si je supprime l'attribut absolute du div positionneur les liens refonctionnent, par contre le menu quitte la place où je l'avais positionné pour se retouver en left=0 et top=0 en haut de la page.
Au lieu d'être juste sous ma bannière (elle-aussi en absolu).

EDIT 2 :

C'est bon ça fonctionne à nouveau, j'ai juste déplacé le code HTML du menu dans un autre emplacement de ma page (plus bas) et ç'est bon.
je n'y ai réfléchi que maintenant en me disant que je pouvais tester puisque ce menu est en absolute, la place du code peut être changée ça placera quand même le menu où je veux, vive le CSS.

Merci