Problème de puces et d'alignement dans mon menu.

Sujet résolu

3 janvier 2006 à 19:03:44

Voilà, aprés avoir vérifié quelques fois je tombe toujours sur le même problème : en effet, dans mon menu, le "retour à l'acceuil" n'est pas aligné avec les autres lien, de plus il n'a pas la même puce alors que je les aies laissées par défault.

Voici le code xhtml :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link href=".....htm" rel="stylesheet" type="text/css"/>
<title>.....</title>

</head>

<body>

<div id="menu">

<div class="element_menu">
<h3>Menu :</h3>

<h5>Accueil :</h5>
<ul>
<li><a href="bad.htm">Retour à l'Accueil</a></li>
</ul>

<h5>Blablabla:<h5>
<ul>
<li><a href="badpresentation.htm">Blablabla</a></li>
</ul>

<h5>Blablabla :<h5>
<ul>
<li><a href="badshorts.htm">Blablabla</a></li><br />
<li><a href="badraquettes.htm">Blablabla</a></li><br />
<li><a href="badchaussures.htm">Blablabla</a></li>
</ul>

<h5>Blablabla:<h5>
<ul>
<li><a href="badencouragements.htm">Blablabla</a></li>
</ul>
</div>
</div>

</body>
</html>

et le code CSS :

#menu
{

float: left; /* Le menu flottera à gauche */
width: 175px; /* Très important : donner une taille au menu */
height: 440px;
background-color: #D3D3D3;

}

.element_menu
{

border: 2px solid black;
margin-bottom: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/* Quelques effets sur les menus */

#menu h3 /* le titre du menu (Menu) */
{

color: #ff0000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

#menu h3:hover /* Quand on pointe sur le titre h1 du corps */

{
color: #000000;
}

#menu h5 /* Les sous-titres du menu */
{

color: #000000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
padding-left: 10px;
}

#menu ul /* Toutes les listes à puces se trouvant dans un menu */
{

cursor: pointer;
padding: 0px;
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 0px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

#menu a
{
color: #000000;
}

#menu a:hover /* Quand on pointe sur un lien du menu */
{
color: #ff0000;
}

Merci.

JulFisher

3 janvier 2006 à 19:10:23

Inutile de mettre des <br /> après tes </li> car ce sont des balises blocs.

Et ton #menu ul peut être très simplifier :

cursor: pointer;
padding: 0;
padding-left: 20px;
margin: 0;

Lol le doctype, ton site n'est pas sur www.w3.org :lol:

Il faut mettre le lien absolu : "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

strucky

3 janvier 2006 à 19:16:42

Tu as aussi des balises <h5> et <li> ouvertes mais non-fermées, il est là ton probléme de décalage.

Il est très utile de mettre son code entre les balises < code> et </code > sur le forum, surtout pour les lecteurs de ton post.

Benji

3 janvier 2006 à 19:39:20

Ah oui bien vu le coup du doctype

. Et il est vrai que je ne devait pas être vraiment "dedans" quand j'ai écris et relu mon code xhtml :-°

.
Cela change Tout ! Mon problème et résolu merci beaucoup !