Få divs til å flytte seg dynamisk

[TCi]

Hei

 

Jeg sitter å eksperimenterer med CSS og DIVs. Har laget 4 divs og satt de opp slik som de aller fleste websider, men det jeg lurer på er følgende:

 

- Hvordan får jeg de andre DIVs til å flytte seg etter innholdet i de andre? Slik at de ikke overlapper hverandre osv.

 

 

Håper jeg gjorde meg forståelig

[Haraldson]

Dette løses enkelt med float:left; for å plassere de ved siden av hverandre (så sant det er plass i bredden), og når det gjelder høyde er det i utgangspunktet ingen problemer.

 

Om du vil ha en kolonne-layout der alle kolonnene er like høye/lange, leser du her.

 

Ellers er det greit å poste en link her, litt enklere å svare da, samtidig som det blir enklere å skjønne akkurat hva du mener.

[PoleCat]

Ikke bruk absolutt-posisjonering, det finnes ingen clearanse-hack for det (enda).

La boksene posisjonere seg i forhold til hverandre.

 

Ta en titt på sidene til de fleste av gjengangerene her (mine egne også, for den saks skyld), så ser du fort logikken bak prinsippet.

[TCi]

Takk for tips sålangt, det absolute-position tipset var nyttig

 

Men det ser ikke bra ut på siden akkurat no.. som sagt bare prøver å lære meg det. Har holdt på med tabeller før..

 

Her er linker for de som ønsker å se litt på det:

 

Siden | CSS

 

EDIT: Så dersom jeg bruker float: left så vil de flytte seg etter hva slags innhold det er i DIV'en over? Slik at de strekker seg ned til de osv? Eller vil de overlappe? Får liksom ikke dette til å fungere helt.. Pluss at rendringen av siden ble litt rar i Opera 7.6..

Endret 28. november 2004 av TCi

[Cucum(r)]

Ikke bruk absolutt-posisjonering, det finnes ingen clearanse-hack for det (enda)..

Hva sa du?

[PoleCat]

Ikke bruk absolutt-posisjonering, det finnes ingen clearanse-hack for det (enda)..

Hva sa du?

Jeg holder meg tydeligvis for lite oppdatert.

[PoleCat]

Tok meg lov til å skrive om litt på koden din jeg, fjernet masse unødvendig kode og la til litt. Dette ser ut til å fungere fint i Firefox 0.9, med noen små visuelle bugs selvsagt. Skal ikke hjelpe deg for mye, det lærer man ingenting av.

 

#banner{
float: left;
width: 600px;
height: 100px;
padding-left: 3px;
padding-right: 3px;
border: 1px solid #000;
}

#meny{
float: left;
width: 150px;
padding-left: 3px;
padding-right: 3px;
border: 1px solid #000;
}

#innhold{
float: left;
width: 440px;
padding-left: 3px;
padding-right: 3px;
border: 1px solid #000;
clear: left;
}

#copyright{
float: left;
clear: left;
width: 600px;
height: 100px;
border: 1px solid #000;
}

 

Husk at padding legges til på bredden (ikke i IE5), og derfor er det greit å bruke !important-hacken her.

 

Du kan også ta en titt på noen eksempellayouts, og titte litt på koden der, den beste måten å lære på faktisk.

Endret 28. november 2004 av PoleCat

[TCi]

Takk for hjelp, men jeg får ikke til å legge menyen under banneren og til høyre for innholdet. Har sett på noen sider, men blir forvirret over all koden. Noen som kan tipse meg?

[PoleCat]

Ah, regner med du bruker idiotiske Opera. Jaja, skal ikke si noe jeg.

 

Vel, uansett, det du kan gjøre er å sette alle div'ene dine inne i en annen div, på følgende måte:

 

#wrap {
 width: 600px;
}

h1 {
padding: 0 3px;
border: 1px solid #000;
height: 100px;
}

#meny {
float: left;
width: 146px !imoportant;
width /**/: 150px;
padding: 0 3px;
border: 1px solid #000;
}

#innhold {
float: left;
width: 444px;
width /**/ : 450px !important;
padding: 0 3px;
border: 1px solid #000;
clear: left;
}

#copyright {
clear: left;
height: 100px;
border: 1px solid #000;
}

 

<div id="wrap">

<h1>Banner</h1>

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


<div id="meny">

<div id="navlist">
<ul>
<li><a target="_top" href="#">Startsiden</a></li>
<li><a target="_blank" href="#">Gjestebok</a></li>
</ul>

<ul>
<li><a href="#">Generelt</a></li>
<li><a href="#">Utseende</a></li>
<li><a href="#">Installasjon</a></li>
<li><a href="#">Filsystem</a></li>
<li><a href="#">Nettverk/Internett</a></li>
</ul>
</div>			

</div>

<div id="copyright">
<p>copyright</p>
</div>

</div>

 

Dette burde vel ble riktig.

Endret 28. november 2004 av PoleCat

[TCi]

Ahh.. tusen takk.. Hvorfor tenkte ikke jeg på det? Hehe. Vel da får jeg håper eksperimentet går knirkefritt framover

[TCi]

* *

Endret 28. november 2004 av TCi

[FuLu]

Hva sa du?

For min del synes jeg det er litt "blåst" å bruke javascript på layout issues. Da synes jeg egentlig man har gått for feil løsning

[dan1el]

Ah, regner med du bruker idiotiske Opera. Jaja, skal ikke si noe jeg.

Fy. Det ser ut som han bruker en testversjon. Den er ikke heeelt til å stole på. Problemet _kan_ ligge der.

[TCi]

Ah, regner med du bruker idiotiske Opera. Jaja, skal ikke si noe jeg.

Fy. Det ser ut som han bruker en testversjon. Den er ikke heeelt til å stole på. Problemet _kan_ ligge der.

Hehe.. det stemmer. Den har noen rendingsfeil noen ganger, regner med at final versjonen er litt mer stabil