28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Bien que j'ai chercher une solution sur votre forum, mais je n'arrive pas à résoudre mon problème avec mon menu.


J'ai fait un menu en ul avec mise en forme via une feuille de style. Le menu se retrouve décalé avec IE7.
Mon code

/*************** LE MENU *******************************************************/

#menu{
	background-image: url(../img/menu.png);
	background-repeat: no-repeat;
	width:980px;
	height: 83px;	
    text-align:centre;
    color: #FFFFFF;
	}
#menu_ul{
	float:left;
 	width: 980px;
 	height: 83px;
 	margin:21px 0 0 190px;
  	}
#menu li {
	display: block;
	float: left;
	height: 46px;
	width: 131px;
	display: inline;
  margin-left:39px;
	}
#menu li a {
	display: block;
	float:left;
	height:46px;
	width:131px;
	text-decoration: none;
	color: #000000;
	background-repeat: no-repeat;
	}
a#menu_solutions:hover{
	background-image:url(../img/menu_solutions.png); /* image de fond au passage de la souris*/
	}
a#menu_forfaits:hover{
	background-image:url(../img/menu_forfaits.png);
	}
a#menu_clients:hover{
	background-image:url(../img/menu_clients.png);
	}
a#menu_graphismes:hover{
	background-image:url(../img/menu_graphismes.png);
	}


et dans mon header

<div id="menu">
        <ul id="menu_ul">
        <li><a id="menu_solutions" href="index.php?mod=page&ac=page&id_page=13">&nbsp;</a></li>
        <li><a id="menu_forfaits" href="index.php?mod=page&ac=page&id_page=19">&nbsp;</a></li>
        <li><a id="menu_clients" href="index.php?mod=lien_web">&nbsp;</a></li>
        <li><a id="menu_graphismes" href="index.php?mod=page&ac=page&id_page=26t">&nbsp;</a></li>
        </ul>
</div>


Le lien pour voir le bug

ICI

Ça ne doit être pas grand chose mais j'arrive pas a mettre la main pour résoudre le problème.

Merci d'avance de vos réponses.
stef2cr
Modifié par stef2cr (06 May 2008 - 03:13)
Bonjour,

Il n'y a pas de solution pour résoudre le problème ?

La seule que j'ai trouvé c'est d'utiliser firefox Smiley murf
Salut,

Un peu de mélange dans ta css des <li> en display blok (ils le sont par définition) et des float; left couplés à des display: inline; et puis tu te compliques la vie avec un background pour tout le menu menu...
Sans parler de l'accessibilité, pas d'image , pas de menu Smiley cligne
et 134 erreurs pour le html au validateur Smiley cligne

Bon courage
Bonjour,

Pour les erreurs Xhtml et l'accessibilité, je sais que je suis loin d'être correct, mais je commence par le début c'est à dire de faire un menu sans bug sous IE et FF, après on corrigeras les erreurs.

Je me doute que je me complique la vie, mais j'essaye de comprendre. Pour les display: block je viens d'apprendre qu'il était défini par défaut. Après quand tu dis: des float couplé a des display, j'ai trouvé aucune info la dessus.
Salut,

Corriger les erreurs après ben c'est un contre sens... Smiley cligne
C'est comme si tu construisais un mur et qu'après tu vérifies que tu as bien fait les fondations ...
Tant qu'à apprendre, il est plus facile de le faire dans le bon sens Smiley lol