Webkafeen

[Jernlov]

men jeg har flere meny valg egentlig. må jeg gi hver li en id? <li id="li1"> f.eks også

#li1 li {

background-image: url(bilde1.jpg);

}

 

#li1 li:hover {

background-image: url(bilde2.jpg);

}

 

? det har jeg egentlig prøvd, men det gikk ikke helt trur jeg :S

 

har ett bilde for hver li, og det er 5stk av dem egentlig så.

Endret 21. august 2005 av skate4life

[Loomy]

Hmmm, fikk ikke helt det til å funke.

Om jeg har 100% bredde ligger boksen under den på 200px (og er like stor som viewport).

 

Edit: Når jeg fjerna bredda helt på den høyre boksen funka det, men ikke helt slik jeg hadde håpet. Om boksen på høyre siden blir høyere enn den andre, så fortsetter teksten under boksen på 200px. Eh, noen som forsto?

Hmm ja, innså akkurat det samme..

Sånn da!

[endrebjo]

men jeg har flere meny valg egentlig. må jeg gi hver li en id? <li id="li1"> f.eks også

#li1 li {

background-image: url(bilde1.jpg);

}

 

#li1 li:hover {

background-image: url(bilde2.jpg);

}

? det har jeg egentlig prøvd, men det gikk ikke helt trur jeg :S

har ett bilde for hver li, og det er 5stk av dem egentlig så.

 

Dette fungerer:

<ul>
<li id="item1"><a href="#">Knapp</a/></li>
<li id="item2"><a href="#">Knapp 1</a></li>
osv...
</ul>

 

li#item1 {
background-image: url(bilde1.jpg);
}

li#item1:hover {
background-image: url(bilde1_hov.jpg);
}

li#item2 {
background-image: url(bilde2.jpg);
}

li#item2:hover {
background-image: url(bilde2_hov.jpg);
}
osv...

Endret 21. august 2005 av endrebjorsvik89

[DevN]

Hmm ja, innså akkurat det samme..

Sånn da!

Thats more like it!

 

Men blir det ikke det samme om jeg bare har to div-bokser, venstre og høyre, og bare setter 205px margin på høyre? Så da ut som resultatet ble det samme, så virket litt unødvendig med å ha en div inni den andre ... ?

 

Takk for hjelpen, da.

Endret 21. august 2005 av DevN

[Steinmann]

Hmm ja, innså akkurat det samme..

Sånn da!

Pent

 

Funka ikke i IE seff

 

Tror ikke jeg har sett noen gjøre det før

[Jernlov]

endrebjorsvik89 det gikk ikke :\

 

Got Grunge? <- Siden

[Steinmann]

endrebjorsvik89 det gikk ikke :\

 

Got Grunge? <- Siden

Du kan ikke ha inline.

Problemet her er at selve hover feltet er for lite så det er umulig å treffe

Set den til block, og gi den en bredde

[Jernlov]

Gjorde sånn

#menu ul li {
       display: block;
       width: 286px;
}

Og ingenting skjedde, har jeg gjort feil?

[Steinmann]

På webben er det fortsatt inline

 

Veit ikke hvor mye det har å si, men du mangler "fnutter" på alle url()

[Jakob K]

skate4life: Prøv denne metoden (fra Loomys epleweb).

[Jernlov]

reload? viser block her, nå også med ('---')

[Cucum(r)]

skate4life: Prøv denne metoden (fra Loomys epleweb).

Metoden med display: none (eller visibility: hidden) bør ungåes, sidan det ikkje blir vist i taleemulatorer o.l.

 

Bruk text-indent.

[Jakob K]

Så ikke så nøye på den, poenget var å bruke ett bilde, slik at man slipper lasting ved :hover.

[Jernlov]

gjorde det som står på epleweb og det funker (hittils bare gjort det med første valg) men bare halve bilde vises, og du ser at linken går nedover langt under bildet, hvorfor det?

 

Got Grunge?

Endret 21. august 2005 av skate4life

[Steinmann]

afrodude; problemet er at det ikke skjer noe

 

Nå fant jeg ut hvor menyen var :o

 

Trodde den var den menyen til venstre det var snakk om jeg :\

 

Øke høyden litt kansje

[Jernlov]

den skal være 42px høy, som er så høy den skal være :S den til siden er bare ett bilde hittils, vet ikke om jeg skal blog'e kan ikke php

[Steinmann]

Vurerer å sende en mail til dama som underviser i websider på HiO jeg altså. Tenker tilbake på ifjord og all vranglæren vi fikk.

[Garreth]

Jeg bruker Dave Shea sin metode for å bytte ut overskrifter med bilde.

 

<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>

/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

Det fungerer helt greit, men når jeg prøver å bruke denne metoden på et annet element enn H elementet så fungerer det ikke. Det er en plass jeg har brukt strong elementet på siden min (liten, uviktig overskrift som jeg ikke vil bruke h elementet på, men jeg vil at det skal se anderledes ut.)

 

Noen som vet om det ikke går ann å "bytte ut" strong elementet med et bilde?

 

<div id="top_right">
<strong><span></span>Liten overskrift</strong>
</div>
/*CSS*/
#top_right strong {
width: 120px;
height: 36px;
position: relative;
margin-left:25px;
}
#top_right strong span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

[Lovskogen]

Funker ikke image-replacement på <strong>?

[mikk-]

Strong er inline. Sett på display: block;