Hvordan dele en side i tre med div-er?

[phex]

Hvordan deler man en side i tre med div-er? Har allerede laget en div som heter innhold, men hvordan får jeg de to andre venstre og høyre div-ene mine til å bli på venstre og høyre side av innhold div-en?

 

Håper noen skjønner hva jeg mener

 

Takk!

Endret 28. februar 2006 av phex

[mysjkin]

Se for eksempel

http://www.bluerobot.com/web/layouts/

 

M.

[travis_g]

Er jo flere måter å gjøre det på, men jeg pløeier å bruke denne:

 

HTML

<div id="div1">
<p>Innhold</p>
</div>

<div id="div2">
<p>Innhold</p>
</div>

<div id="div3">
<p>Innhold</p>
</div>

CSS

#div1, #div2, #div3 {
position: absolute;
border: 1px solid black;  /* Bare for å se divene på siden */
}

#div1 {
left: 10px;
width: 200px;
}

#div2 {
left: 210px;
width: 400px;
}

#div3 {
left: 610px;
width: 200px;
}

 

Hjalp det deg noe?

[Jesper Karsrud]

Hvorfor gi så dårlige navn på id? Id bør være litt mer beskrivende enn det der, IMO... Også skjønner jeg ikke hvorfor du bruker absolutt posisjonering når du fint kan gjøre det med floats som er tusen ganger lettere..

 

#left { float: left; width: 150px; }
#content { float: left; width: 400px; }
#right { float: left; width: 200px; }
.clear { clear: left; }

 

Markup blir ca. det samme, bortsett fra at du må legge til et element som kan cleare de floatede elementene slik at de blir liggende slik du vil...

[MC2]

barer lurer, (for at jeg har problemer med å få det til):

hva om #content skal være dynamisk, sånn at den fyller hele siden med #left boxen på venstre siden og #right boxen på høyre side?

[travis_g]

Hvorfor gi så dårlige navn på id? Id bør være litt mer beskrivende enn det der, IMO... Også skjønner jeg ikke hvorfor du bruker absolutt posisjonering når du fint kan gjøre det med floats som er tusen ganger lettere..

 

Er klar over det, men det var bare div1 osv for å vise.

Når det er sagt så synes jeg ikke divene skal gis navn etter hvor på siden de er plassert, men hva slags innhold de skal ha.

Dersom man skal endre oppsettet på siden, blir det mye enklere vist divene heter feks meny og innhold, og ikke høyre, venstre, midten, nede_til_venstre ol.

 

Når det gjelder position absolute, så kan det godt hende DU synes det er 1000 ganger enklere, men jeg like å bruke det, feks for å lettere kunne bestemme avstanden mellom divene ol. Dersom man feks vil at diven til høyre skal stå 50px lenger ned på siden enn de andre.

 

Men det er bare min mening.

Endret 28. februar 2006 av travis_g

[ken8]

barer lurer, (for at jeg har problemer med å få det til):

hva om #content skal være dynamisk, sånn at den fyller hele siden med #left boxen på venstre siden og #right boxen på høyre side?

 

Lurer også på hvordan div'ene #left og #right kan få høyde lik #content når #content er mye lengre enn #left og #right.

 

Med en tabell skjer det jo av seg selv.

 

Noen som har en lett løsning på dette?

[Jesper Karsrud]

Du kan bruke faux columns, som nok er det enkleste. Finnes andre måter

også, men jeg husker dem ikke akkurat nå. Prøv et søk her på forumet og

google

[Matsemann]

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

Ganske bra!

 

Denne jeg bruker:

CSS:

#menyleft,#content,#menyright,#footer {
overflow:hidden;
display:inline-block;
}
#menyleft,#content,#menyright {
float:left;
}
#menyleft {
width: 20%;
}
#content {
width:60%;
}
#menyright {
width:19.9%;
}
#footer {
clear:left;
width: 100%;
}

HTML:

<div id="menyleft">
Menyvenstre
</div>
<div id="content">
midten
</div>
<div id="menyright">
høyre
</div>
<div id="footer">
Footer med clear.
</div>

