HTML #28: Elemente und Gadgets zentrieren Teil 2

Im letzten Teil der Reihe, der vor einer Woche erschienen ist, hatten wir begonnen die Elemente und Gadgets auf unserem Blog zu zentrieren. Nachdem der Header, die Blogbeschreibung, der Blogtitel und das Seiten-Gadget zentriert sind geht es heute mit der Sidebar, dem Postbereich und dem Footer weiter. Wo genau die einzelnen Schnipsel eingefügt werden müssen wurde ja schon im letzten Teil erklärt, darum geht es an dieser Stelle gleich weiter. 



Da ich meinen Blog in diesem Bereich schon angepasst habe und es noch auf meiner Liste für einen anderen Blog stand habe ich das alles an diesem Blog ausprobiert. Lasst euch da nicht verwirren. Im Moment sieht der Blog noch so aus. Veränderungen wurden noch keine vorgenommen, was zum Erklären wirklich praktisch ist. Wir arbeiten wie im ersten Teil zum Zentrieren im Vorlagenmenü --> Erweitert --> CSS.


Eine Möglichkeit besteht darin den gesamten Postbereich zu zentrieren. Dies schließt das Datum, die Überschrift, den Text, die Bilder usw. also wirklich alles mit ein.


Um dieses Ergebnis zu erzielen brauchen wir diesen Schnipsel:

/*gesamten Postbereich zentrieren*/
.main-inner .column-center-inner .section {
   text-align: center;
}

Für mich nicht wirklich ideal. Mir ist es lieber, wenn ich die einzelnen Elemente separat voneinander anordnen kann. Beim Datum und der Überschrift finde ich es ja hübsch, wenn es mittig ausgerichtet ist. Texte lassen sich für mein Empfinden so jedoch nicht so schön lesen. Mit den folgenden Schnipseln könnt ihr einzelne Teile des Postbereiches zentrieren. Statt "center" könnt ihr auch "right" eingeben um das Element rechts auszurichten.

/*Post-Datum zentrieren*/
.main-inner h2.date-header{
  text-align: center;
}

/*Post-Überschrift zentrieren*/
.main-inner h3.post-title {
  text-align: center;
}

Für den den Text gibt es neben der Ausrichtung "center" für zentriert, "left" für links (die Standardeinstellung), "right" für rechts auch noch die Möglichkeit des Blocksatz. Diesen mag ich persönlich sehr gerne. Für den Blogsatz müsst ihr "justify" angeben.

/*Text zentrieren*/
.main-inner .post-body{
  text-align: center;
}


So sieht der Chillibalkon nun nach diesen Anpassungen aus. Das Datum steht rechts, die Überschrift ist zentriert und der Text ist als Blocksatz eingerichtet. Auf eingefügte Bilder sollte sich das nicht auswirken, diese erscheinen weiter automatisch zentriert - zumindest war dies bei meinem Test der Fall. Sollte es bei euch anders sein, so sollte dieser Schnipsel dafür Sorgen, dass die Bilder wieder mittig ausgerichtet werden:

/*Bilder zentrieren*/
.main-inner .post-body img {
  padding: 0 !important;
}

Unterhalb des eigentlichen Posts gibt es auch noch einen Bereich. Hier finden sich verschiedene Links und Angaben, wie Label etc. auch diese können mittig ausgerichtet werden.

/*Post-Footer zentrieren*/
.main-inner .post-footer-line {
  text-align: center;
}


Der zentrierte Post-Footer sieht dann so aus. Als nächstes machen wir uns daran die Elemente in der Sidebar zu zentrieren. 

Zum einen haben wir wieder die Möglichkeit die gesamte Sidebar zu zentrieren. Mir reicht es aber nur die Überschriften zu zentrieren. Den Schnipsel für beide Varianten findet ihr hier:

/*Sidebar zentrieren*/
.sidebar{
  text-align: center;
}

/*Sidebar-Überschriften zentrieren*/
.sidebar h2{
  text-align: center;
}

So wie der Header der Bereich über dem Blog ist (also über der Sidebar und dem Postberei) so gibt es auch einen Bereich weiter unten, der Footer genannt wird. Dieser ist bei mir komplett leer und so recht habe ich auch noch keine Idee was ich dort gerne unterbringen würde. Trotzdem lassen sich die Elemente in diesem Bereich ausrichten. Auch hier kann alles oder nur die Überschrift zentriert werden.

/*Footer zentrieren*/
.footer-outer {
  text-align:center;
}

/*Footer-Überschriften zentrieren*/
.footer-outer h2{
  text-align: center;
}

Das soll es dann aber auch zum Thema zentrieren gewesen sein. Ich empfehle euch die Kommentare jeweils mit einzufügen, so wisst ihr schneller und leichter was ihr da überhaupt gemacht habt. Auch ist es sicher nicht unpraktisch vor dem Ausprobieren eine Sicherung (siehe Teil 21) anzulegen.

Nun wünsche ich ganz viel Spaß beim Ausprobieren und Anpassen. Bei Fragen oder Problemen versuche ich gerne zu helfen. Solltet ihr noch weitere HTML-Fragen haben so stellt sie mir gerne. Versprechen kann ich nichts, aber versuchen ganz viel.

6 liebe & nette Meinungen

  1. Danke. Das hat wieder mal wunderbar geklappt. Ich lese mich zwar nun auch ein wenig in CSS ein, aber das sind immer noch Böhmische Dörfer für mich *lach*.
    Wie gut, daß du das so schön handlich aufbereitest und erklärst.
    Liebe Grüße
    Gusta

    AntwortenLöschen
    Antworten
    1. Hallo Gusta,

      so richtig fit bin ich in CSS auch noch lange nicht, HTML fällt mir leichter, aber das was ich wirklich mal gelernt habe hilft doch beim Übertragen und verstehen, was da passiert :D

      Liebe Grüße
      Rebecca

      Löschen
  2. vielen vielen dank! ich habe es jetzt tatsächlich geschafft, meine blogbeschreibung zu zentrieren :-)
    gibt es denn die Möglichkeit innerhalb der blogbeschreibung einen Zeilenumbruch einzubauen?
    glg andrea

    AntwortenLöschen
    Antworten
    1. Hallo Andrea,

      hast du schon versucht in dem Feld in dem du die Beschreibung eingibst einen Umbruch zu machen, wie du es auch bei der Textverarbeitung machst. Das wäre mein erster Ansatz.

      Liebe Grüße
      Rebecca

      Löschen
  3. Hallo Rebecca,
    leider funktioniert bei mir die Zentrierung des Datums nicht. Ich habe den "Schnipsel" so eingefügt wie es bei dir steht, doch leider passiert rein gar nichts

    AntwortenLöschen
    Antworten
    1. Hallo Luisa,

      es hat bei dir doch funktioniert. Der Schnipsel bezieht sich auf das Datum innerhalb des Postbereiches. Bei dir steht das ganz am Ende "Eingestellt von... um...". Dieser Bereich wurde zentriert.

      Daher gehe ich davon aus, dass es dir um das Datum oben über dem Post geht. Dieses wird mit einem anderen Befehl angesprochen. Probier doch mal das folgende aus. Ich habe leider gerade keinen Blog in dem ich das testen kann.

      /*Überschrift-Datum zentrieren*/
      .date-outer h2.date-header{
      text-align: center;
      }

      Viel Erfolg und liebe Grüße
      Rebecca

      Löschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...