CSS layout

[Arve Systad]

Tenkte eg endelig skal begynne å lage sider uten tabeller, og lurte litt på en ting:

 

Når /me lager to divs, så havner dei (automatisk) under kverandre, åssn kan eg få til to divs ved sida av kverandre? altså omtrent slik:

-----------------------
     banner
-----------------------
|        |                |
|meny| innhold     |
|        |                |
|        |                |
-----------------------
      footer 
-----------------------

Takker for alle svar!

 

- Arve

Endret 6. januar 2004 av arve87

[haugsand]

Ved bruk av position eller float. Du finner mer informasjon på w3c.org, og eksempler på glish.com/css.

[enden]

position: relative; skulle duge lenge det

[haugsand]

Jeg vil heller anbefale position: absolute; siden det sørger for at boksen ikke påvirker/påvirkes av resten av dokumentet.

[Arve Systad]

har fått til det meste no, men lurer på en ting til:

 

Når innholdet strekker seg ned lengre enn menyen er, så vil ikkje menyen "følge etter"...(ja, har meny nedover på venstre side).

Prøvde med litt forskjellige hight verdier, men det vil jo seff variere i forskjellige oppløsninger..

 

Dessuten, åssn kan eg få en footer til å holde seg i bunnen av sida, ikkje bildet? slik at når innholdet er mindre enn skjermstr. kan holde, blir footer "låst" i bunnen av sida, mens den flytter seg nedover når det kommer meir innhold.

[haugsand]

Det er en av "svakhetene" når du jobber med css-layout, så du får venne deg av den måten å lage layout på. Noe som imidlertidig kan brukes til å få et mer eller mindre ønsket resultat, er egenskapen float med en liten hack.

Endret 6. januar 2004 av satyrium

[DanielP]

Er fortsatt en del svakheter med CSS ja

Men en ting. Jeg tenkte jeg skulle spørre her, istedenfor å lage en ny thread.

 

Når jeg har position: relative, for å få siden til å bevege seg med teksten. Hvordan får jeg den til å bevege seg når jeg setter inn ett <img>??? Er det jeg som har satt en gal verdi eller?

 

DanielP

[haugsand]

DanielP: Kan du laste opp et eksempel? Jeg har selv aldri brukt position: relative, og lurer på i hvilken sammenheng du har problemer.

[Arve Systad]

så det går ikkje an å få det slik eg vil på DENNE sida?

[DanielP]

Satyrum: Hvis du ser på Denne siden så burde du se hva som skjer, iallefall i Opera.

 

Ompa: Beklager, men har enda ikke funnet en metode som gjør dette.

 

DanielP

[haugsand]

Satyrum: Hvis du ser på Denne siden så burde du se hva som skjer, iallefall i Opera.

 

Ompa: Beklager, men har enda ikke funnet en metode som gjør dette.

 

DanielP

Tja, hvis du ikke får det resultatet du ønsker, er du vel nødt til å finne en annen møte å løse problemet på. Tenkt enkelt!

[kefirgut]

Bala mye med det der. Driver å redesigner gossen.no. Den har jeg laget designet i css/xhtml. FIkk det til å virke etter hvert. link. Men den validerer ikke enda.

 

Den foreløpige private sidenmin er også i xhtml

[DanielP]

Satyrium: Jeg har fått det til, med å bruke

 <p>

eller

<br />

for å strekke siden.

 

DanielP

[kefirgut]

Regner med at du ikke er ferdig med siden, men for for bruker du for eksempel border="style: 1px solid black"(bilder på siden) og border="0" (menyen)

 

når du like så godt kan lage klasser for bildene i css file? slik at det blir: <img class="bilde" src=....>. Blir mye mer ryddig, og enklere å vedlikeholde.

 

Var bare et tips.(Denne meldingen var til DanielP, om noen lurte)

Endret 7. januar 2004 av kefirgut

[DanielP]

Hehe, liker å gjøre ting bakvendt

 

DanielP

[pgdx]

så det går ikkje an å få det slik eg vil på DENNE sida?

Selvsagt er det mulig.

 

Du kan jo, hvis det skulle være nødvendig, posisjonere alt med position: absolute, men du skal jo selvsagt kunne lage det slik.

 

Eksempler på kun <div> og css finner du på glish.com/css og på ZenGarden.

[pgdx]

Jeg elsker css og div. Bare se på kildekoden til denne siden! Just love it!

Endret 7. januar 2004 av Toolshed

[haugsand]

Alle designene på csszengarden bruker jo SAMME htmlfil, noe som demonsterer den egentlige meningen med html -- nemlig å strukturere innholdet.

 

_Egentlig_ skal det jo være mulig å sette oppe dokumentet uten noen form for css i begynnelsen; bare samle innholdet i grupper, for så å legge til layouten senere, ved hjelp av et ekstern css-dokument.

 

Skal teste ut denne metoden i et nytt sidekonsept, og vurdere effektiviteten. Men såklart, det er lurt å ha en _liten_ tanke om hvordan sida skal se ut på forhånd, så det er mulig å bestemme hvilke "innholdsbokser" som skal settes inn.

[Arve Systad]

Har iallefall begynt å forstå åssn ting skal settast opp no, litt stilig igrunn

 

JA til simpel html kode!

 

Sliter fremdeles litt med å få div's riktig plassert i forhold til kverandre though

[pgdx]

Selvsagt, selvsagt.

 

HTML-filen skal bare trenge å innholde

<div class="header">Header og overskrift og alt sammen</div>

<div class="meny">Menyen</div>

<div class="main">Hovedsiden og all tekst og sånt</div>

<div class="footer>Footeren</div>

 

 

Det er litt av det som er så genialt...