Vil du få alle 3 til å se like lange ut, legger du en div utenpå alt, og setter en bakgrunn. Fjern såklart bakgrunnen fra de andre divene.

 

EDIT: Fordelen med den her, er at den hverken bruker hacks eller andre ting, men er faktisk "god" kode. Samtidig kollapser den ikke.

[/edit]

 

Mer her:

http://www.alistapart.com/articles/fauxcolumns/

god artikkel om hvordan du kan få det til å se ut som at alle 3 divene er like lange!

 

 

EDIT: En litt rar måte kan være å lage 2 divs ved siden av hverandre, og så lage 2 divs til inni den ene

Endret 28. februar 2006 av matsemann1

[MC2]

hmm, forsatt ingen som har svart på spørsmålet mitt....

 

drit enkelt med tables da....

[Jesper Karsrud]

Edit: Jeg tenkte på feil person og feil spørsmål...

Endret 28. februar 2006 av Jibril2k

[Matsemann]

hmm, forsatt ingen som har svart på spørsmålet mitt....

 

drit enkelt med tables da....

5679935[/snapback]

Du kan vel bruke en prosentverdi i den midterste DIV'en, og en fast verdi i de to på sidene (px).

Du må da ikke ha en wrapper rundt alle divene, da 80% i den midterste diven = 80% av bredden på wrapperen, og ikke bredden på selve nettleser vinduet.

[MC2]

problemet med 80% er at det ikke er hele siden... for at det varierer fra oppløsning til oppløsning. og #left og #right skal være faste.

 

@Jib

visste ikke at ditt innlegg var rettet mot meg, men uansett. det er samme problemet med det jeg finner på google, finner ikke noe med faste side venstre og høyre bokser...

[travis_g]

Bare en liten ting. Jeg synes alle divene bør ha en fast gitt bredde, dette gjør at innholdet ser bra ut uansett oppløsning brukeren har dersom brukeren har en utrolig høy oppløsning: 1200x et eller aant. Husker ikke eksakte nå, vil siden se veldig forskjellig ut i forrhold til en som bruker 800x640, åpå grunn av bilder ol på siden.

 

Jeg vet dette er satt på spissen, men det er faktisk en del brukere som har 800x640 og 1200x1100.

[blackbrrd]

matsemann1 har da gitt noe som ser ut som et godt svar, kanskje du burde lese det litt nøyere?

[MC2]

Bare en liten ting. Jeg synes alle divene bør ha en fast gitt bredde, dette gjør at innholdet ser bra ut uansett oppløsning brukeren har dersom brukeren har en utrolig høy oppløsning: 1200x et eller aant. Husker ikke eksakte nå, vil siden se veldig forskjellig ut i forrhold til en som bruker 800x640, åpå grunn av bilder ol på siden.

 

Jeg vet dette er satt på spissen, men det er faktisk en del brukere som har 800x640 og 1200x1100.

5680189[/snapback]

det er derfor man ikke setter fast bredde på sida... det er nettopp derfor man bruker liquid layouts da... men hvis ting begynner å se dårlig ut ved 400px bredde setter du bare inn min-width:400px.

[Edorph]

MC2, har du sett denne?

 

http://www.alistapart.com/articles/holygrail

- have a fluid center with fixed width sidebars,

- allow the center column to appear first in the source,

- allow any column to be the tallest,

- require only a single extra div of markup, and

- require very simple CSS, with minimal hacks patches.

[MC2]

hva mener du? det er det jeg sa i posten over. liquid layouts foran faste.

[Edorph]

Ah, da misforsto jeg. Jeg trodde du etterlyste en løsning på hvordan det kunne lages.

[MC2]

Ah, da misforsto jeg. Jeg trodde du etterlyste en løsning på hvordan det kunne lages.

5687580[/snapback]

ja. etterlyste også en løsning for 2 faste sidebars og en liquid content boks, men fant noe da... i webkafeen.

http://blog.html.it/layoutgala/LayoutGala13.html