Maren Græsdal, Maren G, Foto, Grafisk design, DIY, Mediedesign, Gjøvik, Lillehammer, Fredrikstad, selvportretter, portretter, macro, natur, dyr, bilderedigering, photoshop, indesign, illustrator, flash, skravleprat

{MAREN G}: Hvordan få sidemenyen opp ved siden av headeren?

5. januar 2010

Hvordan få sidemenyen opp ved siden av headeren?

Jeg fikk et spørsmål av Linn-Marie om hvordan jeg flyttet sidemenyen min opp ved siden av headeren, så i stedet for å skrive en voldsom lang kommentar, tar jeg det her i stedet....
Det var kanskje litt flaks at jeg fikk det til, og jeg vet ikke helt hva den avgjørende faktoren er. Kanskje det er bare en endring som gjorde det, eller muligens fler, men jeg kan jo legge ut den delen av kildekoden min som jeg forandret på...

Step by step:

Størrelser:
1. outer-wrapper = mainwrapper + sidebar + margins
2. header-wrapper har samme størrelse som mainwrapper

Floating:
1. header og mainwrapper flyter til venstre
2. sidebar flyter top-right (Tror dette var det mest avgjørende)

Dette var iallefall det som gjorde det for meg.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:665px;
float:left;
clear:both;
margin:0px 10px 0px 0px;
border-right:6px solid $bordercolor;
background-color:none;

}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 965px;
margin:20px auto;
padding:0px;
border:0px dashed $bordercolor;
background-image: url(http://lh4.ggpht.com/_djRKUfUGeJ8/Sz-qQBMgyOI/AAAAAAAAFBU/U0Ebg1d-QTQ/s800/bakgrunn.jpg);
background-attachment: fixed;
background-position: top-left;
background-repeat: repeat;
background-color:#cccccc;

}

#main-wrapper {
width:665px;
float:left;
padding: 3px;
border:0px solid $bordercolor;
background-color:#ffffff;
text-align:left;
font-family:Georgia,Serif;;
font-style:italic;
font-weight:100;


word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width:225px;
float:top-right;
padding:8px;
border:0px solid $bordercolor;
background-color:#ffffff;
text-align:left;
font-family:Helvetica,Arial,Sans-serif;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Ps. Denne forandringen ødela Utforming - Sideelementer menyen.

Spør hvis noe er uklart med forklaringen min og si gjerne ifra om det funka for deg/dere... Men som sagt; det var kanskje litt flaks at det gikk;P

1 fine kommentarer:

Linn Marie Hansen sa...

Tusen takk for svar hehe :P Har tenkt på å flytte sidebaren lenger opp jeg også, men ikke helt opp, men nå veit jeg ihvertfall ca hvordan man gjør det, så tusen takk for det :D