Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15

Thema: mittige Ausrichtung

  1. #1
    HTML Newbie
    Registriert seit
    08.05.2014
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Lächeln 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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: mittige Ausrichtung

    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.

  3. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    567
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: mittige Ausrichtung

    Hallo,

    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
    Geändert von MrMurphy (08.05.2014 um 20:21 Uhr)

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    08.05.2014
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mittige Ausrichtung

    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

  5. #5
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: mittige Ausrichtung

    Ich habe dir doch schon geschrieben, wie du vorgehen musst, damit du es so hinbekommst.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    08.05.2014
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mittige Ausrichtung

    Danke, jetzt habe ich es auch hinbekommen! habe die Begriffe :nth-child noch googeln müssen

    MfG

  7. #7
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: mittige Ausrichtung

    Prima, zeig mal den Code wie du es umgesetzt hast, damit auch andere die Lösung sehen, falls sie auf das gleiche Problem stossen.

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    08.05.2014
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mittige Ausrichtung

    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

  9. #9
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: mittige Ausrichtung

    Wenn du alles in eine CSS-Datei gepackt hättest wäre es noch sauberer, denn Inlinestyles sollte man möglichst vermeiden.

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    08.05.2014
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mittige Ausrichtung

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

Ähnliche Themen

  1. Ausrichtung von Videos
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 17.05.2009, 19:05
  2. Ausrichtung
    Von radeon55 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 23.03.2008, 20:34
  3. mittige Position eines Textes
    Von im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 11.03.2007, 17:32
  4. mittige Tabelle (vertikal und horizontal)
    Von murx im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 22.08.2006, 13:41
  5. ausrichtung des bildes
    Von Carina im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 19.10.2004, 20:33

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •