Design med "strukket" bakgrunnsbilde

[Degeim]

Hei!

 

Jeg arbeider med et litt friskere design til siden min (den er veldig, veldig , veldig enkel foreløbig, så jeg vil ha den noe penere).

 

I forbindelse med dette, vil jeg gjerne vite hvordan det er mulig å ha som på denne siden: http://www.thinkfuzzy.net/ , der både menyen og selve hovudinnholdet er lagt inne i et opprevet ark (eller hva det nå er ).

 

Det jeg lurer på er hvordan man får dette til å virke uten at bildet blir strukket? Jeg innbiller meg at det er vha CSS, og at det er et bilde for toppen (avrevet papir), og et for bunnen (oppned avrevet papir) og et for midten, som kan gjentakes, evt bare hvit bakgrunnsfarge.

 

Kan noen bekrefte/avkrefte teorien min og komme med et enkelt eksempel på hvordan dette blir laget?

 

 

Takk,

Degeim

[Kannutt]

Se stilarket til siden her. Legg merke til feks #sidebarheader. Det er toppen du ser som et revet ark. Link til det bildet finner her.

Mellom toppbildet og bunnbildet ligger det bare en hvit bakgrunn.

[Degeim]

Takk skal du ha!

 

Jeg hadde egentlig allerede funnet det stilarket, men jeg ante ikke (og aner ikke) hvordan jeg anvender det. Kan noen gjøre meg den kjempetjeneste å filtrere ut det som er nødvendig for å få til dette fra stilarket, og vise meg en enkel html-kodesnutt der dette er brukt?

 

EDIT:

Jeg tror dette er det fra stilarket som er nødvendig:

 

#sidebar
{
background: #FFFFFF;
display: block;
text-align: left;
width: 190px;
}

#sidebarheader
{
background: url('images/sidebarheader.png') no-repeat;
width: 190px;
height: 66px;
}

#sidebarfooter
{
background: url('images/sidebarfooter.png') no-repeat;
width: 190px;
height: 66px;
}

 

Er det riktig?

 

I så fall; hvordan lager jeg det i et html-dokument?

 

Takk,

Degeim

Endret 2. august 2006 av Degeim

[RulleRimfrost]

Bygges opp av enten en tabell med 3 rader eller 3 div'er. I den øverste cellen eller div'en legges toppen inn som et bakgrunnsbilde med css-kode

{background:url('......../bakgrunn_top.jpg') no-repeat;}

i midt-delen legges

{background:url('....../bakgrunn_midt.jpg') repeat-y;}

nederst legges

{background:url('......../bakgrunn_bunn.jpg') no-repeat;}

 

Jo mer innhold, jo mer vil bakgrunnen i midten gjentas (repeat-y)

[Kannutt]

Slik:

 

HTML

 

<div id="sidebarheader"></div>

 

<div id="sidebar">Bla, bla, bla</div>

 

<div id="sidebarfooter"></div>

[RulleRimfrost]

... og det kan være en ide å legge til

clear: both;

nederst i #-elementene i css-koden din, ellers kan div'ene finne på å legge seg ved siden av hverandre...

[Kannutt]

... og det kan være en ide å legge til

clear: both;

nederst i #-elementene i css-koden din, ellers kan div'ene finne på å legge seg ved siden av hverandre...

6603578[/snapback]

 

Eller bruke en wrapper som var gjort på siden det var snakk om.

[Degeim]

Ok, jeg fikk det til nå (skulle bare mangle, så detaljerte beskrivelser jeg har fått ). Takk skal dere ha begge to.

 

Men hva er en "wrapper" som Kannut snakket om?

 

Takk,

Degeim

Endret 2. august 2006 av Degeim

[Kannutt]

Ok, jeg fikk det til nå (skulle bare mangle, så detaljerte beskrivelser jeg har fått ). Takk skal dere ha begge to.

 

Men hva er en "wrapper" som Kannut snakket om?

 

Takk,

Degeim

6603644[/snapback]

 

En div som ligger rundt de andre divene. Med den kan du plassere elementene samlet dit du vil ha dem.