Header
2008-03-19 @ 19:05:00
När du ska göra en header är det en del att tänka på. Jag rekommenderar er verkligen att ha Photoshop när det kommer till att göra egna headers. Eller något annat program där man kan bestämma exakt hur hög och bred bilden ska vara (i pixlar). Man måste nämligen veta hur bred den ska vara så att den passar in i designen. Höjden spelar ingen roll, den är lätt att ändra på efteråt.
Man kan med hjälp av olika metoder lista ut hur stor headern bör vara.
Man kan antingen printscreena in designen i programmet och mäta ut så att headern blir lika bred som den print-screenade bilden. Eller så kan man ta reda på hur bred den är i stilmallen
#wrapper {
text-align: left;
width: 825px;
position:relative;
margin:0px auto;
padding: 0px 10px 10px;
vertical-align: top;
}
#header {
background: url(bildadress);
margin: 0px;
padding: 37px 0px 0px 100px;
height: 196px;
text-align: left;
}
Det här är min stilmall och min header är 825 pixlar bred och 196 pixlar hög.
Men det är olika från stilmall till stilmall, på vissa ser det ut såhär:
#header {
background: #FFFFFF url(bildadress);
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}
Ni kan ju självklart göra en så stor header ni vill (så länge det är rimligt) och sedan ändra siffrorna i stilmallen där jag visade.
Då har vi kommit över storleken, vart sätter man då in headern?
Det är bara att klistra in er bildadress under header i stilmallen, här:
#header {
background: url(bildadress);
margin: 0px;
padding: 37px 0px 0px 100px;
height: 196px;
text-align: left;
}
Är det så att inte hela headern syns eller att det blir flera på rad så är det bara att justera height-värdet som även ligger under header till ni blir nöjda.
Svårare än så är det inte, Lycka till!
Man kan med hjälp av olika metoder lista ut hur stor headern bör vara.
Man kan antingen printscreena in designen i programmet och mäta ut så att headern blir lika bred som den print-screenade bilden. Eller så kan man ta reda på hur bred den är i stilmallen
#wrapper {
text-align: left;
width: 825px;
position:relative;
margin:0px auto;
padding: 0px 10px 10px;
vertical-align: top;
}
#header {
background: url(bildadress);
margin: 0px;
padding: 37px 0px 0px 100px;
height: 196px;
text-align: left;
}
Det här är min stilmall och min header är 825 pixlar bred och 196 pixlar hög.
Men det är olika från stilmall till stilmall, på vissa ser det ut såhär:
#header {
background: #FFFFFF url(bildadress);
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px 0px 20px;
width: 800px;
height: 55px;
}
Ni kan ju självklart göra en så stor header ni vill (så länge det är rimligt) och sedan ändra siffrorna i stilmallen där jag visade.
Då har vi kommit över storleken, vart sätter man då in headern?
Det är bara att klistra in er bildadress under header i stilmallen, här:
#header {
background: url(bildadress);
margin: 0px;
padding: 37px 0px 0px 100px;
height: 196px;
text-align: left;
}
Är det så att inte hela headern syns eller att det blir flera på rad så är det bara att justera height-värdet som även ligger under header till ni blir nöjda.
Svårare än så är det inte, Lycka till!
Kommentarer
Skrivet av: Alinne
2008-03-19 @ 19:08:06
Bra tips :)
Skrivet av: Angelicas Closet
2008-03-19 @ 19:10:23
Jag önskar att jag kunde göra en snygg header!
Bloggadress: http://angelicascloset.blogg.se
Skrivet av: Sandra
2008-03-19 @ 19:18:06
Vilken underbar blogg detta var! Tack för alla tips :D
Bloggadress: http://mylifeassandra.blogg.se
Trackback
Bloggadress: http://alinneandersson.blogg.se