HTML Basics: Header zentrieren


In letzter Zeit wurden mir oft allgemeine Fragen zu Layout und Design gestellt, deswegen starte ich jetzt eine Reihe zu HTML/CSS und Designbasics. Ich hoffe ich kann euch dadurch ein wenig weiter helfen und lasst nicht den Kopf hängen, falls mal etwas nicht klappen sollte! Übung macht den Meister ;)

Ein grundlegender Schritt um bei Blogger sein Layout zu gestalten ist es den CSS-Code zu bearbeiten. Da nicht alle wissen wo sich dieser befindet hier eine kurze Anleitung dazu. Darunter folgt die zum zentrieren des Headers!




1. Ihr öffnet Vorlage bei euch
2. Geht dann auf Anpassen
3. Im geöffneten Fenster geht ihr auf Erweitert
4. Scrollt bis ganz unten und klickt auf CSS hinzufügen

Hier tippt ihr auch den Code ein um euren Header zu zentrieren/verschieben!


Wenn ihr ein Bild anstelle eines Titels und Beschreibung gewählt habt:

#header-inner img {
   margin-right: auto;
    margin-left: auto;
}

Falls der Header leicht versetzt stehen soll, wie bei mir, müsst ihr den Code wie folgt verändern:

#header-inner img { 
    margin-right: 150px; 
}

Hinter margin-right setzt ihr dann euren Abstand in Pixeln!

Wenn gar nichts klappt habt ihr vielleicht euren Header als Hintergrundgrafik eingefügt, dann müsste folgender Code euch helfen:

#header-inner {
    background-position: center; 
    width: 100%;
}


Infos nebenbei zum Code:

margin-right bedeutet schlicht und einfach wie weit der Header/Bild entfernt vom rechten Rand ist.  Daneben gibt es noch:

margin-top = Abstand vom oberen Rand
margin-bottom  = Abstand vom unteren Teil
margin-left = Abstand von links

Diese Befehle könnt ihr auch zum verschieben benutzen. Dazu fügt ihr sie lediglich unter margin-right ein tippt eure Pixelzahl daneben und setzt zum Schluss ein Semikolon 
Achtet immer darauf, dass am Anfang das am Anfang und am Ende  } die Klammern stehen bleiben!


Eure Gedanken:

  1. Hallo :))

    Oh man viielen Dank, endlich hat es funktioniert!!!
    Danke, dass du dir so viel Mühe gemacht hast.
    Ich werde in meinem nächsten Post auch noch erwähnen, dass das Logo von dir ist & deinen Blog auch verlinken ;D

    Liebe Grüße :)

    AntwortenLöschen
  2. Hi,

    vielen lieben Dank!! Endlich hat es geklappt. Auf das CSS bin ich gar nicht gekommen und hab mir echt einen Wolf gesucht.

    LG!

    AntwortenLöschen
  3. Endlich.. endlich!!!! Danke das es endlich mal jemand so erklärt, dass man es anwenden UND umsetzen kann. Ich danke dir. Made my day ;)

    Liebe Grüße,
    Sophia

    http://rowegulavo.blogspot.de

    AntwortenLöschen