Problemer med css-knapper i Opera

[travis_g]

Holder på med en side for Halden Røde Kors

 

Organisasjonen ønsker å ha lik layout på alle sine sider.

Lik siden til Norges Røde Kors

 

Det dukker opp et lite problem med menyen, Som dere selv kan se i Opera og FF.

 

I IE er det som det skal.

 

HTML:

<div id="hovedmeny">

<a class="meny1" href="index.php"><span>:: Engasjer Deg</span></a>
<a class="meny2" href="index.php"><span>:: Vårt Arbeid</span></a>
<a class="meny3" href="index.php"><span>:: Nyheter Og Presse</span></a>
<a class="meny4" href="index.php"><span>:: Om Røde Kors</span></a>
 
</div>

 

CSS:

a.meny1, a.meny2, a.meny3, a.meny4 {
width: 110px; height: 30px; text-decoration:none;
}

a.meny1 { background:url('bildefiler/meny1.gif') top no-repeat; width: 100px; }
a.meny2 { background:url('bildefiler/meny2.gif') top no-repeat; width: 91px; }
a.meny3 { background:url('bildefiler/meny3.gif') top no-repeat; width: 125px; }
a.meny4 { background:url('bildefiler/meny4.gif') top no-repeat; width: 99px; }

#hovedmeny a:hover {
background-position: bottom;
text-decoration: none;
}
#hovedmeny span {
margin: 0;
visibility: hidden;
}

[travis_g]

Er det ingen som kan hjeøpe meg med dette?

[Kim T]

Forsøk med dette:

a.meny1, a.meny2, a.meny3, a.meny4 {
width: 110px; height: 30px; text-decoration:none;
display: block;
}

 

Mener det bør fungere....

[travis_g]

Nei, det fungerer ikke. Da kommer de bare under hverandre

[Kim T]

Hmm du bær vel strengt tatt legge menyen din i "lister".

 

Da kan du gjøre slik

 

<ul id="meny">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>

 

For å definere en høyde og bredde må man display block hvis jeg ikke husker feil.

 

da må du gjøre slik i CSS stilen din.

#meny li {
display: inline;
display: block;
}

[Steinmann]

kim: WTF? float: left er det du ser etter...

[Kim T]

Hmm er jeg helt på jordet eller? Mener nå at en meny skal legges i lister?

[Steinmann]

jada, men hva skjer med:

display:inline;

display: block;

 

?

[Kim T]

Ups... Sorry for den var kanskje litt rask der ser jeg.. "Display: block" fungerte ikke der nei.

[travis_g]

Det ble akkurat det samme resultatet.

 

Det som er feil, er at opera ikke er villig til å bruke:

 

a.meny1, a.meny2, a.meny3, a.meny4 {
width: 110px; height: 30px; text-decoration:none;
}

 

visker som den ikke vil bruke den koden. Har gått gjennom kodene, men kan ikke finne noe små feil som kan gjøre det heller

 

Jeg har brukt akkurat samme koden på en annen side jeg har laget, men da skulle knappene under hverandre, så da brukte jeg liste.

 

Men vist jeg bruker lister nå, så får jeg ikke knappene etter hverandre vannrett.

 

 

Woooho 200 innlegg.

Endret 23. februar 2006 av travis_g

[Kim T]

Det er jo her "display: inline;" kommer inn får å få dem vannrett etter hverandre...

[travis_g]

Jeg vet, men det er ikke det som er problemet. Vist du følger linken jeg har lagrt ut, så vil du se hva problemet er . Jeg har også skrevet det : Men jeg kan godt skrive det igjen:

 

Det som er feil, er at opera ikke er villig til å bruke:

 

a.meny1, a.meny2, a.meny3, a.meny4 {

width: 110px; height: 30px; text-decoration:none;

}

 

visker som den ikke vil bruke den koden. Har gått gjennom kodene, men kan ikke finne noe små feil som kan gjøre det heller

[Kim T]

Hvorfor er ikke dette to bilder istedet for et? Er dette en teknikk som jeg ikke har vært borti før?

 

 

Hvis det er det så lurer jeg på hvordan du bruker dem? Siden det bildet jeg viser bare er et bilde og ikke to bilder som jeg ville ha brukt.

[travis_g]

Jepp det er en måte å gjøre det på. Det gjør at hele bildet blir lastet når siden lastet, slik at man ikke får forsinkelse når man holder pekeren over knappen.

[timitim]

Jepp det er en måte å gjøre det på. Det gjør at hele bildet blir lastet når siden lastet, slik at man ikke får forsinkelse når man holder pekeren over knappen.

5654215[/snapback]

 

Du bør nok ha dei som hvar sin fil og bruke et JavaScript for mouse over effekten.

[Kim T]

Nei, du trenger ikke javascript her.. Bare bruker det mørkeste bildet som background image på a:hover. Dvs med CSS kan du løse dette fint uten javascript.

Endret 23. februar 2006 av kimthoma

[travis_g]

Nei, du trenger ikke javascript her.. Bare bruker det mørkeste bildet som background image på a:hover.  Dvs med CSS kan du løse dette fint uten javascript.

5655937[/snapback]

 

Spørsmålet i denne posten er ikke HVORDAN jeg skal gkøre det. Jeg skal bruke CSS. Ferdig med det. Jeg lurer på hvordan jeg kan få løst problemet som har oppstått.

[Kim T]

Vet ikke hvorfor det ikke fungerer slik du vil ha det i Opera. Har din "a:hover" måte blitt brukt andre steder som har fungert i Opera? Mitt forslag er å dele det opp i to bilder og bruke det ene bildet på a:hover. Har ikke sett din metode blitt brukt før.

[funkweb]

Denne type rollover effekt lar deg bruke en eller flere bilder på en og samme fil.

I dette tilfelle: normal, hover og active.

 

fast rollover without preload

[Kim T]

Det må jeg si. Lærer noe nytt hver dag...