28172 sujets

CSS et mise en forme, CSS3

Décalage menu li horizontal avec IE6

Bonjour,
Je suis en train de plancher sur un comportement que je ne gère pas. Dans le titre tout est dit...
A savoir que je cherche le problème depuis hier et rien, je dois avoir fais une erreur débile car j'ai déjà fais ça avec justement les conseils d'Alsa, mais là! oO

Mon code:

Le menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<div id="header">
	<div id="menu">
		<ul id="menu">
			<li class="menu m1"><a href="#">Accueil</a></li>
			<li class="menu m2"><a href="#">Situation</a></li>
			<li class="menu m3"><a href="#">Chambres</a></li>
			<li class="menu m4"><a href="#">Tarifs</a></li>
			<li class="menu m5"><a href="#">Contact</a></li>
		</ul>
	</div>
</div>
...


Le CSS:

*{	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;}
#menu ul{		list-style-type: none; margin: 0; padding: 0; border: 0;}
#menu{		display: block;	width: 425px;	height: 120px;	padding: 110px 10px 10px 280px;
			text-align: center;}
#menu li a{	float: left;	width: 85px;	height: 135px;	font-size: 8px;}
li.m1 a{		background: transparent url(./images/tmp_m1a.jpg) top left no-repeat;}
li.m1 a:hover, li.m1 a:focus, li.m1 a:active{
			background: transparent url(./images/tmp_m1b.jpg) top left no-repeat;}
li.m2 a{		background: transparent url(./images/tmp_m2a.jpg) top left no-repeat;}
li.m2 a:hover, li.m2 a:focus, li.m2 a:active{
			background: transparent url(./images/tmp_m2b.jpg) top left no-repeat;}
li.m3 a{		background: transparent url(./images/tmp_m3a.jpg) top left no-repeat;}
li.m3 a:hover, li.m3 a:focus, li.m3 a:active{
			background: transparent url(./images/tmp_m3b.jpg) top left no-repeat;}
li.m4 a{		background: transparent url(./images/tmp_m4a.jpg) top left no-repeat;}
li.m4 a:hover, li.m4 a:focus, li.m4 a:active{
			background: transparent url(./images/tmp_m4b.jpg) top left no-repeat;}
li.m5 a{		background: transparent url(./images/tmp_m5a.jpg) top left no-repeat;}
li.m5 a:hover, li.m5 a:focus, li.m5 a:active{
			background: transparent url(./images/tmp_m5b.jpg) top left no-repeat;}


La capture IE6:
upload/11785-a13e1c3cf8.png
La capture IE7:
upload/11785-4f6bc6715e.png

Je vous remercie par avance pour votre compassion, je sèche. Et pourtant je sais que ça doit pas être grand chose Smiley ohwell

Bon appétit,
Antho.
Modifié par LaPomme (28 Nov 2008 - 12:29)
Mettre les images en dur dans le html avec l'attribut alt = "titre", puis faire un float des <li>. Avec ça tu vas alléger pas mal tes css...
oui mais pour le rollover... ca va pas recouvrir l'image du html... et cela reglerai t il les decalages?
Le rollover, il faut le faire en javascript et les décalages devrait être éliminé par le flottement (si les images ont la même taille).
Merci pour ton aides, tes directions! Voilà mon code maintenant et ça marche nickel Smiley smile

Maintenant à savoir s'il est assez propre ce code c'est mon premier menu avec rollover en java...

Le Menu:

....
<script language="JavaScript">
	<!-- Begin
	bt1 = new Image();
	bt1.src = "./images/tmp_m1a.jpg";
	bt2 = new Image();
	bt2.src = "./images/tmp_m2a.jpg";
	bt3 = new Image();
	bt3.src = "./images/tmp_m3a.jpg";
	bt4 = new Image();
	bt4.src = "./images/tmp_m4a.jpg";
	bt5 = new Image();
	bt5.src = "./images/tmp_m5a.jpg";
	end -->
</script>

</head>
<body>
......
<div id="header">
<div id="menu">
	<ul>
		<li class="menu"><a href="?fr_accueil" onclick="load_page(this.href);return false;" title="Accueil" onmouseover="bt1.src = './images/tmp_m1b.jpg';" onmouseout="bt1.src = './images/tmp_m1a.jpg';">
			<img src="./images/tmp_m1a.jpg" alt="Accueil" name="bt1" /></a></li>
		<li class="menu"><a href="?fr_situation" onclick="load_page(this.href);return false;" title="Situation" onmouseover="bt2.src = './images/tmp_m2b.jpg';" onmouseout="bt2.src = './images/tmp_m2a.jpg';">
			<img src="./images/tmp_m2a.jpg" alt="Situation" name="bt2" /></a></li>
		<li class="menu"><a href="?fr_chambres" onclick="load_page(this.href);return false;" title="Chambres" onmouseover="bt3.src = './images/tmp_m3b.jpg';" onmouseout="bt3.src = './images/tmp_m3a.jpg';">
			<img src="./images/tmp_m3a.jpg" alt="Chambres" name="bt3" /></a></li>
		<li class="menu"><a href="?fr_tarifs" onclick="load_page(this.href);return false;" title="Tarifs" onmouseover="bt4.src = './images/tmp_m4b.jpg';" onmouseout="bt4.src = './images/tmp_m4a.jpg';">
			<img src="./images/tmp_m4a.jpg" alt="Tarifs" name="bt4" /></a></li>
		<li class="menu"><a href="?fr_contact" onclick="load_page(this.href);return false;" title="Contact" onmouseover="bt5.src = './images/tmp_m5b.jpg';" onmouseout="bt5.src = './images/tmp_m5a.jpg';">
			<img src="./images/tmp_m5a.jpg" alt="Contact" name="bt5" /></a></li>
	</ul>
</div>
</div>
.....

Le CSS:

#menu{		display: block;	width: 425px;	height: 120px;	padding: 110px 10px 10px 280px; text-align: center;}
#menu ul{	list-style-type: none; margin: 0; padding: 0; border: 0;}
li.menu a{		float: left;	width: 85px;	height: 135px;	font-size: 8px;}

Modifié par LaPomme (29 Nov 2008 - 03:17)
Mmmmh, le javascript c'est comme pour le html et la présentation, c'est mieux de faire la séparation… Tu pourrais faire plutôt faire un truc comme ça (avec jquery chargé) :

	<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
	<script type="text/javascript">
	$(
		function()
		{
			// set up rollover
			$("#menu img.rollover").hover(
				function()
				{
					this.src = this.src.replace("_off","_on");
				},
				function()
				{
					this.src = this.src.replace("_on","_off");
				}
			);
		}
	)
	</script></head>

<body>
	<div id="header">
		<div id="menu">
			<ul>
				<li class="menu"><a href="?fr_accueil" title="Accueil"><img src="./images/tmp_m1a_off.jpg" alt="Accueil" class="rollover" /></a></li>
				<li class="menu"><a href="?fr_situation" title="Situation"><img src="./images/tmp_m2a_off.jpg" alt="Situation" class="rollover" /></a></li>
			</ul>
		</div>
	</div>


Source du rollover
Sujet clos
Aller à