mittige Ausrichtung

  • Hallo zusammen,

    ich bin recht neu in der Programmierung von HTML und CSS und bräuchte mal eure Hilfe:

    Beispielcode:

    <h2>Wie gehts? | Wo kommt ihr alle her?</h2>

    <h2>Wie wird das Wetter morgen? | Sonne!</h2>

    ich möchte hinbekommen, dass die vertikalen Trennstriche der beiden Überschriften (jeweils <h2>)
    1) exakt untereinander sind,
    2) Exakt mittig im Dokument platziert sind,
    unabhänging von der Textlänge (der Text links und rechts davon soll anschließend jeweils der Position des Trennstriches "anpassen").

    Mit "align" und "center" bin ich leider nicht weitergekommen.

    Ist klar, was ich meine? Irgendwelche Idee?

    Freue mich über Hilfe!

  • H2 ist wie alle H-Elemente ein Blockelement. Blockelemente haben von Haus aus eine Breite von 100%.
    Da du nun das ganze mittig haben willst mit dem Strich, musst du dein H2 Text in 2 mal 2 H2-Elemente aufteilen. Nach dem Strich bietet sich hier an.
    Da du nun 4 Elemente hast, können wir mit gerade und ungerade arbeiten. Gerade und ungerade machst du mit dem Pseudoelement :nth-child(even) bzw. :nth-child(odd).
    Du gibst also den H2-Elementen 50% Breite und damit sie nebeneinander stehen vergibst noch ein float:left.
    Bei den ungeraden H2-Elementen schiebst du den Text nach rechts.
    Bei den geraden H2-Elementen liegt der Text jetzt zu nah an dem vertikalen Strich, daher geben wir hier ein text-indent von 0.3em mit um auf den gleichen Abstand zu kommen.

    Wenn du den vertikalen Abstand zwischen den H2-Elementen weg haben willst, dann musst du noch ein margin-top:0 dem H2 mitgeben.


    Versuch mal dein Glück.

  • Hallo,

    Zitat

    Ist klar, was ich meine? Irgendwelche Idee?

    Nicht 100%ig.

    Soll der Text links vom Trennstrich links- oder rechtsbündig sein?

    Soll der Trennstrich durchgängig sein oder zur besseren Unterscheidung der beiden Texte jeweils einen kleinen Abstand enthalten?

    Hast du mehr Infos zur Seite? Warum h2-Elemente? Ich sehe eher das dl-Element als geeignet, da die Angaben jeweils links und rechts vom Trennstrich inhaltlich wohl zusammengehören.

    Hast du die bisherige Seite online? Ansonsten ist eine konkrete Hilfe kaum möglich, sondern nur alleinstehende Beispiele.

    Gruss

    MrMurphy

    2 Mal editiert, zuletzt von MrMurphy (8. Mai 2014 um 19:21)

  • hier mal die Quelltexte:

    im CSS:
    h2 {
    color: white;
    background-color: #FF0000;
    font-family: Trebuchet MS;
    font-size: 1.5em;
    margin: 0;
    padding: 2px;
    padding-left: 12px;
    }

    im html:
    <h2>Wie gehts? | Wo kommt ihr alle her?</h2>
    <p>Text 1</p>
    <h2>Wie wird das Wetter morgen? | Sonne!</h2>
    <p>Text 2</p>


    MrMurphy
    die Trennstriche sollen nicht miteinander verbunden sein, da drunter noch jeweils Text 1 /Text 2 kommt.
    Der Text links vom Trennstrich soll rechts an den Trennstrich gebunden sein. Und nein, die Seite ist noch nicht online.
    Ich hoffe, es ist jetzt klarer.

    MfG

  • Quelltext:
    <h2 style="float:left; :nth-child(odd); margin-right:0.3em; margin-left: xem">wie gehts?</h2> <h2 style=":nth-child(even)">| wo kommt ihr alle her?</h2>
    <p>Text 1</p>

    <h2 style="float:left; :nth-child(odd); margin-right:0.3em; margin-left:xem"> Wie wird das Wetter morgen? </h2>
    <h2 style=":nth-child(even);">| Sonne</h2>
    <p>Text 2</p>

    Habe die Grenze jeweils links vom Trennstrich gesetzt. Bei "margin-left" dann den gewünschten Wert eingeben (solange angleichen, bis es passt)! Mit dem vertikalen Abstand zwischen den <h2>-und <p>-Elementen bin ich zufrieden.

    MfG

  • Hallo,

    entweder auch mit nth-child oder mit Klassen.

    Wobei ich mir nicht so recht vorstellen kann, das die Lösung auch bei unterschiedlichen Fenstergrößen oder Zoom-Faktoren funktioniert. Ich würde eher alles zentrieren. Dann kann das ganze auch gleich responsive gestaltet werden.

    Gruss

    MrMurphy

  • wie sage ich ihm dann die unterschiedlichen "margin-left" Werte für das obere und untere <h2>?

    Dadurch dass du den Strich jetzt im nachfolgen H2-Element hast und zudem dazwischen ein P-Element wird es etwas anders ausfallen, aber auch nciht schwieriger und ist zudem responsive und lässt sich auch vergrössern.

  • Hallo,

    Zitat

    Programmierstil

    Autsch.

    In HTML und CSS wird nichts programmiert, das sind eher Seitenbeschreibungssprachen, aber keine Programmiersprachen. (Nur mal so nebenbei)

    Mit HTML und CSS gibt es häufig mehrere Lösungsansätze, die manchmal mehr und manchmal weniger Vor- und Nachteile haben. Deshalb benötigt man für konkrete Hilfe auch den Inhalt der Webseite.

    Explanator hat wie von dir vorgegeben den senkrechten Strich als Textzeichen genommen. Ich habe statt dessen den senkrechten Strich eher optisch gesehen und den mittels einer Rahmen-Anweisung (border) erstellt.

    Außerdem finde ich es optisch schöner, wenn der senkrechte Strich sich beim Textumbruch der Höhe des jeweils höchsten Textes automatisch anpasst.

    Das kannst du aber alles selbst aus dem Quelltext ersehen. In meinem sind auch alle CSS-Anweisungen im head-Bereich enthalten.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (10. Mai 2014 um 16:23)