Jump to content
Sign in to follow this  
Degeim

Design med "strukket" bakgrunnsbilde

Recommended Posts

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

Share this post


Link to post

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.

Share this post


Link to post

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

Edited by Degeim

Share this post


Link to post

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)

Share this post


Link to post
... 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.

Share this post


Link to post

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

 

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

 

Takk,

Degeim

Edited by Degeim

Share this post


Link to post
Ok, jeg fikk det til nå (skulle bare mangle, så detaljerte beskrivelser jeg har fått :D ). 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.

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...