itfag
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 :-)
Skrevet av: Svend Andreas Horgen (totalt 133 blogginnlegg)
Inge · 10. mars, 2011, kl. 22:22
Hei. Dersom man ønsker å ha content-boksen delt i to content-kolonner: Har dere et eksempel på hvordan man kan kombinere PHP og CSS/HTML på en slik måte at annet hvert «innlegg»/»nyhet» som blir publiser i en pybliseringgrensesitt til f.eks en mysql-database.
Altså: «Nyhet 1» skal vises i f.eks og neste «nyhet 2» skal vises i f.eks Man må vel da f.eks få PHP-koden til å ta oddetallene i content2 og partallene i content1.
Noe slikt:
$hentut = mysql_query(«SELECT * from nyheter order by $date desc»);
$c = mysql_num_rows($hentut);
$counter = 0;
while ($hentnyheter=mysql_fetch_row($hentut)){
$tallet = ($tallet+$hentnyheter[id]);
$counter++;
if ($counter % 2) $kolonne=»content2″;
else $kolonne=»content1″;
Author comment by Svend Andreas Horgen · 10. mars, 2011, kl. 23:24
Hei Inge, skjønte ikke helt spørsmålet. Fint om du kan forklare igjen – det ser ut som at noe har falt ut. Dersom du tenker på å alternere annen hver, så er det lett å gjøre med PHP-kode. Du henter ut fra databasen, og bruker for eksempel modulo 2 slik du har skissert med din kode, til å veksle mellom hvilken div-boks du skriver innhold i. Her er eksempel på PHP-kode som alternerer med å vise annenhver farge/hvit. Det er neppe dette du trenger, men se på koden og den vil kanskje sette deg på sporet av det du trenger?
http://www.desilva.biz/php/alternate.html
Inge · 11. mars, 2011, kl. 23:20
Ja ser at enkelte ord i teksten min har falt ut.
Men: Det var akkurat det jeg ønsket svar på. Glimrende. Takk!
Layout med CSS, flere kolonner, del 2 · itfag · 11. mars, 2011, kl. 07:27
[…] Layout med CSS, flere kolonner, del 3 […]
En slags analyse av HiST sin itfag-blogg | simsalamin · 20. september, 2015, kl. 16:05
[…] til dyptgående artikler om bruk av ulike IT-verktøy, Web 2.0-tjenester og veiledninger i CSS. Man finner også innlegg relatert til næringslivet, videopresentasjoner av fag og mange innlegg […]