Überschrift positionieren

[Auge]

Hallo

Ja richtig! Es geht um den Bereich mit dem Fragezeichen. Entschuldigung, dass ich es nicht markiert habe.

Wie bekomme ich es hin, damit es so aussieht wie auf dem Bild? Mein Gedanke war ja, dass ich die Grafik über "HowTo" setzen muss, damit der Text bei float oder display: inline neben das Fragezeichen springt.

Abgesehen davon, dass es heutzutage ^[1] viel besser geeignete CSS-Techniken gibt, deinen Wunsch zu realisieren (Stichwort: „Grid“), ist ein erster und gravierender Hinderungsgrund für die Umsetzung, dass dein HTML fehlerhaft ist.

Laut dem Doctype im HTML-Quelltext deiner Seite verwendest du HTML 4.01 Strict. Leider ist das einerseits überaus veraltet und andererseits befolgst du nicht die Regeln dieser HTML-Variante (Elemente schließen, etc.). Du schreibst im OP (Eröffnungsposting), dass du Joomla als System benutzt. Stammt der HTML-Quelltext aus einem fertigen Template/Theme oder hast du selbst daran herumgeschraubt?

Sei's wie es sei. Du brauchst erstens ein Template, Theme, das aktuelle Webtechniken verwendet (HTML5, CSS3) und andererseits in diesem Template/Theme eine Elementstruktur, die dein Ansinnen unterstützt.

Was du erreichen willst, ist, die Elemente für das Icon (aktuell (?) das Fragezeichen), die Überschrift „HowTo“ und den Untertitel „other HowTo's“ gemeinsam zu gruppieren. Also gehören sie zuallererst in ein gemeinsames Elternelement.

<div>
 <h2>HowTo</h2>
 <div>other HowTo's</div>
 <img src="/Joomla/images/kategoriebilder/howto.png" alt="" />
</div>

Danach kann man das die betreffenden Elemente gruppierende div zu einem Grid erklären und die einzelnen Elemente darin wie gewünscht verteilen. Das ist alles kein Problem, erfordert aber erst einmal eine ordentliche HTML-Struktur und die Verwendung der vorgenannten aktuellen Techniken. Mit HTML4.01 solltest du jedenfalls nicht mehr auch nur irgendwas beginnen.

Tschö, Auge

---

1. 10 Jahre nach deinen ersten Experimenten (nach deinen eigenen Worten im OP) ↩︎