HTML #27: Elemente und Gadgets zentrieren Teil 1

Vor längerer Zeit hatte ich schon einmal über das Zentrieren verschiedener Elemente geschrieben. In Teil 9 ging es um das Zentrieren des Headers und in Teil 10 darum wie man das gleiche mit der Seitenleiste macht, also diesen kleinen Tabs oben über dem Post. Nun kamen aber noch mehr Fragen dazu und so gibt es der Vollständigkeit halber an dieser Stelle ein bisschen was Altes und ein bisschen was Neues. Ella von "Oma macht das schon" (auch bekannt als Nähoma) wollte wissen wie man den Header, den Posttitel und die Überschrift zentrieren kann und Nicole von "Purple Roses Country Cottage" wollte gerne wissen, wie es möglich ist die Blogbeschreibung zu zentrieren. Um auf Nummer sicher zu gehen sichern wir unseren Blog (wie in Teil 21 erklärt) und dann geht es los.


Um die Elemente zu zentrieren müssen wir dieses mal nicht direkt am HTML arbeiten, was auch mal ganz angenehm ist. Alle Einstellungen lassen sich über das CSS einstellen. Um dieses bearbeiten zu können rufen wir zunächst das "Vorlagenmenü" auf.


Hier klicken wir dann (nachdem wir zur Sicherheit alles gesichert haben!) auf "Anpassen".


In der linken Spalte wählen wir "Erweiter" aus und dann den Unterpunkt "CSS hinzufügen". In den weißen bereich können wir später einfach alles einfügen. Die Befehle sind so geschrieben, dass sie die alten Befehle überschreiben, so müssen sie nicht gelöscht werden.

Um es ein bisschen übersichtlich zu gestalten würde ich vorschlagen, dass wir uns von oben nach unten durch den Blog arbeiten. Darum fangen wir mit dem Header an. Hier ist es wichtig zu wissen, wie wir ihn eingefügt haben. Welche drei Möglichkeiten es gibt habe ich letzte Woche in Teil 26 erklärt.


Haben wir uns für die Möglichkeit "Hinter Titel und Beschreibung" entschieden, so müssen wir jedes der drei Elemente für sich zentrieren. Damit es übersichtlicher wird habe ich vor den jeweiligen Schnipsel des Codes einen Kommentar eingefügt. Dieser ist für die Funktion unwichtig, aber er hilft uns die Übersicht zu behalten, wenn wir später noch einmal etwas ändern möchten.

/*Headerhintergrund zentrieren*/
#header-inner {
  background-position: center !important;
  width: 100% !important;
}

Ist der Header nur der Hintergrund, so müssen wir ggf. auch noch den Blogtitel und die Blogbeschreibung zentrieren. Dafür brauchen wir die folgenden beiden Schnipsel. Diese werden einfach kopiert und in den CSS-Bereich eingefügt.

/*Blogtitel zentrieren*/
.header h1{
text-align: center
}
/*Blogbeschreibung zentrieren*/
#header-inner h1, .description {
text-align: center
}


So sah es dann bei mir aus. Titel und Beschreibung werden durch die Befehle in die Mitte gerückt. Mit meinem Header sieht es natürlich nicht so gut aus, denn auf diese Möglichkeit ist er ja auch nicht ausgelegt.


Haben wir uns für die Möglichkeit entschieden die Beschreibung unter dem Header anzuzeigen. So müssen der Header und die Beschreibung zentriert werden. Dafür werden die zwei folgenden Schnipsel benötigt.

/*Header zentrieren*/
#header-inner img {
  margin-right: auto !important;
  margin-left: auto !important;
}
/*Blogbeschreibung zentrieren*/
.Header .description {
  text-align: center !important;
}


Mit diesem Befehl sieht es dann so aus. Für mich wirkt eine mittige Ausrichtung meist ausgewogener. Sonst liegt das "Gewicht" auf der linken Seite und es kippt alles dort rüber. Versteht man das? Es ist eben so ein Gefühl.


Die dritte Möglichkeit ist die, einen Header mit allen Informationen zu gestalten und auf den Blogtitel und die Beschreibung ganz zu verzichten. Den Header können wir dann auf einem der zwei folgenden Wege zentrieren. Das Ergebnis sollte das gleiche sein, doch wie Blogger eben manchmal ist gibt es Probleme an Stellen, an denen keine sein sollen. Probiert im Zweifelsfall also einfach mal aus. 

/*Header zentrieren V1*/
#Header1_headerimg {
  margin: auto;
}

/*Header zentrieren V2*/
#header-inner img {
  margin-right: auto !important;
  margin-left: auto !important;
}
Der obere Bereich unseres Blogs (Header, Titel und Beschreibung) wären nun also zentriert und zwar egal auf welche Weise wir den Header eingefügt haben. In meinem Blog kommen nun die Sozialmediabutton. Diese habe ich aber über ein HTML/Java-Gadget eingefügt in dem ich sie direkt zentriert habe. Darum geht es nun mit dem Seiten-Gadget (Seitenleiste oder Seitenreiter) weiter.


Um dieses zu zentrieren gibt es verschiedene Möglichkeiten. Bisher habe ich es so gemacht wie ich es in Teil 10 der Reihe erklärt habe. Dies richtet die Leiste automatisch aus, was auf der einen Seite sehr praktisch ist. Auf der anderen Seite kommt der Internet Explorer von Microsoft damit nicht zurecht, was wirklich ärgerlich ist. Hier werden die einzelnen Tabs untereinander statt nebeneinander angezeigt und möglicherweise wird nur der Text angezeigt oder der Text fehlt. Zwar sind inzwischen andere Browser (Firefox, Chrome, Opera, Safari usw.) weit verbreitet doch sollen es ja alle Leser schön haben. In den Kommentaren haben wir noch zwei weitere Möglichkeiten ausprobiert. Die eine verändert die Abstände zwischen den Tabs und die andere muss komplett manuell eingestellt werden, was nur nach Augenmaß funktioniert und bei jeder Änderung am Seiten-Gadget neu gemacht werden muss. Es geht aber auch einfacher.

/*Seiten-Gadget zentrieren*/
.PageList ul{
  float: left;
  position:relative !important;
  left: 50% !important;
  overflow: visible !important;
}
.PageList ul li{
  float: left;
  position:relative !important;
  right: 50% !important;
}


Als Grundlage für meinen Blog dient mir die "Bildfenster"-Vorlage. Für diese und die meisten weiteren Vorlagen sollte der Schnipsel oben funktionieren. Wenn ihr mit der "Einfachen"- bzw. "Simple"-Vorlage arbeitet oder es Probleme gibt, dann probiert doch diesen Schnipsel.

/*Seiten-Gadget zentrieren (Simple)*/
.PageList {
  text-align:center !important;
}
.PageList li {
  display:inline !important;
  float:none !important;
}

Da der Post schon sehr lang geworden ist unterbreche ich die Erklärungen an dieser Stelle mal. Im nächsten Post geht es dann weiter unten im Blog weiter und zwar mit der Sidebar, dem Postbereich und dem Footer.

Eine liebe & nette Meinung

  1. ich danke dir!!!
    da kann ich viel neues lernen und auf meinem blog ausprobieren!
    lg andrea

    AntwortenLöschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.

Related Posts Plugin for WordPress, Blogger...