NisseMannH4X Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 (endret) Jeg har denne css koden for linker i en meny: ul li a { display: block; text-decoration: none; color: #777; background: #259BBF; padding: 3px; width: 10em; border-bottom: 0; } Siden de er "display: block;" kan jeg vel få a:hover på knappene via css? Linkene blir vel da en slags boks med tekst inni? Kan jeg ikke da få bakgrunnsfargen til å endre seg ved a:hover? Hele css'n: ul { padding: 0; margin: 0; list-style: none; } ul li a { display: block; text-decoration: none; color: #777; background: #259BBF; padding: 3px; width: 10em; border-bottom: 0; } li { float: left; position: relative; width: 6.937em; height: 13px; display: block; text-transform: uppercase; text-decoration: strong; color: #FFFFFF; background: #259BBF; padding: 2px; font-family: "Verdana"; font-size: 8pt; font-weight: bold; } li ul { display: none; position: absolute; top: 15px; left: 0; } li > ul { top: auto; left: auto; } li:hover ul, li.over ul{ display: block; } Html for litt av menyen: <li>Forside <ul> <li><a href="index.php">Forside</a></li> <li><a href="siste10.php">Siste 10 nyheter</a></li> <li><a href="alle.php">Alle nyheter</a></li> </ul> </li> Eksemple på slik jeg vil ha det! (Vet at jeg har hatt et par tråder til denne menyen min før, men det dreier seg jo om vidt forskjellige ting så startet en ny tråd for å få mer oppmerksomhet)¨ EDIT: Link til menyen som den er nå Endret 12. januar 2005 av NisseMannH4X Lenke til kommentar
Steinmann Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 tror jeg ville satt hoover på a elementet, og gitt den en høyde. for så sette bakgrundsfargen på den. det skal funke... Lenke til kommentar
PoleCat Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 :hover på annet enn a-elementet vil uansett ikke fungere i IE. Hvorfor ikke sette hover til a? Lenke til kommentar
NisseMannH4X Skrevet 12. januar 2005 Forfatter Rapporter Del Skrevet 12. januar 2005 Hvor og hva skal jeg sette inn? (har ikke peiling skjønner du) Lenke til kommentar
Haraldson Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 Du må lage en egen regel hvor du skriver slik: ul li a:hover { Deretter må du kopiere en del av koden fra vanlig a over til denne, men gjøre forandringer der du vil a:hover skal være annerledes osv. Lenke til kommentar
NisseMannH4X Skrevet 12. januar 2005 Forfatter Rapporter Del Skrevet 12. januar 2005 ok, takk for svar, det funker fint, menyen blir nå helt føkka i Opera, men skal se om jeg fikser det, kommer tilbake til det hvis jeg ikke klarer det. En annen ting: Hva er koden for å får opprom mellom tekst/linker? horisontalt... Lenke til kommentar
NisseMannH4X Skrevet 12. januar 2005 Forfatter Rapporter Del Skrevet 12. januar 2005 (endret) Har nå fått menyen til å fungere helt perfekt i ie, men i Opera er det føkka, sikkert noe kode jeg har glemt... Kan noen skjekke denne linken i IE så ser dere hvordan den skal være. Men i Opera blir den bare helt "ødelagt" har også et bilde av "situasjonen" EDIT: har funnet ut (la ved svart bakgrunn som dere ser på linken over, på neddropsboksene) og ser jeg at det ikke er border rund hele boksen, ossen legger jeg til det? Kan noen se feilen? ul { padding: 0; margin: 0; list-style: none; } ul li a { float: left; position: relative; width: 10em; display: block; background: #259BBF; border-bottom: 0; padding: 3px; } ul li a:hover { float: left; position: relative; width: 10em; display: block; background: #33CCFF; border-bottom: 0; padding: 3px; } li { float: left; position: relative; width: 6.937em; height: 13px; display: block; color: #FFFFFF; background: #259BBF; padding: 2px; font-family: "Verdana"; font-size: 8pt; font-weight: bold; text-transform: uppercase; text-decoration: strong; } li ul { display: none; position: absolute; top: 15px; left: 0; } li > ul { top: auto; left: auto; } li:hover ul, li.over ul{ display: block; } Hadde vært fint med litt hjelp... Endret 12. januar 2005 av NisseMannH4X Lenke til kommentar
dan1el Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 Vil påstå at din "li"-sak overstyrer din "ul li a"-sak. Du trenger dessuten ikke å ha det samme i "ul li a" og "ul li a:hover", da ":hover" arver egenskaper fra "a". Lenke til kommentar
Haraldson Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 Du trenger dessuten ikke å ha det samme i "ul li a" og "ul li a:hover", da ":hover" arver egenskaper fra "a". Ahh... Riktig det, sløvt av meg. Lenke til kommentar
NisseMannH4X Skrevet 12. januar 2005 Forfatter Rapporter Del Skrevet 12. januar 2005 (endret) Har nå fiksa og rydda litt opp i css'n... men funker fortsatt ikke i Opera... Har lagt til svart bekgrunn på "blockene" så man bedre kan se hva som skjer... Skjekk forskjellen mellom Opera og ie, det skal være slik som det er i ie Skjønner ikke hvorfor den blåe "bakgrunnen" på boksen som detter ned bare vise på halve bokse i Opera, nedover på venstre side og halveis inn i mellom hver boks... er ikke slik i ie.. Link ul { padding: 0; margin: 0; list-style: none; } ul li a { float: left; position: relative; width: 10em; display: block; background: #000000; padding: 3px; border: 1px solid #ccc; border-bottom: 0; } ul li a:hover { background: #33CCFF; } li { float: left; position: relative; width: 6.937em; height: 13px; display: block; color: #FFFFFF; background: #259BBF; padding: 2px; font-family: "Verdana"; font-size: 8pt; font-weight: bold; text-transform: uppercase; text-decoration: strong; } li ul { display: none; position: absolute; top: 15px; left: 0; } li > ul { top: auto; left: auto; } li:hover ul, li.over ul{ display: block; } Endret 12. januar 2005 av NisseMannH4X Lenke til kommentar
dan1el Skrevet 12. januar 2005 Rapporter Del Skrevet 12. januar 2005 Hvorfor bruker du CSS både på LI og LI A...? Kanskje du burde gi de <li>-ene som kommer opp ved :hover en egen klasse slik at disse ikke klusser med resten? Lenke til kommentar
NisseMannH4X Skrevet 13. januar 2005 Forfatter Rapporter Del Skrevet 13. januar 2005 Jeg fannt en annen dropdown meny som fungere helt fint i alle browsere, men den går vertikalt, så lurer på ossen jeg skal snu den horisontalt.. Link HTML: <li><a href="#">Forsiden</a></li> <ul> <li><a href="#">Forsiden</a></li> <li><a href="#">Siste 10 nyheter</a></li> <li><a href="#">Alle nyheter</a></li> </ul> </li> CSS: ul { margin: 0; padding: 0; list-style: none; width: 150px; } ul li { position: relative; } li ul { position: absolute; left: 149px; top: 0; display: none; } ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */ ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; } li:hover ul, li.over ul{ display: block; } <ul id="nav"> Lenke til kommentar
Anbefalte innlegg
Opprett en konto eller logg inn for å kommentere
Du må være et medlem for å kunne skrive en kommentar
Opprett konto
Det er enkelt å melde seg inn for å starte en ny konto!
Start en kontoLogg inn
Har du allerede en konto? Logg inn her.
Logg inn nå