Frage horizontale Linie - Besser ausdrücken kann ich das nicht

[BjoernJ]

Hallo zusammen,

vllt. kann mir einer helfen und sagen wir die Befehle aussehen für die "halbe Klammer"

Sprich nur den strich in der horizontalen und vertikalen...

ein Einzelne <hr> für eine Underline kenne ich aber wie kommt der rest zustande

Für etwaige Hilfe wäre ich euch dankbar.

Lg Bjoern

 

[SpiceLab]

Kein <hr>, kein Unterstrich, sondern CSS-Rahmen ;)

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Rahmen

Heruntergebrochenes Beispiel:

<h1>Zahlungsbedingungen</h1>
<div>Vorkasse - Lastschrift - Bar - Kreditkarte</div>

h1 {
  margin-bottom:0;
  display:inline-block;
  text-transform:uppercase;
  border-bottom:solid 1px #000
}
div {
  padding:20px;
  border-left:solid 1px #000
}

Moderation: Von HTML nach CSS verschoben.

 

[MrMurphy]

Hallo

Erst mal zwei Vorbemerkungen:

1. Waagerechte Linien trennen Informationen voneinander. Das gilt auch für Unterstreichungen. Design-Profis verzichten deshalb so weit möglich auf waagerechte Linien.

2. Ein hr-Element hat in HTML5 eine semantische Bedeutung. Das Vorgehen "Ich will eine waagerechte Linie erzeugen, die meisten Browser zeigen das hr-Element als Linie an, deshalb benutze ich das hr-Element" ist sachlich falsch. Die semantische Bedeutung ist, verschiedene Inhalte zu trennen. Da die Überschrift "Zahlungsbedingen" zu dem darunter liegenen Informationen gehört darf sachlich kein hr-Elment dazwischen geschoben werden.

Für deinen Wunsch sehe ich drei Lösungsmöglichkeiten:

1. Du erzeugst die Linien mittels der CSS-border-Anweisung und passt die Abstände so an, das sie optisch deinen Vorstellungen entsprechen.

2. Du erzeugst die Linien als Hintergrundbild mittels linear-gradient.

3. Du verwendest eine SVG-Grafik als Hintergrundbild.

Es gibt natürlich noch mehr Löungsmöglichkeiten.

Welcher davon an sinnvollsten ist hängt von deinen Kenntnissen und der gesamten Webseite (HTML / CSS) ab.

Nachtrag:

Für meine Vorschläge habe ich mal eine Beispielseite erstellt:

http://boratb.bplaced.net/index27.html

Gruss

MrMurphy