mittige Ausrichtung

Berti_88

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!

explanator

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.

MrMurphy

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

Berti_88

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

explanator

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

Berti_88

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

MfG

explanator

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

Berti_88

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

explanator

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

Berti_88

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

MrMurphy

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

explanator

Zitat von Berti_88

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.

HTML

<!DOCTYPE HTML>
<html lang="de">
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  boy {
    margin: 0;
  }
  h2{
    float: left;
    width: calc(50% - 0.3em);
    margin-right:0.3em;
    text-align:right;
  }
  h2+h2{
    text-align: left;
  }
  p {
    clear: left;
  }

  </style>
  </head>
  <body>
        <h2>wie gehts?</h2><h2>| wo kommt ihr alle her?</h2>
        <p>Text 1</p>
        <h2> Wie wird das Wetter morgen?</h2><h2>| Sonne</h2>
        <p>Text 2</p>
  </body>
</html>

Alles anzeigen

MrMurphy

Hallo,

ich habe mal eine Lösung erstellt wie sie mir bei den kargen Informationen vorschwebt:

http://foreninfo.bplaced.net/seiten_fremdpr…rennstrich.html

Gruss

MrMurphy

Berti_88

explanator
merci für den code. Werde ich bei Gelegenheit mal versuchen nachzuvollziehen, bzw zu integrieren.

MrMurphy
Genau so meinte ich das! Hast du einen anderen Programmierstil verwendet?

MfG

MrMurphy

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

Tags