Zentrierung der Schriften

  • Hallo,


    habe ein kleines Problem mit der positionierung. Vllt kann mir ja jemand etwas helfen. Möchte die 2. Überschrift unter der 1. haben, und diese sollte sich anhand der 1. Überschrift ausrichten.


    Und die CSS

    html-seminar.de/woltlab/attachment/1163/

  • Ohne die Hintergrundgrafik erkennt man dein Bild nicht wieder und die Schrift ist unsichtbar, da weiß auf weiß. aber man kann auch ohne das erkennen: Du bringst da etwas durcheinander: align-items gehört zum Flexlayout und ist nur wirksam, wenn auch dispay:flex gesetzt ist. Benutze text-align statt dessen für beide Überschriften, dann werden sie horizontal zentriert. Und das margin-left bei der ersten Überschrift musst Du dann weg lassen.


    Und wahrscheinlich ist es besser, die Grafik als Hintergrund anzulegen, dann brauchst Du die Überschriften nicht mit negativem marging darüber zu verschieben. position:relative ist überflüssig, wenn Du sie mit margin verschiebst.

  • Super, danke Dir. Ja manchmal blick ich da ned durch im css. Machs aber auch zu wenig...


    Aber es wird besser. Dann kommt die Aufgabe dran das ganze 100% Responsive zu machen.

  • Ja, mit CSS hatte ich früher auch meine Probleme aber im Laufe der Zeit habe ich einiges dazu gelernt und kann es jetzt ganz gut handhaben. Vieles finde ich immer noch unlogisch, z. B. dass es kaum möglich war, etwas vernünftig vertikal zu zentrieren (was jetzt durch Flexlayout kein Problem mehr ist) und kuriose und unerwartete Effekte durch margin-collapse oder baseline-alignment.

  • Danke nochmals, hat sehr geholfen. Ja manchmal ist das sehr unlogisch bei css... Und der Kurs für css ist schon lange her... Das mit den unerwarteten effekten kenne ich auch...

  • Jo, in manchen Fällen würde man am liebsten die HTML-Spezifikation in den Müll kloppen und manchmal einen oder mehrere Browser. :D


    CSS ist wirklich ein Fall für sich. Irgendwas gibt es immer, worüber man sich aufregen könnte. Margin Collapsing ist da auch so ein Liebling von mir, wobei das wenigstens noch halbwegs zu handhaben ist, wenn man denn darüber Bescheid weiß und dann auch daran denkt. Gerade erst wieder passiert: Collapsing Margins kurz vergessen, ein margin gesetzt, was collapsed, und dann direkt wieder korrigiert. Bin mal gespannt, wann ich es schaffe, immer schon im Voraus daran zu denken. :S

  • Super, danke Dir. Ja manchmal blick ich da ned durch im css. Machs aber auch zu wenig...


    Aber es wird besser. Dann kommt die Aufgabe dran das ganze 100% Responsive zu machen.

    Hallo,


    Ich würde vorschlagen, dass Sie beide Überschriften in zwie verschiedene Classes setzen und dann die Überschriften wiefolgt zentrieren:


    Beachten Sie die mit Rot markierten beiden Stellen, mithilfe dieser Information werden die Überschriften unabhängig von der device-width immer zentriert sein, auch untereinander.


    So sollte Ihr Probelm gelöst sein.


    Lg,

    8pq8

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!