Darstellung von Bild, Text, Bild

[Gunnar Bittersmann]

@@Giselle

ich habe jetzt folgendes realisiert.

Wo kann man sich deinen Versuch denn ansehen? (Und mit „ansehen“ meine ich keinen Screenshot.)

    <center style="margin-top:2em;">
	<h2>Willkommen</h2>
	<h3>in ............</h3>
	</center>

Das Markup ist falsch: „in ............“ ist keine Unterüberschrift zu „Willkommen“, sollte also nicht h3 sein.

„Willkommen“ und „in ............“ bilden zusammen eine Überschrift, beides gehört also in h2.

Die richtige Überschriften-Hierarchie ist insbesondere wichtig für Nutzer, die Webseiten nicht visuell erfassen, sondern mit assistiven Technologien wie Screenreadern.

Wenn du beides unterschiedlich stylen willst (verschiedene Schriftgröße? Warum eigentlich?), dann setze eins davon (oder beides) in ein span:

<h2>
  Willkommen
  <span>in ............</span>
</h2>

Im Stylesheet könnte dann sowas stehen wie

h2 {
  margin-top: 2em;
  text-align: center;

  span {
    font-size: 0.8em;
  }
}

Wie du siehst, geht die Zentrierung auch mit CSS. <center> hat im Markup nichts zu suchen.

Oben gezeigt die Variante mit Nesting. Ohne sieht’s so aus:

h2 {
  margin-top: 2em;
  text-align: center;
}

h2 span {
  font-size: 0.8em;
}

Kwakoni Yiquan