Hej gott folk!
Jag håller på att jobba med en meny som ska ersätta en identisk meny gjord med Flash. Jag har med andra ord gett mig tusan på att samma funktionalitet ska gå att fixa med XHTML och CSS. :h
Meny består av en <ul>-lista med en bakgrundsfärg i varje <li>-element. När man hovrar visas en bild istället. I listelementen finns också en span med ett ord. den är osynlig utom när man hovrar över det aktuella elementet då ordet visas. Saken är att det ordet ska visas i samma position på sidan oavsett vilket listelemens span man hovrar över. Det är här problemet börjar...
Båda filerna validerar.
Problemet är att orden visas förskjutna relativt med listelementets höjd. Position:absolute ska ju förhålla sig till det omgivande blocket, men det enda blocket som finns är ju <div id="menu">. Eller? Det funkar som det ska om jag använder position:fixed, men efter det inte lirar med IE så går det ju inte att använda.
Någon som har en idé om vad jag missat eller gjort fel?
Många tack på förhand!
Har försökt hinna med att titta på din "utmaning", men tiden räcker inte till.
Kanske kan detta ge dig något tips på vägen. http://www.gotlandssidor.se/exp/exp.html
Nu jobbade jag en stund med att rensa i min kod och flyttade på hover-texten.
Gjorde
/* Göra allt osynligt */
#container a.gallery span {
background: #FFFFFF;
height: 10px;
width: 10px;
left: 300px;
overflow: hidden;
position: absolute;
top: 200px;}
synlig genom att göra den 10px hög och bred. Ska egentligen vara 1px. Så ändra det om du vill använda den som mall.
Jag har en liknande underlighet som du har på din sida i mitten. I mitt fall är det ordet Contact. Förstår inte varför det syns där. Hovrar man över det tiltar de två understa raderna i menyn.
Men, som sagt, tack för hjälpen! Det ska nog bli nog av det här...
Ang IE5 så har jag bara kunnat testa i IE5/Mac. Genom att fuska med ett extra stylesheet har jag fått den att åtminstone synas ordentligt. 5-versioner för Win kan jag inte testa här. Har du något förslag på vad jag behöver ändra?