Problème menu CSS & xHTML

24 mai 2006 à 23:36:25

Bonjour,

Etant novice dans ce domaine, je viens vous demander un peu t'aide a propos de la réalisation d'un menu.
J'ai essayé plusieurs solutions, j'en suis arrivé a une qui est assez satifaisante, mais pas exempt de défauts. En effet, comme vous pouvez le voir sur l'image, (la première est une capture sous firefox, la deuxième, sous IE), il y a quelques petit problèmes de navigateurs. La troisième image, quant à elle, est le résultat attendu..

Le code xHTML est assez simple :

<div id="menu_gauche">
<img src="images/title.jpg" alt="" height="16" width="146" />
<ul id="sous_menu">

<li class="menu">
<a href="#"> . Database</a>
</li>
<li class="menu">
<a href="#"> . Gérer mon compte</a>
</li>
</ul>
<br />
</div>

Le problème doit se situer au niveau du CSS, donc voici le code partiel :

#menu_gauche
{
float:left;
width:146px;
margin-left: 3px;
/*background-image: url("images/fond.jpg");
background-repeat: repeat;*/
}

#sous_menu{
margin: auto;
padding:0;
width: 146;
border : 1px;
border-bottom: none;
}

.menu
{
font-size: 12px;
color: #2D7DA0;
font-family: verdana, sans-serif;
text-decoration: none;
font-weight: bold;
/*padding: 9px;*/
}

J'ai aussi remarqué un problème, c'est que ce n'était pas vraiment centré, la meilleur solution a été de mettre un margin-left de 3 pixels.

Si quelqu'un pouvait m'aider, ce serait gentil de sa part, merci d'avance.

Alexandre.

TimeSplitters

24 mai 2006 à 23:54:14

Si tu veux que ce soit plus vers le haut, tu devrais mettre :

#menu_gauche
{
float:left;
width:146px;
margin-left: 3px;
margin-bottom: -4px;
/*background-image: url("images/fond.jpg");
background-repeat: repeat;*/
}

Dis-moi si ça ça marche déjà.

atly

24 mai 2006 à 23:59:11

Tu dois spécifié la marge supérieure du bloc adjacent à la bordure de ton div, çàd dans ton cas la liste qui est contenue dans le sous-menu. Donc margin-top:0; pour ta liste.

Pour ta bordure, tu as mal écrit ta règle CSS.
border:0;
border-bottom:1px solid #AED8E8;

alex_speed

25 mai 2006 à 10:06:04

Bonjour,

Merci pour vos réponses, "l'entre menu" est maintenant correct, mais il y a toujours le problème entre l'image et le menu (voir ici), j'ai essayé les deux solutions proposées.

[EDIT] J'ai réussi à arranger correctement, il reste le problème du centrage sous IE et Firefox maintenant.
# Mouarf je n'avais pas vu, mais ca bug sous IE, le background disparait au milieu de la page.

[EDIT 2] Bonjour, ou bonsoir

Décidément, on a décidé de me jouer des tours aujourd'hui.., ici une version plus ou moins correcte, grace à des -2px, un peu partout.. et ici une version qui ne fonctionne pas très bien (sans les -2px etc). Dans les deux cas, il semble qu'il y ai un problème avec les liens, ils ne sont pas clickable sous IE.