Plassere bilde i CSS

[SimDaDim]

På denne siden skulle jeg ha plassert ett bilde på høyre side av headeren. Dette bildet skal så fortsette ned i øverste delen av høyre meny, der det står "hva skjer"?

 

Altså, helt til høyre i id-klassen der det står "Sandefjord Swingklubb" skal det settes inn et bilde på høyre side. Dette bildet er høyere enn klassen, og vil derfor bli kappet hvis jeg setter det rett inn i samme id klasse som overskriften. Det jeg skal ha det til er altså å forstette ned til klassen under der det står "hva skjer". Bildet skal altså ligge bak teksten begge steder.

 

Jeg kan jo få til dette ved å dele opp bildet og legge hver halvdel i hver sin klasse. Men det finnes ikke no annen måte da?

[bynhffba]

#ditt-bilde { position: absolute; }
#rightcol { z-index: 10; }

Plasser bilde sånn det skal være på siden. Tror det skal fungere da. Er ikke sikker på om tekst er standard øverst, så kan hende den z-index egenskapen er unødvendig.

[SimDaDim]

Nope, løser ikke saken...

 

Dessuten ser det ut til at position absolute legger bilde over teksten. Det skal ikke skje.

[Wizendraw]

Kan du ikke bare dele opp bildet slik du sier? Det er den enkleste måten.

[SimDaDim]

Men det må da finnes no måte å gjøre det på mener jeg? Plasere bilde helt til høyre i id classen "header", og gjøre så bildet kan være større en klassen, men ligge under teksten.

[Anders Moen]

Ikke sikker på hva du mener, men mener du slik som på bildet nedenfor?

 

For da er det bare å bruke (CSS): img { float: right; }

lol.bmp

Endret 29. januar 2007 av Andy-Pandy

[SimDaDim]

Ja, det stemmer andy. men bildet er høyere en klassen der overkriften er. Så, bildet vil altså bli kuttet i bunnen, eller klassen vil utvide seg. Det jeg vil ha er at bildet da skal fortsette over i klassen under, og legge seg bak teksten der.

[bynhffba]

Legg dette inn i #rightcol:

position: relative;
z-index: 99;

Teksten vil nå plassere seg over bildet.

 

Legg inn bildet du skal ha i HTML dokumentet og gi det en ID. Gi så ID'en disse egenskapene i CSS:

position:absolute;
z-index: 0;

Her må du selv legge inn egenskaper som plasserer den riktig (da jeg testet dette ut, brukte jeg left: 68%; right: 32%; top: 30px; - men dette ser ikke særlig bra ut når du gjør vinduet mindre).

 

Dette er kanskje ikke den beste måten å løse problemet med plassering av bildet på, men det fungerte ihvertfall da jeg prøvde (bortsett fra dette med at det så dårlig ut når nettleservinduet ble mindre, men det burde finnes en måte som løser dette).

[SimDaDim]

Hvordan funker dette da hvis man har annen oppløsning på skjermen?

[bynhffba]

Nå har jeg funnet en løsning som fungerer samme hvordan du justerer nettleseren.

 

Legg dette i #header:

position: relative;

Så kan du posisjonere bildet ditt med utgangspunkt i størrelsen til headeren. Bildet går da nedover i neste klasse og blir bak teksten viss du har gjort slik som jeg beskrev i forrige post.

 

Det bildet jeg brukte når jeg prøvde er 100px bredt, for dette brukte jeg koden under og da så det bra ut:

#bildet { 
 position: absolute;
 top: 10px;
 left: 620px;
}

Endret 29. januar 2007 av bynhffba

[SimDaDim]

Tusen hjertlig takk