Bakgrunnsbilder sin posisjon?

Arne · 13. mars 2006

Hei!

Emnetittelen var kanskje ikkje så beskrivende, menmen...

Eg har to tre bilder som eg skal plasere på toppen, i midten og på botnen av ein div.(Bakgrunnsbilder)

Korles skal eg skrive CSS-koden?

rødøye · 14. mars 2006

Kjem an på korleis du meinar. Kan du lage ei skisse over kva du tenkar deg? Eg kan ikkje berre hoste opp litt CSS utan å vite korleis du skal bruke det.

qualbeen · 14. mars 2006

inne i en div kan du kun ha ett bakgrunnsbilde. Dette kan du angi ved f.eks.

.trallallalla{
   background: #FFFFFF url("dittbilde") repeat:no-repeat;
   heigth:100px;
   width: 33%;
}

ved å skrive <div class="trallala"> vil du nå få dette bildet!

om du ikke trenger å ha det som bakgrunnsbilde kan du bare putte bildet inn i en div og så bruke position:absolute på div'n (og sette på left: & right: -verdier)..

Arne · 14. mars 2006

Dette er bilda som skal danne ein boks.

Då må eg vel lage 3 div'ar?

qualbeen · 14. mars 2006

det enkelsete er å ha tr div-er ja. sett "repeat:repeat-y" på element nr 2

Arne · 14. mars 2006

Sjå her f. eks.:

Heilt nede i høgre hjørne er det ein kvit "flekk" kjem den med på biletet?

Det må den jo ikkje gjere.

EDIT: Copyright...Hehe...Neidå, berre eit eksempel...

EDIT2: Tusen takk. *Starte_å_kode*

Endret 14. mars 2006 av Fjott

qualbeen · 14. mars 2006

jeg ser ingen hvit flekk når jeg trykke på bildet...

Sikker på det ikke er skjermen din i så fall?

Arne · 14. mars 2006

Hehe...

Eg lurar på ein ting:

Eg skal jo ha ein hoved-boks(div), og inni der skal dei 3 divene med bakgrunnsbilder vere. MEN! Oppå midt-bakgrunnsbildet (det som repeates), skal eg ha 2 diver. Ein for Linker, og ein for hovud-innhald.

Korleis skal eg leggje den oppå den diven som allereie er der?

Håpar eg forklarte meg bra nok.

qualbeen · 14. mars 2006

kun et forslag. Finns sikkert mange (bedre?) måter å løse dette på! Bytt fjerne om fra 'id' til 'class' om du har behov.

<div id="toppbilde"></div>
<div id="sidebildene">
 <div id="meny">blablabla</div>
 <div id="tekst">blablablablablablabla</div>
</div>
<div id="bunn">...</div>

Arne · 14. mars 2006

Aha! Takk! Eg har laga eit "utkast" som ikkje virker.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Temp1</title>
<link rel="stylesheet" type="text/css" href="temp1.css">
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="main"></div>
<div class="bottom"></div>
</div>
</body>
</html>

CSS:

body {
    
    }
.main {
     background-image: #00f url("middle.gif") repeat:repeat-y;
  min-height: 700px;
  }
.top {
    background: #00f url("top.gif") repeat:no-repeat;
 height: 200px;
 width: 800px;
 }
.wrap {
     width: #00f 800px;
  min-height: 900px;
  }
.bottom {
       background: #00f url("bottom.gif") repeat:no-repeat;
 width: 800px;
 height: 200px;
 }

...sikkert ein del bugs, men det kjem bere ei kvit side.

qualbeen · 14. mars 2006

kan du legge ut en url også?

ser en feil i css'n din:

.wrap {
width: #00f 800px;

min-height: 900px;

}

bør rettes til

.wrap {
   width: 800px;
   min-height: 900px;
}

du har også glemt å legge inn bredde på main, men det tror jeg ikke spiller så stor rolle her

Arne · 14. mars 2006

Ja, det endra eg.

Her er sida: http://arneweb.com/temp

Bilder: http://arneweb.com/temp/top.gif

http://arneweb.com/temp/middle.gif

http://arneweb.com/temp/bottom.gif

Arne · 16. mars 2006

Er det ingen som kan hjelpe?

**Runar** · 16. mars 2006

body {
}

.main {
background-image: #00f url('middle.gif');
min-height: 300px;
}

.top {
background: #00f url('top.gif');
height: 200px;
width: 800px;
}

.wrap {
width:  800px;
min-height: 100px;
}

.bottom {
background: #00f url('bottom.gif');
width: 800px;
height: 200px;
}

Du kan ikke bruke repeat:no-repeat, men du må bruke no-repeat hvis du ikke vil at det skal gjenta seg.

Har testa den nå, og den funker perfekt bortsett fra at bildene er litt store

qualbeen · 16. mars 2006

Du kan ikke bruke repeat:no-repeat, men du må bruke no-repeat hvis du ikke vil at det skal gjenta seg.
5761770[/snapback]

Jovisst kan man skrive repeat:no-repeat

http://www.w3schools.com/css/pr_background-repeat.asp

Loomy · 16. mars 2006

Du kan ikke bruke repeat:no-repeat, men du må bruke no-repeat hvis du ikke vil at det skal gjenta seg.
5761770[/snapback]

Jovisst kan man skrive repeat:no-repeat

http://www.w3schools.com/css/pr_background-repeat.asp

Langtifra. repeat:no-repeat; er ikke gyldig i noen sammenheng. Det Gyn3r nok mente var at man ikke kan skrive repeat:no-repeat som en del av shorthand-egenskapen background slik vedkommende hadde gjort - da bruker man bare no-repeat.

**Runar** · 16. mars 2006

Du kan ikke bruke repeat:no-repeat, men du må bruke no-repeat hvis du ikke vil at det skal gjenta seg.
5761770[/snapback]

Jovisst kan man skrive repeat:no-repeat

http://www.w3schools.com/css/pr_background-repeat.asp

Langtifra. repeat:no-repeat; er ikke gyldig i noen sammenheng. Det Gyn3r nok mente var at man ikke kan skrive repeat:no-repeat som en del av shorthand-egenskapen background slik vedkommende hadde gjort - da bruker man bare no-repeat.

5762512[/snapback]

Riktig =)

Skulle sagt klarere ifra hva jeg egentlig mente.

Arne · 16. mars 2006

No ser de kva eg meiner med kvite kantar rundt bildet:

http://www.arneweb.com/temp

**Runar** · 16. mars 2006

Er jo hvite flekker der fordi det er übermasse blått rundt.

Gjør bildet til bare det gråe så blir det nok bedre.

Arne · 16. mars 2006

Korleis får eg vekk det kvite på bildet?

Bakgrunnsbilder sin posisjon?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer