CSS og kolonner

[Blodhemn]

Greit..

 

Da var jeg tilbake her igjen

 

Det jeg er ute etter er en lett måte å lage kolonner i CSS. La oss si at jeg har to kolonner, to forskjellige divs som jeg vil ha til å stå ved siden av hverandre. Ikke noe overlapping/forskyving om nettleser vinduet minskes.

 

Den ene er låst til en teoretisk størrelse, la oss si så langt et evt innhold f.eks textaerea eller et bilde. Og den andre er så bred som den har plass til. Kolonne nr to skal starte der kolonne nr 1 slutter og så strekke seg så langt den har plass til.

 

Hvordan gjøres dette i CSS?

 

 

På forhånd takk

 

Mvh

Arild

[Loomy]

Hvis jeg har forstått deg riktig:

 

#kolonne1 {
width:300px;
float:left;
border-right:1px dotted #CCCCCC; /* For oversiktlighetens skyld;) */
}

#kolonne2 {
float:right;
}

 

Har strippet de ned til bare det absolutt nødvendige. Evt. padding, og borders og gudvethva må komme i tillegg.

 

 

EDIT: Bare så det er klart, sitter på skolen og er langt i fra noen CSS-guru så det virker sikkert ikke. Men du får prøve

Endret 22. mars 2004 av Loomy

[Blodhemn]

Det var et godt forsøk, men ikke helt det jeg var ute etter. Skal gjerne ha kolonne 2 til å starte akkurat der kolonne nr1 slutter (i nærheten i allefall) altså ved border-right.

Med float:right på kolonne2 vil den klemme høyre side av nettleseren

 

Også overlappet det om jeg minsket nettleser vinduet. Men det oppførte seg ubeskrivelig mye mer grasiøst enn min løsning gjorde

 

 

Edit:

 

Legger med linken til din løsning jeg:

http://lekeplass.mardraum.net/ansatte/ansatte_add.php

(Send inn et tomt skjema for å få feilmeldingene, som er i kolonne2 til å dukke opp)

Endret 22. mars 2004 av Blodhemn

[magikern]

hvis jeg har forstått deg rett:

 

<div id="left"></div>

<div id="right"></div>

 

#left {

position: absolute;

top: 0;

left: 0;

width: 300px;

margin: 0;

padding: 0;

}

#right {

position: absolute;

top: 0;

left: 300px;

right: 0;

margin: 0;

padding: 0;

}

 

tror det skal bli sånn ca riktig...

[Blodhemn]

Aha, ja.. se der ja. Dette blir bra

 

http://lekeplass.mardraum.net/ansatte/ansatte_add2.php

 

Men hva om kolonne1 ikke var satt i faste pixler? Hva om størrelsen på denne div'en endret seg dynamiskt? Hvordan ville man få kolonne2 til å alltid starte der kolonne1 slutter?

[joffar]

ER ikke helt sikker paa denne, men proev:

#left {

position: absolute;

top: 0;

left: 0;

width: 300px;

margin: 0;

padding: 0;

}

#right {

position: relative;

top: 0;

margin: 0;

padding: 0;

}

[Blodhemn]

ER ikke helt sikker paa denne, men proev:

#left {

position: absolute;

top: 0;

left: 0;

width: 300px;

margin: 0;

padding: 0;

}

#right {

position: relative;

top: 0;

margin: 0;

padding: 0;

}

http://lekeplass.mardraum.net/ansatte/ansatte_add3.php

 

Kanskje ikke helt, nei

[joffar]

ehh ikke helt nei..

 

Kansjke dersom du setter

 

<div id='left'>form text

 

<div class='right'>error text</div></div>

 

Fu forandred right fra id til class i css filen ogsa...

 

Then again may not work..

Endret 22. mars 2004 av joffar

[Blodhemn]

ehh ikke helt nei..

 

Kansjke dersom du setter

 

<div id='left'>form text

 

<div class='right'>error text</div></div>

 

Fu forandred right fra id til class i css filen ogsa...

 

Then again may not work..

http://lekeplass.mardraum.net/ansatte/ansatte_add3.php

 

Njaei

[joffar]

[magikern]

<div id="container">

<div id="content">

<div id="error">error greia her</div>

formen legger du her

</div>

</div>

 

html,body {

height: 100%;

width: 100%;

}

 

#container {

width: 100%;

heigth: 100%;

margin: 0;

padding: 0;

}

#content {

position: absolute;

top: 0;

left: 0;

margin: 0;

}

#error {

float: right;

margin: 10px;

padding: 0;

}

[Blodhemn]

<div id="container">

    <div id="content">

        <div id="error">error greia her</div>

        formen legger du her

    </div>

</div>

 

html,body {

    height: 100%;

    width: 100%;

}

 

#container {

    width: 100%;

    heigth: 100%; 

    margin: 0;

    padding: 0; 

}

#content {

    position: absolute;

    top: 0;

    left: 0;

    margin: 0;

}

#error {

    float: right;

    margin: 10px;

    padding: 0;

}

http://lekeplass.mardraum.net/ansatte/ansatte_add.php

 

Hmm, nei ikke helt, men takk for hjelpen

 

Er det ikke litt merkelig at det ikke finnes en lett måte å lage kolonner på i CSS?

 

Hva skal man egentlig med CSS om det ikke klarer erstatte tables?

 

<table>
<tr>
 <td valign=top>Skjemaet</td><td width="100%" valign=top>Error</td>
</tr>
</table>

 

Det er jo evig mye lettere

[epsil]

Er det ikke litt merkelig at det ikke finnes en lett måte å lage kolonner på i CSS?

Det er i utgangspunktet lett å lage kolonner med CSS. Det er IEs begrensede CSS-støtte som gjør det vanskelig.

 

Hva skal man egentlig med CSS om det ikke klarer erstatte tables?

Forenkle vedlikeholdet og skille innhold fra presentasjon.

 

(For øvrig: Se Position Is Everything. CSS klarer fint å erstatte tabeller – og alt er bedre enn den utilgjengeligheten tabellmisbruk medfører.)

 

<table>
<tr>
 <td valign=top>Skjemaet</td><td width="100%" valign=top>Error</td>
</tr>
</table>

Det er jo evig mye lettere

Ikke når du må gjøre endringer i utformingen til alle sidene.

[magikern]

se her du finner nok sikkert en løsning på en av disse sidene:

http://glish.com/css/

[Arve Systad]

Vil anbefale å bruke float: left|right; istede for absolutt posisjonering iallefall. Absolutt posisjonering er IMO noke en helst skal holde seg unna, og kun bruke der det er 100% nødvendig.