HTML #10: Seitenleiste zentrieren

Wirklich ein nicht so toller Titel, aber mir ist nichts schönes eingefallen. Es geht nicht um die Sidebar sondern um die "PageList". Das ist die Menüleiste unter meinem Header, in der die Seiten angezeigt werden. Die liebe Janin hat mich gefragt wie man diese Leiste zentrieren kann. Wäre ich gar nicht drauf gekommen, die war schon immer links aber mittig ist wirklich schöner. Also habe ich mich da mal schlau gemacht und kann nun hier die Lösung präsentieren. Es ist wieder so einfach.



So soll es am Ende also aussehen. Nachdem nicht nur mein Banner, sondern auch meine Überschrifte, meine Autorenzeile und die Verlinkung zu den Kommentaren genau so wie die Überschriften in der Sidebar mittig sind war es der nächste Schritt.


Im Menü gehen wir auf den Punkt "Layout" und dort wählen wir "Anpassen".


Im Menüpunkt "Erweitert" scrollen wir nach unten bis "CSS hinzufügen".


Im Moment ist die Leiste noch linksbündig. Was dort steht richtet den Header mittig aus. Wie das genau geht habe ich im neunten Teil der Reihe erklärt. Nun kopiert ihr einfach den folgenden Text in das weiße Feld:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}


Bei mir hat sich die Leiste sofort mittig ausgerichtet. Vielleicht müsst ihr aber auch erst noch auf den großen orangen "Auf Blog anwenden"-Button klicken. Sollte er nicht orange sein einfach nach dem Einfügen einmal auf die Enter-Taste drücken, dann sollte es klappen.

Wie ihr seht also wirklich ganz einfach. Wichtig ist, dass ihr es wirklich unter bereits vorhandene Änderungen einfügt und nicht dazwischen. Ich habe eine Zeile frei gelassen, damit es übersichtlicher bleibt und ich später noch weiß, was zusammen gehört.

Bei Fragen oder Problemen schreibt mir doch einfach einen Kommentar. Noch mehr freue ich mich natürlich, wenn ich mir freudig berichten könnt, dass es funktioniert hat.

