[ERLEDIGT] Wordpress Stylesheet & HTML Programmierung

[socialmedia-blog]

Bin kein HTML-Experte und wende mich daher an euch mit der Hoffnung, dass ihr mir weiterhelfen könnt.

Um meine Webseite www.socialmedia-blog.net ein bisschen übersichtlicher und SEO-freundlicher zu machen, experimentiere ich im Moment gerade mit Überschriften <h1> bis <5>. Dabei habe ich etwas Eigenartiges festgestellt: Wenn ich eine Überschrift z. B. als <h5>....</h5> markiere, erscheint sie nicht genau in der Mitte zwischen zwei Textblöcken. Stattdessen ist oberhalb der Überschrift deutlich mehr Platz als unterhalb. Was ist eurer Meinung nach Grund dafür? Gibt es eine Möglichkeit das Ganze im Stylesheet zu beheben? Ich habe schon versucht, die Pixel-Zahl der Überschriften zu verändern, was jedoch auch nicht zu einer Lösung geführt hat.

Hat jemand von euch ähnliche Erfahrungen gesammelt? Für meinen Wordpress-basierten Blog benutze ich Yamidoo Magazine als Theme.

 

[SpiceLab]

Wenn ich eine Überschrift z. B. als <h5>....</h5> markiere, erscheint sie nicht genau in der Mitte zwischen zwei Textblöcken. Stattdessen ist oberhalb der Überschrift deutlich mehr Platz als unterhalb. Was ist eurer Meinung nach Grund dafür?

Grundsätzlich:

Entweder der voreingestellte Randabstand der Blockelemente (<h1-6>, <p>, ...), oder eine explizite margin- / padding-Regel.

Rechtsklick auf dem Textabsatz und der Überschrift -> Element untersuchen (Prüfen) gibt letzte Gewissheit, ob die Elemente solch eine Formatierung besitzen, die dann entsprechend zu korrigieren ist, oder die Voreinstellung per margin zurückgesetzt werden muß.

Speziell:

Per Firebug kann ich das Problem in der Seite nicht reproduzieren, da im CSS für <h1-6> margin:0 und padding:0 (Zeile 100), sowie margin-bottom:12px (Zeile 730), und für <p> zunächst margin:0 (Zeile 199) und im weiteren Verlauf des Stylesheets margin-bottom:14px (Zeile 694) festgelegt ist. Die Überschrift erscheint somit augenscheinlich mittig zwischen den Textblöcken.

Möglicherweise hast Du diese Einstellungen zwischenzeitlich schon selbst vorgenommen.

 

[socialmedia-blog]

Hallo Spicelab,

vielen Dank für deine schnelle Antwort.

Entweder der voreingestellte Randabstand der Blockelemente (<h1-6>, <p>, ...), oder eine explizite margin- / padding-Regel. Rechtsklick auf dem Textabsatz und der Überschrift -> Element untersuchen (Prüfen) gibt letzte Gewissheit, ob die Elemente solch eine Formatierung besitzen, die dann entsprechend zu korrigieren ist, oder die Voreinstellung per margin zurückgesetzt werden muß.

Wie lässt sich das konkret umsetzen? Welche Änderungen sollte ich hier vornehmen, dass die Überschrift mittig ist bzw. der Abstand zwischen dem Seitenanfang und dem Text verschwindet? Bei mir im Stylesheet steht Folgendes:
/*Headings */
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
.hr { border-top: 1px solid #EEE; }

"Möglicherweise hast Du diese Einstellungen zwischenzeitlich schon selbst vorgenommen"
Die anderen Überschriften haben alle keine <h1-6> Markierung. Da es aber optisch schöner aussieht, wenn die Überschriften etwas größer sind als der übrige Text und auch SEO-technisch denke ich Sinn macht, die Überschriften deutlicher hervorzuheben, würde ich gerne eine <1-6>-Markierung vornehmen.

 

[socialmedia-blog]

Wo im Stylesheet kann ich den Abstand zwischen dem fettgedruckten Text und Seitenanfang verringern? Vielen Dank für eure Mithilfe!

 

[SpiceLab]

Kannst Du den abgebildeten Permalink http://socialmedia-blog.net/china/personalbeschaffung-netzwerke/ bitte mal freischalten, um das live zu sehen?

Page not found

Wie ich eingangs schon schrieb, kann ich das (neue) Problem mit dem DeveloperTool Firebug nicht nachstellen.

 

[SpiceLab]

Bei mir im Stylesheet steht Folgendes:
/*Headings */
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }

Wie ich es heute früh unter "Speziell" festhielt

Und ab Zeile 730 zusätzlich dieses:

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 {
   margin-bottom: 12px;
  ...
}

"Möglicherweise hast Du diese Einstellungen zwischenzeitlich schon selbst vorgenommen"
Die anderen Überschriften haben alle keine <h1-6> Markierung.

Meine Aussage bezog sich selbstverständlich auf das CSS ;)

 

[socialmedia-blog]

Hallo Spicelab. Link ist jetzt freigeschaltet: http://socialmedia-blog.net/china/personalbeschaffung-netzwerke/

Ich habe jetzt folgende Stellen als h5 markiert:
<strong><h5>Wie finde ich als deutsches Unternehmen geeignete Mitarbeiter? Welche Bewerber halten sich in welchen Netzwerken auf? Welche Strategien sind zielführend, welches Vorgehen sollte ich besser vermeiden? Bei meinem Workshop in München war Personalbeschaffung eines der Top-Themen. Denn was die Rekrutierung von Mitarbeitern angeht, bestehen zwischen Deutschland und China nach wie vor gewaltige Unterschiede.</strong></5>
<strong><h5>Millionen an Chinesen auf Online-Jobbörsen aktiv</strong></h5>

 

[SpiceLab]

Ich habe jetzt folgende Stellen als h5 markiert:
<strong><h5>...</strong></5>

Fallen Dir die Fehler nicht auf?

1. <strong> darf kein <h5> enthalten, sondern andersherum.
2. Falsche Reihenfolge der öffnenden u. schliessenden Tags.
3. </5> statt </h5>.

Zudem tauchen da noch ein umschliessendes <p></p> und ein <br /> (Zeilenumbruch) zwischen <strong> und <h5> auf:

<p><strong><br />
<h5>...</strong></5></p>
<p>...</p>
<p>...</p>
<p>...</p>
<h5>...</h5>

Womit der Browser das fehlerhafte HTML am Bildschirm so zurückgibt:

<p><strong><br /></strong></p>
<h5>
  <strong>...</strong>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</h5>
<h5>...</h5>

Und für das vorgeschobene <p> incl. Zeilenumbruch gilt per CSS zusätzlich margin-bottom:14px.

Valides HTML ohne umschliessendes <p></p>:

<h5><strong>...</strong></h5>

 

[socialmedia-blog]

Ok. Vielen Dank für deine ausführliche Antwort, die mir definitiv weiterhilft.

 

[SpiceLab]

Ok. Vielen Dank für deine ausführliche Antwort, die mir definitiv weiterhilft.

Sieht doch so auch gleich viel besser aus