itfag
28
Layout med CSS, flere kolonner, del 2
Innspill: 8 kommentarer · Kategori: Data og teknologi · Tagger: css, HTML, kode, løsning
Blogginnlegget Layout med CSS, flere kolonner (del 1) presenterte designet på en webside laget i PhotoShop. I dette innlegget gjennomgås CSS-kode som kan brukes for å realisere dette designet. La oss starte med å analysere hvilke grunnelementer websiden er bygget opp av, og deretter arbeide oss fram til en fullstendig kode som fungerer likt i alle nettlesere.
Hvilken struktur har denne siden? Den har en toppseksjon, en meny til venstre, en høyremarg og et hovedområde med selve innholdet for hver side, i midten. Det er noen kompliserende elementer som at siste del av logoen «UnderstandIT» skal gå ned fra toppseksjonen og inn i hovedområdet.
I tillegg er det et hvitt område nederst i venstremargen som skal gå inn helt til hovedområdet. Hvordan løse logoen? Den er egentlig enkel: Vi kan se på logoen som et bilde som ser slik ut:
Altså må nedre del av logoen ha samme bakgrunnsfarge som menyen (blå) og hovedinnholdet (hvit). Det blir i så måte viktig at menyen har nøyaktig riktig bredde. Det kan vi lett få til med CSS. Vi trenger ikke se på boksen i venstremargen enda, så la oss heller se på strukturen bak websiden:
Er du enig i at strukturen er nogenlunde slik? Njaaa, ikke helt. Den røde margen til høyre er vrien, fordi den går oppover i toppseksjonen. En vanlig feil når en jobber med CSS er å tenke for komplisert til å begynne med. Det er bedre å tenke enkelt og utvide. En bedre start vil være å tenke en toppseksjon, en meny og en innholdsseksjon. Om vi lager tre div-bokser, og lar den ene flyte til venstre, så vil den andre skyves til høyre i stedet for å starte på en ny linje. En div vil i utgangspunktet oppfattes som en boks, og for å synliggjøre hvor boksen befinner seg når vi tester, kan vi sette på border-style, border-width og border-color. Dette er et lurt triks i testfasen, men det skal ikke være med i den endelige CSS-koden.
I utgangspunktet vil tre div-bokser etter hverandre komme under hverandre. Det vi trenger er å endre flyten slik at den ene div-boksen (menyen) er til venstre for div-en som representerer hovedinnholdet. Dette løser vi ved å angi float: left. Da vil etterfølgende div-bokser «flyte» rundt den som har float:left. Altså blir CSS-koden slik:
#header {
height: 100px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#content {
border-style: dotted;
border-width: 2px;
border-color: green;
}
#menu {
float: left;
width: 161px;
border-style: dotted;
border-width: 2px;
border-color: red;
}
HTML-koden består ganske enkelt av tre div-bokser. Når vi bruker en id i hver boks, vil riktig CSS-regel slå til. Altså vil id="header" bety at regelen #header i CSS-koden blir brukt.
<body> <div id="header"> Toppseksjon her </div> <div id="menu"> - home <br /> - about <br /> - partners <br /> - bla bla <br /> - menu item <br /> - contact </div> <div id="content"> Innhold her: Lorem ipsum dolor sit amet, og så videre... </div> </body>
Det som skjer er at teksten i div-en med id="content" vil flyte rundt menu-div-en. Problemet oppstår i det vi får mye tekst i content-div-en. Da flyter teksten inn under menu-div-en. Se figuren under. Vi ønsker jo at venstremargen skal være blå og gå helt ned. Da kan ikke teksten flyte inn i margen på denne måten.
Løsningen på akkurat dette problemet er ganske enkel: Angi at content-div-en skal ha en venstremarg som starter flere piksler til venstre enn den totale bredden på menu-div-en! Husk at #menu hadde definert width: 161px. Dermed kan vi si at venstremargen til div-boksen med hovedinnholdet (id=»content») skal starte for eksempel 175 piksler fra nettleservinduets venstre side:
#content {
margin-left: 175px;
padding-left: 30px;
padding-bottom: 20px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
Resultatet blir slik (tar ikke med selve innholdet heretter i figurene, kun strukturen)
Hvis du tester dette selv, så ser du et viktig avvik fra den opprinnelige PhotoShop-skissen. Menyboksen blir bare så høy at det akkuart er plass til innholdet i menyen. Hvis innholdet i content er kjempelangt, så blir det et stort tomt område under menyen. Hvordan få menyen til å strekke seg nedover så langt innholdet i hovedboksen er?
Det blir feil å tenke at menyen må få definert en høyde med height=tallverdi. Det er nemlig umulig å beregne høyden på forhånd. For det første vil hver side på nettstedet ha ulikt innhold, og dermed også ulik høyde i content-div-en. For det andre kan brukeren lage vinduet stort eller lite, og det påvirker lengden på content-div-en. Videre kan brukeren øke tekststørrelsen, noe som ytterligere øker lengden.
Hmmmmmm. Hvordan løse dette? Svaret får du i del 3 (siste del). Da skal vi se på mer avanserte teknikker som hjelper til med å realisere den fullstendige løsningen basert på PhotoShop-skissen vår. Var dette lærerikt så langt, eller bør noe forklares bedre? Har du spørsmål? Føl fri til å legge igjen en kommentar (ingen spørsmål er dumme).
Dette innlegget har 8 kommentarer. Gjerne bidra :-)
Skrevet av: Svend Andreas Horgen (totalt 133 blogginnlegg)
Layout med CSS, flere kolonner, del 1 · itfag · 28. januar, 2011, kl. 21:45
[…] Layout med CSS, flere kolonner, del 2 […]
Inge · 3. februar, 2011, kl. 17:47
Tusen takk ! For en gammel table’s røver var dette godt og tindrende enkelt forklart. Like godt som i PHP-boken din!
Author comment by Svend Andreas Horgen · 4. februar, 2011, kl. 12:49
Det var hyggelig å høre, del 3 kommer om ikke lenge. Følg med 🙂
Børge Brattabø · 17. februar, 2011, kl. 23:30
Kommer løsningen snart:-)?
Author comment by Svend Andreas Horgen · 18. februar, 2011, kl. 09:53
Løsningen på CSS kommer snart! Har koden klar (var klar allerede ved innlegg 1) men må ta noen skjermdumper og skrive tekstforklaring først. Skal prøve å få den ut i dag eller i helga 🙂
Utålmodig:-) · 10. mars, 2011, kl. 08:00
Kommer del III snart?
Svend Andreas Horgen · 10. mars, 2011, kl. 21:40
Da er del 3 lagt ut 🙂
Layout med CSS, flere kolonner, del 3 · itfag · 13. juli, 2011, kl. 14:27
[…] kolonner (del 1) presenterte designet på en webside laget i PhotoShop. Deretter analyserte vi i del 2 hvilke grunnelementer websiden er bygget opp av. Nå i siste del (3) skal vi arbeide oss fram til […]