Header Ads

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:

#header-inner {
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

39 comments:

  1. Tusen tack!!!
    Har ju varit ganska störande i de nya mallarna ju...du är kanon!!!

    ReplyDelete
  2. Jättefint, tack, men tyvärr blir ju texten i headern också centrerad, den "följer med bilden".
    Tidigare hade jag hela den långa meningen, på en rad, under bilden. Vore tacksam för tips om hur man löser det.

    ReplyDelete
  3. I ditt fall ska du INTE lägga in ovanstående kod utan den här istället:


    #Header1_headerimg {
    margin-left: auto;
    margin-right: auto;
    }

    Då blir enbart bilden centrerad, inte text

    ReplyDelete
  4. Tacktacktacktack! Vilken tur att du finns! Nu blev det ju snyggt (nåja-jag jobbar på det....)

    ReplyDelete
  5. Hm, ä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.
    Misstänker att något skall ändras i kodmallen, men får inte riktigt kläm på vad...

    ReplyDelete
  6. Då kan du använda den här koden:

    .Header .description {
    margin-left: 25px;
    }

    25px är bara på ett ungefär, ställ in det du själv tycker är lämpligt

    ReplyDelete
  7. Vilket tålamod du har! Tack.
    Och vilket ögonmått - 25 px var helt rätt!

    ReplyDelete
  8. 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!

    ReplyDelete
  9. Störde är bara förnamnet....
    Jag ä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.....

    ReplyDelete
  10. Testa den här: http://i.minus.com/i7OPHZf72hr77.png

    *ler*

    ReplyDelete
  11. 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.
    Förstår inte hur du menar....

    ReplyDelete
  12. Sorry, den låg som privat, nu ligger den som public som den ska!

    Jo, 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 ;-)

    ReplyDelete
  13. Tack, det blev ju mycket bättre.
    Egentligen ä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!

    ReplyDelete
  14. 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...

    Men, 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

    ReplyDelete
  15. NU, blev det bra!
    Tack så hjärtligt!

    ReplyDelete
  16. Lyckas inte med att centrera min header
    Min blogg är http://nataschad.blogspot.com/

    ReplyDelete
  17. Tazh - din header är bredare än vad din bloggs wrapper är så vi får justera koden lite.

    Anvä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;
    }

    ReplyDelete
  18. Hej!
    Det ä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

    ReplyDelete
  19. Hej!Glömde att skriva in adressen!
    http://chintohs.blogspot.com/

    ReplyDelete
  20. ä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 !

    ReplyDelete
  21. Anonym - titta på den här bilden: http://i.minus.com/irDwIpmT7fHoj.png

    ReplyDelete
  22. ( Eller den här bilden om du har det gamla, beiga gränssnittet: http://i.minus.com/ibqjM6SzpMQoxn.png )

    ReplyDelete
  23. Grym blogg! Jag lyckas dock inte med centreringen... Hittade rätt ställe i koden, tror jag, men händer ingenting. www.bohemiskpunkare.blogspot.com
    KRAM

    ReplyDelete
  24. ääää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!

    Kommer tillbaka! :)

    ReplyDelete
  25. Hej!
    Om jag vill ändra bloggrubriken i blogspot till att bli centrerad går det?

    Kan man även centrera banners?

    Mvh
    Johan

    ReplyDelete
  26. Fråga? Går det att ladda upp en bok på C.a 500 A4 sidor på bloggen?

    ReplyDelete
  27. Rolf - 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.

    ReplyDelete
  28. Skulle det bli fullt så kan man ju länka vidare till flera likadana bloggar, t.ex. vid "Äldre inlägg"

    ReplyDelete
  29. Hej Anneli.

    Jag 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

    ReplyDelete
  30. Baaartil - klicka på den här bildlänken så ser du vart du hittar din kodmall.

    http://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.

    ReplyDelete
  31. Tack Anneli, jag återkommer där.

    Har 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

    ReplyDelete
  32. Min header centreras inte även om jag gör rätt. Headern har with 750. Fattar inte vad felet är.

    ReplyDelete
  33. Lyckas inte centrera min header... Borde jag använda någon annan kod?

    http://clinasvenskon.blogspot.fi/

    ReplyDelete
  34. Carina: Gör som i inlägget, men prova istället
    #Header1_headerimg {
    margin-left: auto;
    margin-right: auto;
    }

    Lycka till!

    ReplyDelete
  35. Har försökt med det, men lyckades inte få den centrerad iaf...

    ReplyDelete
  36. Hej! 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?

    Mvh Evelina
    (evelinadamsjo.blogspot.com)

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------