hvorfor funker ikke css rolloveren min?

Tha_Zaynt · 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>

Tha_Zaynt · 16. september 2004

finnes det en bedre måte å gjøre det på?

Tha_Zaynt · 16. september 2004

ingen forslag?

halvardm · 16. september 2004

Det er vel <div id="link1"> :hmm:

EZAccess · 16. september 2004

Må vel ha med alle for at det skal funke.

a.link4 {}

a.link4:link {}

a.link4:visited { }

a.link4:active { }

a.link4:hover {}

Tha_Zaynt · 16. september 2004

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

halvardm · 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.

Tha_Zaynt · 16. september 2004

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

IRRupt · 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.

PoleCat · 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.

PoleCat · 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.

Chasseur · 18. september 2004

må jeg forandre så mye PC?

Jeg som akkurat ble ferdig med min første CSS fil...

PoleCat · 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.

Purify · 18. september 2004

Du burde absolutt forandre så mye. Å lage en div til hvert enkelt menyelement er jo rimelig unødvendig og vanskelig.

Logg inn

hvorfor funker ikke css rolloveren min?

Anbefalte innlegg

Tha_Zaynt

Videoannonse

Tha_Zaynt

Tha_Zaynt

halvardm

EZAccess

Tha_Zaynt

halvardm

Tha_Zaynt

IRRupt

PoleCat

PoleCat

Chasseur

PoleCat

Purify

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer