hvorfor funker ikke css rolloveren min?

[Tha_Zaynt 2]

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 2]

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

[Tha_Zaynt 2]

ingen forslag?

[halvardm 0]

Det er vel <div id="link1">

[EZAccess 0]

<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 {}

[Tha_Zaynt 2]

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);
  }

Edited September 16, 2004 by Tha_Zaynt

[halvardm 0]

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 2]

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

Edited September 16, 2004 by Tha_Zaynt

[IRRupt 1]

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 0]

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 0]

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 5]

må jeg forandre så mye PC?

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

[PoleCat 0]

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 0]

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