Hejsan,
Försöker få till en meny med ul och li. För att snygga till det lite så har jag valt att ta bort texten i mina länkar och ersätter de med en bakgrund istället. Problemet är att när jag har sätter text-indent: -13000em; på mina länkar så försvinner alla mina LI och man ser inger i FireFox. Det fungerar i IE.
Kod:
#header ul {
float: right;
}
#header ul li {
float: left;
display:inline;
list-style: none;
margin: 40px 10px;
}
#header ul li a,
#header ul li a:hover {
background: url(Images/Menu.gif) no-repeat 0 0;
height: 13px;
display: block;
text-indent: -13000em;
}
#header ul li a#homepage:link { width: 72px; }
#header ul li a#homepage:hover { background-position: 0 -13px; }
#header ul li a#links:link { width: 50px; background-position: -72px 0; }
#header ul li a#links:hover { background-position: -72px -13px; }
#header ul li a#information:link { width: 82px; background-position: -122px 0; }
#header ul li a#information:hover { background-position: -122px -13px; }
#header ul li a#images:link { width: 45px; background-position: -204px 0; }
#header ul li a#images:hover { background-position: -204px -13px; }
#header ul li a#quiz:link { width: 29px; background-position: -249px 0; }
#header ul li a#quiz:hover { background-position: -249px -13px; }
#header ul li a#about:link { width: 92px; background-position: -278px 0; }
#header ul li a#about:hover { background-position: -278px -13px; }
Min HTML kod är bara:
<ul>
<li><a id="homepage" href="Default.aspx" title="Startsidan">Startsidan</a></li>
<li><a id="links" href="Links.aspx" title="Länkar">Länkar</a></li>
<li><a id="information" href="Information.aspx" title="Information">Information</a></li>
<li><a id="images" href="Images.aspx" title="Bilder">Bilder</a></li>
<li><a id="quiz" href="Quiz.aspx" title="Quiz">Quiz</a></li>
<li><a id="about" href="About.aspx" title="Om ThinkFirst">Om ThinkFirst</a></li>
</ul>
Tack på förhand.