30 liebe & nette Meinungen

  1. Danke für die schnelle Umsetzung!!!! Leider hat es bei mir nicht geklappt. Ich werde es aber heute Abend noch einmal in Ruhe versuchen.
    LG Janine

    AntwortenLöschen
    Antworten
    1. Hallo Janine,

      ich gehe mal davon aus, dass du den kompletten Text kopiert hast (die Punkte am Anfang und auch die Groß- und Kleinschreibung ist wichtig). Benutzt du das Seiten-Widget von Blogger oder hast du eine eigene Leiste geschrieben. So funktioniert es nämlich nur damit. Ich habe noch eine zweite Lösung gefunden, mit der es klappt, da werden die Abstände zwischen den Tabs aber größer - woran das liegt weiß ich selbst nicht.

      .tabs-inner .widget ul {text-align: center;}
      .tabs-inner .widget ul li {float: none; display: inline-block;}

      Vielleicht hilft dir das ja weiter :)

      Liebe Grüße
      Rebecca

      Löschen
    2. Danke!!!!!!
      Jetzt sieht es schon viel besser aus.
      LG Janine

      Löschen
  2. super - es hat geklappt und sieht jetzt wirklich viel schöner aus!
    Liebe Grüße
    Gusta

    AntwortenLöschen
    Antworten
    1. Hallo Gusta,

      ob schöner oder nicht ist sicher Geschmackssache, aber ich mag es auch gerne. Es freut mich, dass es geklappt hat :)

      Liebe Grüße
      Rebecca

      Löschen
  3. Super, danke, das hat mich schon die ganze Zeit gestört, aber ich war zu faul zu googlen! Manchmal kommen die Lösungen für die Probleme einfach so :-)
    Klasse!
    Als Anregung, falls du noch uninspiriert bist, was die nächste Folge dieser tollen Reihe angeht und was vielleicht auch ein paar andere interessieren könnte:

    Wie macht man die personalisierten Pinterest/Facebook etc. Buttons?
    Wie ändert man das Design der Seitenleiste? Hab ich bis jetzt leider noch nicht rausgefunden...

    Vielleicht hast du ja Lust dich damit zu beschäftigen? :-)
    LG, Nina

    AntwortenLöschen
    Antworten
    1. Hallo Nina,

      wie man die Buttons zu den Sozialmedia verlinkt hatte ich in den Teilen 4 und 5 der Reihe erklärt. Da ich kein Facebook habe und mich nicht nur wegen eines Tutorials anmelden mag, gibt es dazu kein explizites Beispiel, aber ich denke, dass sich das übertragen lässt.

      Wie genau meinst du das, dass du das Design der Seitenleiste ändern willst? Eine andere Farbe, andere Schrift, zentriert ausrichten? Leider kann ich mir da gerade gar nichts vorstellen.

      Liebe Grüße
      Rebecca

      Löschen
    2. Ja genau, wie kann man zum Beispiel die Form der Reiter verändern? Bis jetzt kann ich soweit ich weiß nur die Schriftart verändern.
      Übrigens zerhaut der IE mal wieder das Design :-( Die Buttons stehen dann untereinander, bei dir ohne Text, bei mir nur mit Text. Sehr seltsam.

      Oh man, da sollte ich mal aufmerksamer lesen - Super, dass du meinen Wunsch schon erfüllt hast, bevor ich ihn geäußert habe :-D ;-)

      Löschen
    3. Hallo Nina,

      die Form der Reiter wirst du wohl direkt im HTML ändern müssen. Aber genau da liegt auch das IE-Problem. Seitdem Blogger diese runden Ecken der Reiter eingeführt hat gibt es das Problem. Die einfachste Lösung ist auf einen anderen Browser umzusteigen. Bei mir bringt der eh den Rechner zum kompletten Absturz und ich mache da einen großen Bogen drum. Chrome und Firefox laufen schneller und sicherer. Kann ich beides nur empfehlen.

      Ansonsten kannst du aber statt dessen diesen Code verwenden, musst dann aber selbst so lange die Pixelzahl verändern (die eckigen Klammern müssen weg), bis alles mittig ausgerichtet ist. Wenn du an dein Reitern etwas änderst (Schrift, Anzahl etc.) kann es von vorne losgehen. Damit kann dann auch der IE arbeiten, ist aber umständlicher und brauchst Zeit.

      .PageList ul {padding-left:[Pixelzahl]px !important;}

      Viel Erfolg und liebe Grüße
      Rebecca

      Löschen
    4. :-D Ich weiß, IE benutz ich auch nicht freiwillig (wie keiner, den ich kenn), aber als ich im Büro (wo man, aus welchen Gründen auch immer, IE benutzen muss) mal kurz auf meinen Blog gespickt habe, ist mir das nur aufgefallen...
      Danke für die Lösung, das schau ich mir mal an.
      LG, Nina

      Löschen
    5. Hallo Nina,

      ich hab es bei mir ausprobiert und damit geht es. Du hast mein volles Mitgefühl, dass du mit dem IE gequält wirst ;)

      Liebe Grüße
      Rebecca

      Löschen
  4. Ich kann Dir freudig berichten, dass es funktioniert hat ;O) !
    Allerdings geht es bei mir immer erst, wenn ich nach dem Einfügen die Eingabetaste betätige.
    Dankeschön, so simpel zu machen und Du weißt immer, wie es geht!

    Liebe Grüße
    Ina

    AntwortenLöschen
    Antworten
    1. Hallo Ina,

      danke für den Hinweis. Ich habe es mal oben ergänzt, denn nicht jeder ist so fleißig wie die liebe Pamela und sucht in den Kommentaren nach einer Lösung. Vielen Dank :)

      Liebe Grüße
      Rebecca

      Löschen
  5. Juhuuuu!!!! Es hat geklappt..... ♪ tralala ♫ la la la♪.............. *freudighüpfend*
    Erst hat das nicht geklappt, dann habe ich diese Zeile dazwischen nicht gelassen und stellte sich mittig um, allerdings nur bei der Anpassungsseite. Dann habe ich auf Button: "auf Blog anwenden" und dann auf: "Blog anzeigen" und es war da!!! *breitgrinsend*
    Wie man die Verlinkung zu Pinterest und Co. macht habe ich noch gar nicht richtig verstanden und auch nicht, wie ich die Buttons selbst "gestalten" kann..... oder sind die schon irgendwo vorgegeben?!? hmm..... da muss ich nochmal konzentrierter lesen!!!
    Ganz liebe Grüße und vielen Dank!!!
    Betty

    AntwortenLöschen
    Antworten
    1. Hallo Betty,

      das ist ja klasse, dass es funktioniert hat.

      Die Button musst du dir entweder selbst machen oder du schaust mal im Netz. Da gibt es viele liebe kreative Menschen, die Button gestaltet haben und diese kostenlos zur Verfügung stellen. Einfach mal "Sozialmedia Button" in die Suchmaschine eingeben. Da wirst du sicher fündig. Wenn du noch Fragen zum Verlinken hast, dann helfe ich dir gerne weiter.

      Liebe Grüße
      Rebecca

      Löschen
  6. Ich habe gerade gesehen, das Du immer so tolle Tipps schreibst wie diesen hier.
    Da muß ich mir mal in Ruhe alle Teile durchlesen. Bin ja noch ein Neuling beim Bloggen und denk mir öfters, ach, wie das wohl geht ....
    Da bleib ich auch gleich als Leser bei Dir, damit ich auch nichts verpasse
    Vielen Dank schon mal im voraus (auch wenn die Umsetzung bei mir wohl dauert :-)
    VG
    Blimi

    AntwortenLöschen
    Antworten
    1. Hallo Blimi,

      ich freue mich riesig, dich als neue Leserin begrüßen zu dürfen und hoffe sehr, dass meine kleine Reihe dir hilft. Bei Fragen darfst du dich gerne melden :)

      Liebe Grüße
      Rebecca

      Löschen
  7. Huhu!
    Danke mal wieder für diese Nerd-Starthilfe!!! ;-)
    Bei mir hat es natürlich erst nicht geklappt!!! Nicht einfach so und der orange Button war blass und ließ sich nicht betätigen.
    Der entscheidende Durchbruch kam, als ich Enter drückte (Danke Ina, für den Hinweis!). Da ging es zwar immer noch nicht, ... aber der Button wurde oranger. Und als ich ihn dann klickte, hat's geklappt!
    Ich bin mir bloß noch nicht sicher, ob ich es jetzt mittig lasse, oder ob ich mich schon zu sehr an linksbündig gewöhnt habe! ;-)
    Alles Liebe!

    AntwortenLöschen
    Antworten
    1. Hallo Pamela,

      Nerd-Starthilfe - das mag ich. Ich bin doch so ein riesiger Sheldon-Fan :D Danke für dieses Kompliment :)

      Ich habe den Hinweis von Ina jetzt ergänzt, vielen Dank für den Tipp, dass es kein Einzelfall ist. Ob es dir für dich gefällt kannst nur du wissen. Bei mir mag ich es lieber - ist aber sicher Geschmackssache :) Ist ja auch keine Pflicht hier alles nachzumachen sondern nur ein Angebot ;)

      Liebe Grüße
      Rebecca

      Löschen
  8. Hallo Rebeca,
    Dein Tip hat funktioniert Nachdem Ich mit Strg+C kopiert hatte. Mehr davon. Kennst du vieleicht auch noch ein einfachens Programm um solche:
    http://lh4.ggpht.com/-h_SvuZkog2s/UuOGyvvynRI/AAAAAAAAxTI/m2tiLo-0W3A/Mitternach_thumb%25255B3%25255D.png?imgmax=800
    oder ähnliche Grafiken zu erstellen?
    Liebe Grüße
    Fadenfee

    AntwortenLöschen
    Antworten
    1. Hallo Fadenfee,

      es gibt noch ganz viel mir - ist doch schon der 10. Teil der Reihe. Schau dich gerne mal um. Links in der Sidebar kommst du über den HTML-Button zu allen Posts zu dem Thema. Wenn du selbst noch Fragen hast, darfst du sie gerne stellen. Ich sammel und wenn ich Zeit habe beantworte ich sie gerne (wenn ich kann).

      Mit ein bisschen Geduld könnte sowas mit Paint machbar sein, wenn du dich in GIMP einarbeitest, dann wäre das sicher auch eine Lösung. Da ich in der glücklichen Lage bin mit Photoshop arbeiten zu können nutze ich das auch konsequent, daher habe ich spontan keine Empfehlung für dich. Wenn mir was über den Weg läuft, dann sage ich dir Bescheid.

      Liebe Grüße
      Rebecca

      Löschen
  9. Liebe Janine,
    bei mir hatts auch geklappt, vieeelen Dank, die Seitenleiste ist jetzt mittig.
    Ich hab noch was, ich hab ja eine Unterseite mit Anleitungen, aber ich kann sie nicht voneinander trennen, sie laufen immer hintereinander her.
    Bei Anderen Bloggern sind sie voneinander getrennt,
    oder auch nur ein Link, den man anklicken muß.
    Ich hoffe, dass ich mich einigermaßen verständlich ausgedrückt habe.
    Liebe Grüße
    Nähoma

    AntwortenLöschen
    Antworten
    1. Hallo Nähoma,

      es freut mich sehr, dass es geklappt hat.

      Wegen deiner Anleitungen: Die Seiten sind wie ein Post, nur dass sie eben über die Leiste aufgerufen werden und nicht zwischen den anderen Posts auftauschen. Wenn du nicht alles untereinander haben möchtest, dann könntest...

      ... für jeden Anleitung eine eigene Seite machen. Diese dann aber nicht in der Leiste oben anzeigen lassen, sondern von der Anleitungsseite, vielleicht mit einem Beispielbild aus verlinken.

      ... statt mehr Seiten zu machen einfach zu den Anleitungen einen Post schreiben und die Links auf der Seite wo sie jetzt sind nur sammeln.

      So lange sie alle auf einer Seite sind kannst du sie nicht trennen.

      Liebe Grüße
      Rebecca

      Löschen
    2. Hallo Rebecca,
      ich hab ja für alles einen Post geschrieben, wollte nur die Anleitung dazu, dann auf der Anleitungsseite zeigen, das geht dann anscheinend wirklich nicht, oder eben zusammenhängend.
      Kannst mal schauen, bei
      http://edeltraudmitpunkten.blogspot.de/p/bastelanleitungen.html
      da gibt es die Seite mit Bastel- und Nähanleitungen, aber nur ein Foto und dann der Link dazu
      Liebe Grüße
      Nähoma

      Löschen
    3. Hallo Nähoma,

      wenn ich das richtig sehe, dann wurde da auf der Seite immer ein Beispielbild eingefügt und dazu gibt es dann einen Link zum Post. Theoretisch kannst du aber auch das Bild selbst als Link einfügen, wie es auch bei den Bildern zu Linkpartys funktioniert. Einfach den Post kopieren klappt leider nicht, dann steht wirklich alles untereinander.

      Liebe Grüße
      Rebecca

      Löschen
    4. Liebe Rebecca,
      ich werds mal versuchen, mit den Beispielbildern,
      wenns nicht klappt, wende ich mich wieder Hilfesuchend an dich.
      Vielen lieben Dank
      Nähoma

      Löschen
  10. Bei mir klappt das leider nicht. Ich weiß nicht woran es liegt.

    Liebe Grüße,
    Belli

    AntwortenLöschen
    Antworten
    1. Es steht dann auch immer: Vorlage angwendet, aber es passiert/verändert nichts.

      Löschen
    2. Hallo Belli,

      weiter oben in den Kommentaren gibt es noch zwei Alternativen. Vielleicht hast du damit mehr Erfolg :)

      Liebe Grüße
      Rebecca

      Löschen
  11. Vielen, vielen Dank, bei mir hat es geklappt und es gefällt mir total gut!
    Dank dir hab ich es endlich hinbekommen!
    Ganz liebe Grüße
    Sandra von LieblingsLife

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