Hvordan få wrap til å følge main?

Torjus · 1. oktober 2006

Heisann, jeg har et problem her...

I wrap har jeg et bakgrunnsbilde som jeg vil at skal repetere seg selv nedover sammen med main...

Altså, hvis main innholder masse tekst, så vil at at wrap skal følge main div'n. Men det gjør den ikke. Se bilde for eksemepel.

Hvordan kan jeg få wrap til å følge main?

HTML:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<body>


	<div id="wrap">


<div id="main">

<p>masse tekst her</p>

</div> <!-- slutt main -->

	</div> <!-- slutt wrap -->

</body>

CSS:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

* { margin: 0; padding: 0 }

body {

background: url(images/hovedbg.jpg) #8e0000; repeat-x;

font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;

}

#wrap{

background: url(images/bg.jpg) repeat-y;

margin: 0 auto;

width: 1000px;

height: 700px;

}

#main

{

background: #FFFFFF;

display: block;

text-align: center;

margin: 0 auto;

width: 500px;

float: left;

}

Rinox · 1. oktober 2006

hmm... skjønner ikke helt problemet ditt... hvilket bilde snakker du om..?

rønning · 1. oktober 2006

Sett den bakgrunnen du har på <body> i <html> og sett wrapper-bakgrunnen på <body>

Torjus · 1. oktober 2006

hmm... skjønner ikke helt problemet ditt... hvilket bilde snakker du om..?

6976710[/snapback]

Her er et bilde av sida:

Det som jeg har ringet inn er bakgrunnsbildet som jeg vil skal repetere seg ned sammen med innholdet i main. Men jeg må nå sette en hight: x; verdi på wrap for at bakgrunnsbildet skal repetere seg ned, jeg vil at bakgrunnsbildet skal være like langt som main. Er det mulig?

funkyboy · 1. oktober 2006

Dette skyldes at du har satt høyde på #wrap. Dermed vil denne alltid være 700 px høy. Du kan eventuelt sette

padding-bottom {

xxxpx; /* (Antall pixels) */

}

i #main for å få til det du vil. Pluss at du tar bort linjen -> height: 700px; i #wrap.

rønning · 1. oktober 2006

du kan også bruke min-height på wrappen

funkyboy · 1. oktober 2006

du kan også bruke min-height på wrappen

6976810[/snapback]

Nåja. Det går selvfølgelig an å skrive inn den tag- en. Men den fungerer ikke nødvendigvis likt i alle browsere. Og det bør den jo gjøre.

rønning · 1. oktober 2006

