28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème menu, à cause du float

Bonjour,
Je suis en train de réaliser un site web, et comme j'ai de la chance, j'ai déjà un problème Smiley decu . Le truc c'est qu'apparement, à cause du float: left, les liens de mon menu ne fonctionnent plus sous IE6 et les éléments du menu sont décalés sur la gauche, enfin bref, ce lien vous l'expliquera mieu:

http://cs.question.free.fr

voici les pages de code,
le xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>La Te@m Mystère !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design1.css" />
   </head>
   <body>
   
   <div id="en_tete">
   <!-- Ici on mettra la bannière -->
   </div>

<div id="menu">
   <!-- Ici on mettra le menu -->
  <ul id="element_menu">
   <li><a href="index.html">Accueil</a></li>
   <li><a href="matchs.html">Matchs</a></li>
   <li><a href="membres.html">Membres</a></li>
  </ul> 
</div>

<div id="corps">
   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
   
</div>

<div id="pied_de_page">
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
   Copyright '<a href="mailto:g.sebastiani@yahoo.fr">Dante's Corps</a>' 2006, tous droits réservés.
</div>
       
   </body>
</html>


et le CSS:
body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color: black; /* Une petite image de fond pour éviter d'avoir un vieux fond blanc [langue] */
   font-family: "lucida sans unicode", "calisto MT", georgia, arial;
   font-size: 1em ;
   color: gray;
}

/* BANNIERE */

#en_tete
{
   width: 760px;
   height: 200px;
   background-image: url("images/banniere_cs2.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   border: 2px gray solid;
}

/* MENU*/

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 128px;
   height: 200px;
   border: 2px gray solid;
   background-color: #323232;
   margin-top: -12px;
}

#element_menu
{
   margin-left: -12px;
   margin-top: 30px;
   list-style-type: none;
}

#element_menu a, #element_menu a:visited
{
   color: gray;
   text-decoration : underline;
}

#element_menu a:hover
{
   text-decoration: underline overline;
   color: black;
   font-size: 1.1em;
   font-weight: bold;
}

#element_menu a:active, #element_menu a:focus
{
   text-decoration: underline overline;
   color: white;
   font-size: 1.1em;
   font-weight: normal;
}



/* CORPS */

#corps
{
   margin-left: 130px;
   margin-bottom: 20px;
   margin-top: -12px;
   margin-right: -4px;
   border: 2px solid gray;
   padding: 10px;
   background-color: #323232;   
}

/* PIED DE PAGE */

#pied_de_page
{
   text-align: center;
   font-size: 0.7em;
}

#pied_de_page a
{
   color: gray;
}

#pied_de_page a:hover
{
   color: white;
}


Je vous remerci d'avance de l'aide que vous m'apporterez et sur ceux bonne journée, ou soirée ou nuit etc... Smiley langue
Modifié par Dantedu93 (07 Dec 2006 - 18:22)
Salut,

J'ai l'impression que tu abuses un peu des marges négatives dans ton code.

Ce n'est pas une bonne solution pour annuler les styles par défaut des navigateurs, qui ne sont pas homogènes. Dans le cas des listes (<ul>) par exemple, je te conseille de jeter un coup d'oeil à la faq.
Modifié par Eldebaran (07 Dec 2006 - 17:05)
Oui j'ai lu ça tout à l'heure, avec les marges par défaut des différents navigateur et il faut que je m'en occupe, cependant, je ne pense pas que cela influ sur mon problème principal qui est que les liens ne fonctionne plus.
Je pense que si.

Etant donné que pour positionner tes éléments, tu choisis une méthode pas très propre par dessus les styles par défaut des navigateurs qui ne sont pas les mêmes, ça ne m'étonne pas que tes liens se retrouvent en dessous d'un bloc qui les masque.

Et dans tous les cas, il sera plus facile de t'aider si tes éléments sont positionnés correctement. Smiley smile
Modifié par Eldebaran (07 Dec 2006 - 17:19)
Alors, j'ai essayé en changeant les négatif, etc.. rien n'a fonctionné, comme je vous l'ai dit, c'est a cause du float que les liens du menu de fonctionne pas. Si je suprime le float: left du CSS les liens refonctionnent, je ne comprends vraiment pas.
C'est bon j'ai trouvé. En rajoutant, un position: absolute ou relative. Les liens reviennent, et ceux sans que j'ai touché au problème de margin négatif. Je ne comprends pas pourquoi cela ne fonctionnait pas sans le position. Le plus important est que ça fonctionne. Bonne journée.
Modifié par Dantedu93 (07 Dec 2006 - 18:22)
Sujet clos
Aller à