Nyhet! Besøk stihk.com for å få hjelp og gratis bloggdesign

Bygg ditt eget design #1: Header

Da tenkte jeg at jeg skulle starte en liten serie her på idev.blogg.no, som viser dere hvordan man kan bygge opp sitt eget design med bruk av CSS og HTML. For å starte helt på "scratch", slik jeg har gjort i denne guiden, anbefaler jeg at du nullstiller bloggdesignet din.

Bygg ditt eget design: En steg for steg guide

La oss begynne!
Det første jeg vil vise dere er strukturen til blogg.no sin standard mal. Det er denne vi kommer til å jobbe med i denne serien med guider og derfor vil det hjelpe om du vet hvordan malen er bygget opp. Slik er oppsettet:
<div id="doc2">
     <div id="header">
          <h1>devpublish</h1>
          <p>Test blogg for idev.blogg.no</p>
     </div>
          <div id="wrapper" class="yui-gc">
          <div class="breadcrumbs"></div>
          <div id="main" class="yui-u first"></div>
          <div id="side" class="yui-u"></div>
     </div>
     <div id="footer" class="yui-gb"></div>
</div>
Som dere forhåpentligvis ser, så er absolutt hele bloggen "pakket" inn i et element som heter #doc2. Dette elementer er ikke noe jeg har tenkt til å ta så mye om, men om du for eksempel har lyst på en ramme rundt hele bloggen din eller forandre bredden, kan du gjøre det på denne måten:
#doc2 {
     border: 5px solid #000000;
     width: 790px;
}
Vi begynner med headeren!
Det første jeg tenkte å te for meg i denne serien er headeren. På bildet under ser du hvor headeren er (markert med rødt) og strukturen til html-koden.

Slik er headerens html bygget opp

Som header har jeg laget et lite bilde som er 950px bredt, som også er standard bredden. Ønsker du å ha smalere eller bredere blogg, kan du endre på dette i #doc2. For å sette bildet mitt som header, bruker jeg følgende css-kode:
#header {
     height: 150px;
     background: url(http://i47.tinypic.com/2hnlt8h.png) no-repeat;
     text-indent: -9999px;
     padding:0px;
     overflow:hidden;
}
Så hvordan fungere denne koden?
Først og fremst setter jeg opp #header {} som forteller at jeg skal endre på elementet med header som id. Deretter setter jeg høyden til 150px, som er høyden på bildet jeg bruker. Videre forteller jeg at bakgrunnen skal være bildet mitt. Egenskapen text-indent: -9999px som du finner på slutten av koden, forteller at all tekst i elementet skal bli fjernet fra elementer så det ikke synes på bloggen. Altså den koden gjemmer all tekst i elementet. I tillegg har jeg satt padding til 0px for å fjerne unødvendig luft og satt overflow til hidden for å fjerne alt som eventuelt går utenfor elementet.

Slik er resultatet hittel i guiden:




Vet du ikke engang hvor du skal legge inn css-koden? Ta en titt i guiden min: En innføring i CSS.

Klarer du dette?
23.02.2010 kl.15:02 i Guide - 2 kommentarer - # - Permalenke - Del på Twitter

2 kommentarer

- lenahammerolofsson

16.04.2010 kl.14:18
tusen takk for all hjelpa! :-)

devpublish

16.04.2010 kl.14:28
lenahammerolofsson: Bare hyggelig ;D

Skriv en ny kommentar

hits