Tha_Zaynt Skrevet 16. september 2004 Del Skrevet 16. september 2004 Jeg har sikkert gjort dette på en helt ekstremt vanskelig måte men men... style.css .link1{ background: url(images/aboutme.png) top left no-repeat; height:32px; width:127px; } .link1 a { background: url(images/aboutme.png) top left no-repeat; } .link1 a:hover { background-image: url(images/aboutmehover.png); } .link2{ background: url(images/webdesign.png) top left no-repeat; height:32px; width:118px; left: 127px; } .link2 a { background: url(images/webdesign.png) top left no-repeat; } .link2 a:hover { background-image: url(images/webdesignhover.png); } .link3{ background: url(images/friends.png) top left no-repeat; height:32px; width:114px; } .link3 a { background: url(images/friends.png) top left no-repeat; } .link3 a:hover { background-image: url(images/friendshover.png); } .link4{ background: url(images/guestbook.png) top left no-repeat; height:32px; width:119px; } .link4 a { background: url(images/guestbook.png) top left no-repeat; } .link4 a:hover { background-image: url(images/guestbookhover.png); } .link5{ background: url(images/gallery.png) top left no-repeat; height:32px; width:122px; } .link5 a { background: url(images/gallery.png) top left no-repeat; } .link5 a:hover { background-image: url(images/galleryhover.png); } .link6{ background: url(images/links.png) top left no-repeat; height:32px; width:122px; } .link6 a { background: url(images/links.png) top left no-repeat; } .link6 a:hover { background-image: url(images/linkshover.png); } <div class="link1"><a href="#"><span></span></a></div> <div class="link2"><a href="#"><span></span></a></div> <div class="link3"><a href="#"><span></span></a></div> <div class="link4"><a href="#"><span></span></a></div> <div class="link5"><a href="#"><span></span></a></div> <div class="link6"><a href="#"><span></span></a></div> Lenke til kommentar
Tha_Zaynt Skrevet 16. september 2004 Forfatter Del Skrevet 16. september 2004 finnes det en bedre måte å gjøre det på? Lenke til kommentar
Tha_Zaynt Skrevet 16. september 2004 Forfatter Del Skrevet 16. september 2004 ingen forslag? Lenke til kommentar
halvardm Skrevet 16. september 2004 Del Skrevet 16. september 2004 Det er vel <div id="link1"> Lenke til kommentar
EZAccess Skrevet 16. september 2004 Del Skrevet 16. september 2004 <a class="link4" href=""></a> Må vel ha med alle for at det skal funke. a.link4 {} a.link4:link {} a.link4:visited { } a.link4:active { } a.link4:hover {} Lenke til kommentar
Tha_Zaynt Skrevet 16. september 2004 Forfatter Del Skrevet 16. september 2004 (endret) Dette funka heller ikke: <div class="links1"><a class="link1" href="#"><span></span></a></div> <div class="links2"><a class="link2" href="#"><span></span></a></div> <div class="links3"><a class="link3" href="#"><span></span></a></div> <div class="links4"><a class="link4" href="#"><span></span></a></div> <div class="links5"><a class="link5" href="#"><span></span></a></div> <div class="links6"><a class="link6" href="#"><span></span></a></div> style.css .links1{ background: url(images/aboutme.png) top left no-repeat; height:32px; width:127px; } .link1 a { background: url(images/aboutme.png) top left no-repeat; } .link1 a:hover { background-image: url(images/aboutmehover.png); } .link1 a:active{ background-image: url(images/aboutmehover.png); } .link1 a:visited{ background-image: none; } .links2{ background: url(images/webdesign.png) top left no-repeat; height:32px; width:118px; left: 135px; position: absolute; top: 8px; } .link2 a { background: url(images/webdesign.png) top left no-repeat; } .link2 a:hover { background-image: url(images/webdesignhover.png); } .links3{ background: url(images/friends.png) top left no-repeat; height:32px; width:114px; position: absolute; left: 253px; top: 8px; } .link3 a { background: url(images/friends.png) top left no-repeat; } .link3 a:hover { background-image: url(images/friendshover.png); } .links4{ background: url(images/guestbook.png) top left no-repeat; height:32px; width:119px; position: absolute; left: 367px; top: 8px; } .link4 a { background: url(images/guestbook.png) top left no-repeat; } .link4 a:hover { background-image: url(images/guestbookhover.png); } .links5{ background: url(images/gallery.png) top left no-repeat; height:32px; width:122px; position: absolute; left: 486px; top: 8px; } .link5 a { background: url(images/gallery.png) top left no-repeat; } .link5 a:hover { background-image: url(images/galleryhover.png); } .links6{ background: url(images/links.png) top left no-repeat; height:32px; width:122px; left: 608px; top: 8px; position: absolute; } .link6 a { background: url(images/links.png) top left no-repeat; } .link6 a:hover { background-image: url(images/linkshover.png); } Endret 16. september 2004 av Tha_Zaynt Lenke til kommentar
halvardm Skrevet 16. september 2004 Del Skrevet 16. september 2004 Tror ikke du skal bruke "class" på div'er. Det gjør ihvertfall ikke jeg. Prøv med "ID" som jeg skrev ovenfor. Lenke til kommentar
Tha_Zaynt Skrevet 16. september 2004 Forfatter Del Skrevet 16. september 2004 (endret) Har funka før.. Som jeg har fostått det brukes id når klassen er definert slik: div#meny{ masse rart... } Mulig jeg har misforstått.. Endret 16. september 2004 av Tha_Zaynt Lenke til kommentar
IRRupt Skrevet 16. september 2004 Del Skrevet 16. september 2004 Tror du må bruke id ja. Her er koden som jeg bruker,: <li><a href="#" id="test"><span class="hidden">Test</span></a></li> #test { height:Xpx; width:Xpx; background-image: url(tilbilde.jpg); display:block; } #test:hover { background-image: url(hover.jpg); } Men det kan jo være en idé å benytte seg av background position istedenfor å preloade alle bildene som trengs. Kan lese mer om det her. Lenke til kommentar
PoleCat Skrevet 16. september 2004 Del Skrevet 16. september 2004 Dere som opererer med tomme a-elementer her, slutt med det, det er helt på trynet! div#menu ul { list-style: none; position: absolute; height: 19px; overflow: hidden; width: 241px; } div#menu ul li { display: inline; float: left; } div#menu li a { display: block; overflow: hidden; padding: 19px 0 0 0; height: 0 !important; height: 19px; background-repeat: no-repeat; } div#menu li a:hover { background-position: 0 -19px; } .home { background-image: url("gfx/menu/home.gif"); width: 48px; } .portfolio { background-image: url("gfx/menu/portfolio.gif"); width: 72px; } .profile { background-image: url("gfx/menu/profile.gif"); width: 59px; } .contact { background-image: url("gfx/menu/contact.gif"); width: 62px; } <div id="menu"> <ul> <li><a class="home" href="index.php">Home</a></li> <li><a class="portfolio" href="index.php?page=portfolio">Portfolio/showroom</a></li> <li><a class="profile" href="index.php?page=profile">Personal profile</a></li> <li><a class="contact" href="index.php?page=contact">Contact information</a></li> </ul> </div> </div> Eksempelet over er hvordan jeg har gjort den på siden min. Lenke til kommentar
PoleCat Skrevet 16. september 2004 Del Skrevet 16. september 2004 Tror ikke du skal bruke "class" på div'er. Det gjør ihvertfall ikke jeg.Prøv med "ID" som jeg skrev ovenfor. En ID er unik og skal bare brukes en gang i dokumentet, en klasse kan brukes flere ganger. En klasse angis med "." i css, mens en id med "#". #id {} .klasse {} Selvsagt kan man bruke klasse på div's. Lenke til kommentar
Chasseur Skrevet 18. september 2004 Del Skrevet 18. september 2004 må jeg forandre så mye PC? Jeg som akkurat ble ferdig med min første CSS fil... Lenke til kommentar
PoleCat Skrevet 18. september 2004 Del Skrevet 18. september 2004 må jeg forandre så mye PC? Jeg som akkurat ble ferdig med min første CSS fil... Du må ikke, men jeg anbefaler det. Lenke til kommentar
Purify Skrevet 18. september 2004 Del Skrevet 18. september 2004 Du burde absolutt forandre så mye. Å lage en div til hvert enkelt menyelement er jo rimelig unødvendig og vanskelig. 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å