ALLE JULIE MARIANNE SILJE HELEN VERONICA


HOVEDSIDE OM JULIE GRATISDESIGN PORTFOLIO FØLG BLOGGEN

Tips: Design :

TIPS: DESIGNHJELP

17.07.2012 // kl.12:54 // Tips: Design // 19 kommentarer

Mange synes det er litt vanskelig å forstå hvordan man kan lage design på blogg.no.
I dette innlegget tenkte jeg å skrive litt enkelt om oppbyggingen av design på blogg.no, forholdet mellom elementene; header, wrapper og side, og hvordan man kan bruke dette til å lage mer kompliserte design.

PS! kom gjerne med tilbakemeldinger på hva dere synes om innlegget, om dere ønsker flere slike innlegg, og hva det skal handle om.

 

Bloggdesignet i er hovedsak bygd opp av tre hovedelementer; Header, Wrapper og Side. Disse kan du selv velge størrelse og plasserig på ved å definere det i CSS-en eller stilsettet, som det heter her på blogg.no. 

HEADER:

Slik ser koden for Header ut i mitt design:
#header {
background-color: #ffffff;
background-image: url('http://juliehusvaer.com/blogg/header-missjulie12.jpg');
height: 540px;
width: 910px;
margin-left: 0px;
background-repeat: no-repeat;
}

Her plasserer du blant annet linken til bildet du vil ha som header og størrelsen du vil ha på headeren, samt andre verdier du ønsker å spesifisere.
Husk at høyden og bredden kun bestemmer plassen du velger å gi til headeren din, men selve bildet vil ikke bli påvirket.
Det vil si at om du har en liten header vil ikke bildet bli større uansett om du setter opp høyde og bredde verdiene. Du vil kun lage en større plass til den lille headeren. På samme måte vil ikke et stort bilde bli forminsket av at du setter lavere verdier, det vil heller vise en avgrenset del av headeren tilsvarende høyde og breddemålene du har anngitt.

BRUK AV KODEN MARGIN:

Ved å bruke koden margin får du muligheten til å bevege det ønskede elementet høyere, lavere, til venstre eller høyre.
Som hvis du for eksempel ønsker å flytte  sidemenyen høyere, eller bevege hele bloggen til venstre.

Her er et eksempel på hvordan du kan bruke koden margin og hva den gjør:
Pilene indikerer hvilken vei sidemenyen flyttes om du bruker koden. Verdien kan selvfølgelig endres for å oppnå ønsket resultat.





Her er et eksempel på hvordan man skriver inn margin-koden for å flytte sidemenyen høyere:

#side {
margin-top: -45px;
}

BREDERE BLOGG UTEN HORISONTAL SCROLLING:

Mange har kanskje opplevd at om man gjør bloggen bredere beholder den luften på venstre side og man får en horisontal scrolling på siden sin. Dette synes jeg ofte er irriterende, og kan lett unngås ved å benytte seg av margin-koden.

Ved å legge inn margin-left: -50px; (ønsket verdi) beveger du bloggen til venstre og vil kunne unngå horisontal scrolling.
Husk at denne koden må legges inn under både #Header, #Wrapper og #Footer

PS! For å få bredere blogg øker du bare width-verdien. Husk igjen å gjøre dette på både  #Header, #Wrapper og #Footer for å få samme bredde på alt.

LAGE MER KOMPLISERTE DESIGN UT I FRA DISSE PRINSIPPENE:

Ved at du forstår prinsippene om hvordan bloggen er bygd opp og hvordan du kan bevege de forskjellige elementene, gir det deg veldig mange muligheter i forhold til design.

Her er et eksempel på på et design jeg har laget hvor jeg har benyttet meg av mulighetene med å kunne flytte elementene fritt for å lage det designet jeg ønsket.
Jeg har markert hvor de forskjellige elementene er plassert slik at dere kan se hvordan jeg bygde opp siden.

Håper dette var til hjelp, og som sagt kom gjerne med tilbakemeldinger og ønsker!

hits