Rollover med to forskjellige bilder

[halvardm]

Driver å lager en liten side, men så har jeg fått et lite problem.

Skal ha noen bilder med rollover.

Det er to og to bilder ikke et bilde av to ting.

Jeg har søkt her på forumet og kun funnet de med background-postition: -19px;

osv. Men jeg må ha en annen måte å gjøre det på.

Noen som kan hjelpe meg?

Endret 4. oktober 2004 av Skomaker

[Mira]

Går ut ifra at du ikke vil benytte Javascript, eller?

[halvardm]

Jepp.

 

EDIT: Den metoden bruker jeg på en annen side.

Men JS er jo bare stygt.

Endret 4. oktober 2004 av Skomaker

[mohuhau]

Du kan jo enten sette bildene sammen og endre plasseringen av bakgrunnen som du sier. Dette har den fordelen at bildet da allderede er lastet ned til nettleseren når du tar mouse-over. En annen måte å gjøre det på er å bare endre bakgrunnsbilde på mouse-over SLik

 

a { background-image: url(bilde.jpg); display: block;}

og på mouse-over:

a:hover { background-image: url(bilde-hover.jpg); }

[halvardm]

Problemet er at en del bilde er transperant så jeg må drive å finpusse det for å få det helt riktig.

 

+ At det er 3 forskjellige bilder og at det ikke skal være tekst over de.

Endret 4. oktober 2004 av Skomaker

[PoleCat]

Hva er egentlig problemet? Hvorfor kan du ikke bruke Pixy's metoden? (Den du beskriver i første post.)

[halvardm]

Ok, skal se om jeg greier å gjøre det sånn.

Link til den siden?

[halvardm]

Hvordan få listen til å gå horisentalt?

[FuLu]

Føler meg som deltaker på et "svare-maraton"

 

Du tenker på UL LI liste? Hvis du vil a LI'ene skal komme horisontalt, setter du bare li { display: inline; } f.eks

[Haraldson]

float:left; på li og display:inline; på ul?

[halvardm]

Jeg har det, men listen går nedover

 

CSS:

div#menu{
height: 121px;
width: 766px;
background:url(meny.BMP) no-repeat;
float:left;
}

div#menu ul li {
 display: inline;
 float: left;
 margin-left: 50px;
}

div#menu li a {
overflow: hidden;
 padding: 29px 0 0 0;
 height: 30px;
 background-repeat: no-repeat;
}

div#menu li a:hover {
 background-position: 0 -29px;
}

.home {
 background-image: url("knapp2.gif");
 width: 100px;
}

.portfolio {
 background-image: url("knapp1.gif");
 width: 170px;
}

.contact {
 background-image: url("knapp3.gif");
 width: 170px;
}

 

HTML:

<div id="menu">
    <ul>
         <li><a class="home" href="">Home</a></li>
         <li><a class="portfolio" href="">Portfolio</a></li>
         <li><a class="contact" href="">Contact</a></li>
       </ul>
</div>

Endret 4. oktober 2004 av Skomaker

[Haraldson]

Du må fortsatt legge til display:inline; på div#menu ul, om jeg ikke husker feil.

[halvardm]

Jeg har det.

Hvis du ser etter

[Haraldson]

Du har det på div#menu ul li ja...

[halvardm]

Aha...

Skal prøve..

 

EDIT: Ahh, det funker ikke! Dette går meg på nervene!

Endret 4. oktober 2004 av Skomaker

[Haraldson]

Jeg orker ikke sjekke hvordan jeg gjorde det, da jeg er på skola uten tilgang på annet enn IE. Kan du ikke se her da, på hvordan jeg har gjort det?

[PoleCat]

Er det slik i alle lesere? Er det meningen at alle lenkene skal være 50px fra hverandre? Forresten sett display: block på div#menu li a.

[halvardm]

Aha, nå fikk jeg den andre opp på linje med den første. Men den tredje er fortsatt under.

Men hvordan får jeg vekk teksten altså link teksten. ("Låner" koden til PC på demoted.org)

Endret 4. oktober 2004 av Skomaker

[PoleCat]

div#menu li a {
display: block;
overflow: hidden;
padding: 29px 0 0 0;
height: 0 !important; 
height /**/: 29px;
background-repeat: no-repeat;
}

 

...for å fjerne teksten. Er det mulig at det ikke er "plass", siden den tredje lenken hopper ned på neste linje?