Unterschrift mehrfach unterstreichen

[shef]

Überschrift mehrfach unterstreichen

Hallo,

ich möchte eine Überschrift mehrfach unterstreichen. Allerdings sollen die Linien verschiedene Farben und Positionierungen haben.
Das ganze soll ungefähr so aussehen wie auf dem Bild.

Bei Methoden mit Bildern und horizontalen Linien sind mir die Abstände zu groß und ich bekomm sie nicht kleiner. Außerdem möchte ich was die Seitenabstände und Farben geht flexibler bleiben.

Mfg Shef

 

[Efchen]

Um Rahmen zu setzen, gibt es die border-Eigenschaft. Doppelte Linien gibts da auch (double), aber nicht so verschoben, wie in Deinem Bild. Sowas müsstest Du per Bild, am besten als Hintergrundgrafik mit no-repeat und an den bottom positioniert machen.

Sowas in der Art:

<h1 style="background:url(unterstrich.jpg) no-repeat center bottom;text-align:center;">Überschrift</h1>

 

[Luk.Online]

also ich würde einmal

text-decoration:underline;

nehmen und dann einfach eine Grafik als 2. Linie nehmen und absolute positionieren. den genauen ort kannst ja dann einstellen.
oder eventuell das ganze in einen <div> und den padding-wert vom div au x setzen, sodass die grafik immer ihre feste position hat.....

oder gehts anders?

( vlt findest du hier was: SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung )


----EDIT:

OK efchen war schneller... :)

 

[shef]

Danke euch 2 schonmal für die schnell Hilfe. Diese ganze CSS formatierung ist echt eine komplett andere Denkweiße, naja ich schaff das schon irgendwie.

Ich habe soweit gefunden was ich gesucht habe.

<h1>Überschrift</h1>

<hr class="1" noshade>

<hr class="2" noshade>

Sowohl h1 als auch hr.1 und hr.2 habe ich im Stylesheet formatiert:

h1 {
 font-family: 911 Porscha Italic;
 font-size: xx-large;
 text-align: center;
 color: #000080;
 margin-bottom:3pt;
   }

hr.1 {
      color:#808080;
      height:3px;
      margin-left:3%;
      margin-right:10%;
      margin-bottom:3pt;
      }

hr.2 { 
      color:#000080;
      height:3px;
      margin-left:8%;
      margin-right:5%;
      margin-bottom:3pt;
      }

Nur meine Abstände zwischen den Linien, und zwischen der Überschrift und der Linie wird nicht kleiner, egal in welcher Einheit ich das angeb.

 

[Efchen]

Diese ganze CSS formatierung ist echt eine komplett andere Denkweiße

Aber die einzig vernünftige.
Weil dann nicht die Fehler in HTML auftreten, die Du begangen hast.

Ich habe soweit gefunden was ich gesucht habe.

Du machst mit Deinen beiden <hr> aber den Fehler, dass Du in Deinem HTML-Code eine logische Trennung, nein sogar zwei logische Trennungen einbaust, obwohl Dein Ziel eigentlich eine Sache der Optik ist, und somit in den Bereich CSS gehört.
HTML ist nur für die logische Auszeichnung des Inhalts da.

 

[shef]

Aber alleine schon vom Datentransfer und von der Felixbilität sollte meine Lösung doch eleganter sein als ein Bild einzufügen?

Habe noch eine andere Idee. Man könnte ja eine box erstellen und füllen und dann ohne Inhalt auf der Seite einblenden..

 

[Luk.Online]

jo, das könntest auch mal probieren.
gibst den divs halt (fast) die gleichen koordinaten

 

[Efchen]

Aber alleine schon vom Datentransfer und von der Felixbilität sollte meine Lösung doch eleganter sein als ein Bild einzufügen?

Das ist ja nicht relevant. Zwei Trennlinien, die eine logische Trennung des Inhalts erzeugen, sind nicht das, was Du damit sagen willst. Daher ist das semantisch gesehen falsch. Wie das optisch wirkt oder ob der Traffic um 3 Bytes höher wird, ist für HTML irrelevant.

Habe noch eine andere Idee. Man könnte ja eine box erstellen und füllen und dann ohne Inhalt auf der Seite einblenden..

Das würde zumindest semantisch nichts kaputt machen oder aussagen, was so nicht gewollt ist.