Centrera din headerbild
Något jag ofta får frågor om är hur man centrerar sin headerbild.
I de gamla mallarna fanns en automatisk centrering inlagd, men i de nya Designmallarna hamnar bilden istället till vänster. Inte så snyggt alla gånger kanske.
För att centrera bilden går du till din bloggs kodmall och går en liten bit ner till stycket som handlar om /* Header */. Du måste inte lägga koden här, men det underlättar nästa gång du vill ändra något om det som hör ihop ligger ihop.
Under Header lägger du till följande kod:
Byt ut vidden (width) mot den vidd din bild har. Måttet måste vara rätt för att bilden ska kunna centreras.
Förhandsgranska och spara när du är nöjd!
Är du osäker på hur bred din bild är?
Håll då musen över bilden när den ligger i sin mapp på datorn så kommer en liten popupruta fram, alternativt högerklicka på bilden och välj Egenskaper - Information
I de gamla mallarna fanns en automatisk centrering inlagd, men i de nya Designmallarna hamnar bilden istället till vänster. Inte så snyggt alla gånger kanske.
För att centrera bilden går du till din bloggs kodmall och går en liten bit ner till stycket som handlar om /* Header */. Du måste inte lägga koden här, men det underlättar nästa gång du vill ändra något om det som hör ihop ligger ihop.
Under Header lägger du till följande kod:
#header-inner {
width: 600px;
margin-left: auto;
margin-right: auto;
}
width: 600px;
margin-left: auto;
margin-right: auto;
}
Byt ut vidden (width) mot den vidd din bild har. Måttet måste vara rätt för att bilden ska kunna centreras.
Förhandsgranska och spara när du är nöjd!
Är du osäker på hur bred din bild är?
Håll då musen över bilden när den ligger i sin mapp på datorn så kommer en liten popupruta fram, alternativt högerklicka på bilden och välj Egenskaper - Information
Bra att veta ~Tack~
ReplyDelete/Kram
Funkar kanon!
ReplyDeleteTusen tack!!!
ReplyDeleteHar ju varit ganska störande i de nya mallarna ju...du är kanon!!!
Jättefint, tack, men tyvärr blir ju texten i headern också centrerad, den "följer med bilden".
ReplyDeleteTidigare hade jag hela den långa meningen, på en rad, under bilden. Vore tacksam för tips om hur man löser det.
I ditt fall ska du INTE lägga in ovanstående kod utan den här istället:
ReplyDelete#Header1_headerimg {
margin-left: auto;
margin-right: auto;
}
Då blir enbart bilden centrerad, inte text
Tacktacktacktack! Vilken tur att du finns! Nu blev det ju snyggt (nåja-jag jobbar på det....)
ReplyDeleteHm, ännu en fråga: hur får jag texten centrerad? Alltså inte rakt under bilden, utan som den är nu, men en bit längre in.
ReplyDeleteMisstänker att något skall ändras i kodmallen, men får inte riktigt kläm på vad...
Då kan du använda den här koden:
ReplyDelete.Header .description {
margin-left: 25px;
}
25px är bara på ett ungefär, ställ in det du själv tycker är lämpligt
Vilket tålamod du har! Tack.
ReplyDeleteOch vilket ögonmått - 25 px var helt rätt!
Vet du, jag funderade faktiskt om jag skulle lämna den här koden på din blogg en stund efter vi fixat din header eftersom det där störde mig lite, men eftersom bloggen verkar lite officiell för er vandrare drog jag mig en aning... Tur du återvände!
ReplyDeleteStörde är bara förnamnet....
ReplyDeleteJag är ny på det här, och försöker hitta svaren på alla mina frågor bland alla dina fina inlägg, och på det stora forumet, men ibland lyckas jag inte och då måste jag fråga. Härligt att du är så hjälpsam.
Det som stör mest just nu är dom fula vita hörnen på headerbilden.....
Testa den här: http://i.minus.com/i7OPHZf72hr77.png
ReplyDelete*ler*
hmmm - jag följer adressen, får besked att sidan inte finns, klickar på "search by image", får upp en bild på min bild,bara det - ingenting man kan göra med bilden.
ReplyDeleteFörstår inte hur du menar....
Sorry, den låg som privat, nu ligger den som public som den ska!
ReplyDeleteJo, jag har redigerat din bild, tagit bort hörnen, men det ser du inte mot en vit bakgrund som på skärmen. Högerklicka på bilden och spar ner den på din dator. Om du laddar upp den på din blogg ska du se skillnaden ;-)
Tack, det blev ju mycket bättre.
ReplyDeleteEgentligen är det de skarpa 90-gradiga hörnen jag vill ha bort, men det tar vi en annan gång. Jag är nöjd såhär. Tacktack!
Haha, det där blev ju inte bättre, bilden laddades tydligen upp som en jpeg-bild hos dig. Det är egentligen en png-bild som har transparanta, runda hörn. Det svarta ska inte alls vara där...
ReplyDeleteMen, jag förstår att du ger upp, man orkar inte bråka med bloggen hur mycket som helst.
I alla fall, så här ser det ut om jag laddar upp samma logga på min testblogg: http://i.minus.com/ifTdnnAyjw9xR.png
NU, blev det bra!
ReplyDeleteTack så hjärtligt!
Lyckas inte med att centrera min header
ReplyDeleteMin blogg är http://nataschad.blogspot.com/
Tazh - din header är bredare än vad din bloggs wrapper är så vi får justera koden lite.
ReplyDeleteAnvänd den här koden och anpassa -90 till det som ser bra ut, jag höftade lite bara:
.header-inner {
width: 1058px;
margin-left: -90px;
}
Tack :D !
ReplyDeleteHej!
ReplyDeleteDet är svårt att lära gamla hundar sitta!
Frågan är hur gör jag med min blogg för att den ska se ut som förr?
Här står klart och tydligt,men jag fattar inte?
Försökte få till det,men då förflyttas ju banner till konstigheter.Jag har målat en ros som ska vara under bannern!Och va heter det,loggen till Karen Watsons underbara rosor ska ju vara till vänster om bannern.Inte mitt i mina inlägg.Störande!Hoppas få svar.Det blev ett vulkanutbrott här förra veckan.Inger
Hej!Glömde att skriva in adressen!
ReplyDeletehttp://chintohs.blogspot.com/
är jag helt bortom flötet eller men jag förstår inte vad du menar med att gå till kodmall och sen header, jag hitta inte !
ReplyDeleteAnonym - titta på den här bilden: http://i.minus.com/irDwIpmT7fHoj.png
ReplyDelete( Eller den här bilden om du har det gamla, beiga gränssnittet: http://i.minus.com/ibqjM6SzpMQoxn.png )
ReplyDeleteGrym blogg! Jag lyckas dock inte med centreringen... Hittade rätt ställe i koden, tror jag, men händer ingenting. www.bohemiskpunkare.blogspot.com
ReplyDeleteKRAM
ääääntligen ett bra svar - TACK! har sökt efter lösning på detta hur länge som helst och bett om hjälp från hö och vä men ingen har kunnat fixa detta! och så glider jag in här av en slump för att leta efter designmallar och ev hjälp med hur man fixar flikar till bloggen och så hittar jag den här hjälpen!
ReplyDeleteKommer tillbaka! :)
Hej!
ReplyDeleteOm jag vill ändra bloggrubriken i blogspot till att bli centrerad går det?
Kan man även centrera banners?
Mvh
Johan
Fråga? Går det att ladda upp en bok på C.a 500 A4 sidor på bloggen?
ReplyDeleteRolf - oj, det vet jag faktiskt inte. Blogger har riktigt generösa gränser för det mesta, så det är nog inte omöjligt. Textmässigt får man ha hur mycket text som helst, men det finns gränser på hur långa inlägg får vara. Det får du nog testa dig fram med och se vad som fungerar.
ReplyDeleteSkulle det bli fullt så kan man ju länka vidare till flera likadana bloggar, t.ex. vid "Äldre inlägg"
ReplyDeleteHej Anneli.
ReplyDeleteJag förstår inte riktigt var jag skall hitta den där "kodmall".
Stupid fråga kanske men jag har klicket lite här och var både i Mall, Layout och inställningar.
Det här gäller alltså min testblogg:
baaartil2
Hälsningar,
baaartil
Baaartil - klicka på den här bildlänken så ser du vart du hittar din kodmall.
ReplyDeletehttp://i.minus.com/iARbDPa92F64I.png
Alla ord är nya i början när man bloggar - för oss alla - så inga frågor är dumma! Tror faktiskt att såna här frågor uppskattas på forumet t.ex. eftersom de som inte själva vågar fråga ändå får svaret då... ;-)
Undrar du mer om kodmallen och hur den fungerar så starta bara en tråd på forumet så kan jag lägga in lite mer skärmklipp och förklaringar. Det är lättare där.
Tack Anneli, jag återkommer där.
ReplyDeleteHar kollat din länk men vet ju inte vad jag skall skriva för kod där i HTML för att centera headern.
Hjärtliga hälsningar,
baaartil
Min header centreras inte även om jag gör rätt. Headern har with 750. Fattar inte vad felet är.
ReplyDeleteLyckas inte centrera min header... Borde jag använda någon annan kod?
ReplyDeletehttp://clinasvenskon.blogspot.fi/
Carina: Gör som i inlägget, men prova istället
ReplyDelete#Header1_headerimg {
margin-left: auto;
margin-right: auto;
}
Lycka till!
Har försökt med det, men lyckades inte få den centrerad iaf...
ReplyDeleteHej! Jag vet inte vad jag gör för fel, men när jag går in på html-listan så kan jag inte skriva någonstans, det kommer inga tecken när jag skriver... Vad kan felet vara?
ReplyDeleteMvh Evelina
(evelinadamsjo.blogspot.com)