vertikal meny med ikoner som rör sig

5 svar · 567 visningar · startad av stompes 9 sep. 2007

stompesMedlem sedan maj 200757 inlägg

Frågan9 sep. 2007 13:35#1

Försöker skapa en vertikal meny, som består av en ikon och text därefter. Vill att ikonen ska röra sig när man drar musen över den.

har gjort den hät koden och den funkar perfekt i mozilla men brakar ihop helt i IE:

.reduced {padding:0; margin:6px auto; list-style-type:none; text-align: left; }
.reduced li {display:block; width:inherit; height:inherit; position:relative; padding-bottom:5px;}
.reduced li a {display:block; width:inherit; height:inherit; background:transparent; display:block; overflow:hidden; position:relative; text-decoration:none;}
.reduced li a img {width:30%; height:80%; border:0; float:left;}
.reduced li a span {width:60%; height:20%; border:0; float:right; text-overflow:clip; text-decoration:none; padding-top:9px; padding-bottom:9px; text-overflow:ellipsis;}
.reduced li a:hover { left:-1px; top:-1px; z-index:100;}

och HTML:

<ul class="reduced" id="toolbox">
     <li><a href="#one"><img src="/images/test/image1.png" alt="image 1" title="image 1" /><span>lägg till användare</span></a></li>
      <li><a href="#two"><img src="/images/test/image2.png" alt="image 2" title="image 2" /><span>skapa rättigheter</span></a></li>
	<li><a href="#three"><img src="/images/test/image3.png" alt="image 3" title="image 3" /><span>ändra lösen ord</span></a></li>
	<li><a href="#four"><img src="images/test/image4.png" alt="image 4" title="image 4" /><span>spara användar historia</span></a></li>
</ul>

Nån som har nått tips på vad som kan vara galet?

stompesMedlem sedan maj 200757 inlägg

9 sep. 2007 14:47#2

egentligen så splear det ingen roll om bilderna eller hela href taggen kan röra sig, huvudsaken är att bilden blir nerskalad och att det funkar i både mozilla och IE

Danne VMedlem sedan aug. 20068 090 inlägg

9 sep. 2007 15:35#3

Kollade inte koden. Men i princip så tar du en bild som bakgrund till "a" och en annan som bakgrund till "a:hover". Placera bakgrunderna till höger eller vänster eller var du nu vill ha dom, och lägg in bildernas bredd som padding till samma stilar. Ungefär så här:

a {
background-image:url(bild1.jpg)right no-repeat;
padding-right:20px;
}
a:hover {
background-image:url(bild2.jpg)right no-repeat;
padding-right:20px;
}

stompesMedlem sedan maj 200757 inlägg

9 sep. 2007 15:50#4

denna kod fungerar i både IE och mozilla

.reduced {padding:0; margin:6px auto; list-style-type:none; text-align: left; }
.reduced li {display:block; width:100%; height:100%; position:relative; padding-bottom:5px;border-width: 1px; border-color:#000;}
.reduced li a {display:block; width:100%; width:inherit; height:inherit; background:transparent; display:block; overflow:hidden; position:relative; text-decoration:none;}
.reduced li a img {width:30%;  border:0; float:left;}
.reduced li a span {width:60%; height:20%; border:0; float:left; text-overflow:clip; text-decoration:none; padding-left:5px; padding-top:9px; padding-bottom:9px; text-overflow:ellipsis;}
.reduced li a:hover { margin-left:1px; z-index:100; background: #333;}

Probelemt låg i bredden får inte vara ärvd i IE

Danne VMedlem sedan aug. 20068 090 inlägg

9 sep. 2007 16:06#5

stompes skrev:

denna kod fungerar i både IE och mozilla

.reduced {padding:0; margin:6px auto; list-style-type:none; text-align: left; }
.reduced li {display:block; width:100%; height:100%; position:relative; padding-bottom:5px;border-width: 1px; border-color:#000;}
.reduced li a {display:block; width:100%; width:inherit; height:inherit; background:transparent; display:block; overflow:hidden; position:relative; text-decoration:none;}
.reduced li a img {width:30%;  border:0; float:left;}
.reduced li a span {width:60%; height:20%; border:0; float:left; text-overflow:clip; text-decoration:none; padding-left:5px; padding-top:9px; padding-bottom:9px; text-overflow:ellipsis;}
.reduced li a:hover { margin-left:1px; z-index:100; background: #333;}

Probelemt låg i bredden får inte vara ärvd i IE

Jag har ingen aning. Men det ser ut som om du har öst in en väldans massa onödiga parametrar i dom där stilarna, och har span-klasser och jox. Är du verkligen säker på att du måste ha allt det där? Det ser liksom ut som om du ber om problem...

Kan du ladda upp sidan och ge en länk så att man får se rubbet?

tantenMedlem sedan nov. 20051 596 inlägg

9 sep. 2007 16:12#6

Blir lite nyfiken på varför du har både text-overflow:clip; och text-overflow:ellipsis; i ditt a span. Är det skillnad på webläsarna, som gör att du har det så? Vet att IE6, konstigt nog har stöd för denna som väl tillhör css3. Undrar bara :-)