itfag
TAG | kode
10
Layout med CSS, flere kolonner, del 3
Innspill: 5 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. Deretter analyserte vi i del 2 hvilke grunnelementer websiden er bygget opp av. Nå i siste del (3) skal vi arbeide oss fram til en fullstendig kode som fungerer (tilnærmet) likt i alle nettlesere. Det kan være lurt å gjenoppfriske det som ble sagt i disse to forutgående innleggene. Vil du gå rett på, så ser målet som vi prøver å realisere med CSS-kode, slik ut:
I forrige blogginnlegg brukte vi en div-boks for hovedinnholdet, og satte venstremargen til å starte på en pikselverdi som var litt mer til venstre enn den totale bredden på menu-div-en.
Et smart triks, og egentlig veldig logisk om en tenker firkantede bokser. Men – det blir feil. Menyen slutter for tidlig. Den skal gå helt ned like langt som innholds-diven er. Det er umulig å beregne høyden på forhånd (fordi innholdet på hver webside som bruker dette designet varierer i lengde). Hva gjør en da?
Svaret er å tenke innpakning. Ordet «to wrap» på engelsk betyr å pakke inn, og i dataverdenen sier vi gjerne at en «wrapper» er noe som er kledd utenpå noe. Hva er vitsen med det? Se først hvordan wrapperen ser ut:
Denne kan vi realisere med HTML-kode:
<body>
<div id="header">
Toppseksjon her
</div>
<div id="wrapper-main-menu">
<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>
</div>
</body>
En praksis som viser seg å være brukbar her, er å ikke tenke at meny-diven får farge, men at wrapperen får en bakgrunnsfarge! Ta følgende figur i betraktning
Smart! Hvordan realisere dette med CSS-kode? Trikset er bruken av background repeat-y i wrapperen #wrapper-main-menu. Den nye koden er uthevet i fet skrift.
#header {
height: 100px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#content {
margin-left: 175px;
padding-left: 30px;
padding-bottom: 20px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#menu {
float: left;
width: 161px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#wrapper-main-menu {
float: left;
margin-top:-10px;
background:#FFF url("bitmaps/leftcolor_bg.png")
repeat-y top left;
}
Her bruker vi bakgrunnsbildet «leftcolor_bg.png» til å fylle bakgrunnen i wrapper-diven. Bildet er 161 piksler i bredden (med vilje). Dermed blir menyen tilsynelatende 161 piksler bred. Dette passer godt med teksten vi har plassert i menu-diven som aldri kommer utenfor boksen sin (også den er 161 piksler). Det må ikke være match mellom tallene her, men det blir i hvertfall riktig om det er det.
Setter vi nå sammen HTML og CSS-koden, så ser vi at det stemmer så langt. border-style: dotted; er bare et triks for å se hvor div-boksene faktisk befinner seg, og skal slettes i den endelige løsningen. Bruk av repeat-y sikrer at bildet ikke bare vises én gang, men repeteres i vertikal retning (gjennom hele div-en). Hadde vi brukt repeat-x ville bildet blitt repetert i horisontal retning, og det ville vært feil her.
Nå er vi snart i mål. Se tilbake på originalfiguren, og du identifiserer følgende struktur:
Det blå i menyen er nå på plass. Hvordan få et tilsvarende rødt område ute til høyre? Merk at den røde er litt anderledes – den går helt fra toppen og til bunnen, mens den blå starter under headeren. La oss bruke samme triks som tidligere med å pakke inn div-ene i en wrapper. Det vi nå trenger er en ytre wrapper som faktisk pakker inn hele websiden, og så sette rød bakgrunn til høyre i denne wrapperen, og repetere bakgrunnen nedover i hele wrapper-diven. HTML-koden er nå ferdig, og ser slik ut (nye ting markert i fet skrift)
<body>
<div id="wrapper">
<div id="header">
Toppseksjon her
</div>
<div id="wrapper-main-menu">
<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> <!-- end concent -->
</div> <!-- end wrapper-main-menu -->
<div id="nofloat"></div>
</div> <!-- end wrapper -->
</body>
Den ytre wrapperen er grei, men hvorfor en div med id="nofloat"? Som du ser i CSS-koden har vi definert en ny regel som heter «nofloat» øverst. Det den gjør, er å kansellere float-egenskapen. Hvis ikke vil også wrapperen flyte. Hele CSS-koden er nå slik (nye ting i fet skrift):
/* Clear float */
#nofloat {
clear: both;
}
#wrapper{
width:100%;
background:#FFF url("bitmaps/rightcolor_bg.jpg")
repeat-y top right;
margin: 0px;
}
#header {
margin-right: 161px;
height: 100px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#content {
margin-left: 175px;
padding-left: 30px;
padding-bottom: 20px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#menu {
float: left;
width: 161px;
border-style: dotted;
border-width: 2px;
border-color: blue;
}
#wrapper-main-menu {
float: left;
margin-top:-10px;
margin-right: 200px;
background:#FFF url("bitmaps/leftcolor_bg.png")
repeat-y top left;
}
Igjen bruker vi trikset med å la et rødt bakgrunnsbilde repeteres i y-retning, denne gangen helt til høyre i hoved-wrapperen. Dermed skapes illusjonen om at vi har en rødfarget høyre kolonne («rightcolor_bg.jpg» er et rødt bilde på 161 piksler i bredden).
Husk at innholdet på siden ikke skal nå lengre bort enn ytterkanten av #wrapper-main-menu. Derfor er margin-right: 200px; valgt til nettopp 200. 200 er større enn bredden i høyre kolonne (rød bakgrunn har bredde 161 piksler). Slik blir det litt luft mellom teksten i hovedområdet og den røde kolonnen. Dette er både genialt og litt vrient på en gang. Det er en del baller å holde styr på, og det er lurt å utvikle gradvis med prøv og feil. Samtidig er det en logikk bak, og det er lurt å prøve å sette seg skikkelig inn i tankesettet og virkemåten til boksmodellen i CSS.
Er vi ferdige da? Nesten. Det gjenstår litt finpuss. Slik ser det ut nå i nettleseren Safari for Mac:
Hvis vi fjerner alle border-reglene vi har brukt som hjelp for å tydeliggjøre boksene, ser det enda bedre ut. I tillegg må bakgrunnen i toppen farges grå, og logoen skal tilsynelatende gå ned i hovedområdet. Men – også her kan en trikse det til med hendige bakgrunnsbilder og repeat-x-egenskapen. Du kan prøve selv på dette.
Håper dette var nyttig. Fins det andre, alternative måter å løse dette på? Eller har du spørsmål? Føl fri til å legge igjen en kommentar (ingen spørsmål er dumme).
Dette innlegget har 5 kommentarer. Gjerne bidra :-)
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 :-)