i IE fungerer height som min-height gjør i gode browsere (arrest me if I'm wrong), så da kan det fikses med en liten hack:

min-height: 700px; !important;

height: 700px;

funkyboy · 1. oktober 2006

i IE fungerer height som min-height gjør i gode browsere (arrest me if I'm wrong), så da kan det fikses med en liten hack:
min-height: 700px; !important;

height: 700px;

6976909[/snapback]

Godt mulig det der fungerer.

Foretrekker selv å ikke lage hacks. Men det er meg. Vet aldri hva Microsoft finner på av oppdateringer etc. med tiden. Så der det er mulig, liker jeg best å skrive kun EN kode.

Torjus · 1. oktober 2006

Dette skyldes at du har satt høyde på #wrap. Dermed vil denne alltid være 700 px høy. Du kan eventuelt sette

padding-bottom {

xxxpx; /* (Antall pixels) */

}

i #main for å få til det du vil. Pluss at du tar bort linjen -> height: 700px; i #wrap.

6976795[/snapback]

du kan også bruke min-height på wrappen

6976810[/snapback]

height: 700px; la jeg der kun for å vise hvor bakgrunnsbildet er. Når jeg tar vekk height: 700px; så går bakgrunnsbildet vekk pga wrap ligger under main og bildene som er rundt main.

Main vil aldri ha en fast høydeverdi siden dette er en blogg og det vil bli lagt til ny innlegg hele tiden.

padding-bottom {
xxxpx; /* (Antall pixels) */

}

6976795[/snapback]

Den kodesnutten skjønte jeg ikke helt, hvordan skal den virke?

Haraldson · 1. oktober 2006

Foretrekker selv å ikke lage hacks. Men det er meg. Vet aldri hva Microsoft finner på av oppdateringer etc. med tiden.

Ikke bekymre deg for akkurat det, du kommer til å bekymre deg til du bare har et par grå hår igjen på hodet.

padding-bottom {
xxxpx; /* (Antall pixels) */

}

Den kodesnutten skjønte jeg ikke helt, hvordan skal den virke?

Du skjønner ingenting fordi det ikke er mulig å skrive CSS med en syntax som er mer feil og ikke-fungerende.

Endret 1. oktober 2006 av Mr.Berg

Arve Systad · 1. oktober 2006

Når #main har float-eigenskapen blir jo den satt ut av den vanlige sideflyten, og problemet er det same som det som er beskrive her.

Torjus · 1. oktober 2006

Når #main har float-eigenskapen blir jo den satt ut av den vanlige sideflyten, og problemet er det same som det som er beskrive her.

6978097[/snapback]

Skjønte ikke helt det som stod på den siden, hvordan kan jeg fikse problemet mitt?

funkyboy · 2. oktober 2006

Foretrekker selv å ikke lage hacks. Men det er meg. Vet aldri hva Microsoft finner på av oppdateringer etc. med tiden.

Ikke bekymre deg for akkurat det, du kommer til å bekymre deg til du bare har et par grå hår igjen på hodet.

padding-bottom {
xxxpx; /* (Antall pixels) */

}

Den kodesnutten skjønte jeg ikke helt, hvordan skal den virke?

Du skjønner ingenting fordi det ikke er mulig å skrive CSS med en syntax som er mer feil og ikke-fungerende.

6978016[/snapback]

Oi, da. Den var ganske så ubrukelig ja, hehe. Går litt fort i svingene av og til.

Mente selvfølgelig:

#main {

padding-bottom: xxxpx; /* (Antall pixels) */

}

Arve Systad · 2. oktober 2006

Å legge til masse tomrom på bunnen vil jo berre bli dumt i og med at du då alltid vil ha XX pixlar tomrom der, uansett kor lang eller kort sida er.

Om du ikkje skal ha ein typisk sidebar kan du jo fjerne float-eigenskapen. Ellers må du cleare i bunnen, slik du kan lese om i lenka eg gav deg. Les den til du forstår, eg orkar ikkje å forklare det heile fleire gonger

glad · 3. oktober 2006

ser du har float: left på main diven, prøv og lag en div under main som har clear: both i css koden, da skulle wrap følge etter main.

Edit: diven med clear both på ha minst en px høyde

Edit2: han oppanfor sa visst det.

Endret 3. oktober 2006 av glad

Torjus · 3. oktober 2006

Okey, skal prøve det i kveld.

-Teddy- · 3. oktober 2006

Mener å huske at jeg fikk en div som var floatet til å gå over hele siden ved å bruke noe ala dette:

html, body{
min-height: 100%!important;
height: 100%;
}

#wrap{
min-height: 100%!important;
height: 100%;
}

Lenge siden, er ikke helt sikker på om det funker. Var iallefall viktig å ha med body, html. Prøv!

Endret 3. oktober 2006 av -Teddy-

Torjus · 3. oktober 2006

Mener å huske at jeg fikk en div som var floatet til å gå over hele siden ved å bruke noe ala dette:
html, body{
min-height: 100%!important;
height: 100%;
}

#wrap{
min-height: 100%!important;
height: 100%;
}
Lenge siden, er ikke helt sikker på om det funker. Var iallefall viktig å ha med body, html. Prøv!

6988760[/snapback]

Da ble bare wrapen strekt ned til bunnen av browseren, ikke i bunn der main er.

ser du har float: left på main diven, prøv og lag en div under main som har clear: both i css koden, da skulle wrap følge etter main.

Edit: diven med clear both på ha minst en px høyde

Edit2: han oppanfor sa visst det.

6988665[/snapback]

Jeg har float på meny osv så da vil jo alle disse divene bli plassert under main... så da går jo ikke det?

glad · 3. oktober 2006

wrap vil følge main viss du har clear: both i diven under.

Hvordan få wrap til å følge main?

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

Hvem er aktive 0 medlemmer