Manfred Meier: Line links und rechts

SELF-Forum

Line links und rechts

Manfred Meier
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche gerade das zu realisieren:

-------------- Meine Überschrift --------------

also links und rechts eine durchgehende Linie und dazwischen meine Überschrift.
Kann man das einfach mit CSS machen oder brauch ich dazu ein Image.

Vielleicht kennt jemand ein Beispiel oder einen Link, wie man Überschriften in dieser Art designen kann.

Vielen Dank!!
lg
Manfred

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Line links und rechts

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Vielleicht kennt jemand ein Beispiel oder einen Link, wie man Überschriften in dieser Art designen kann.

    http://css-tricks.com/line-on-sides-headers/

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Line links und rechts

    1UnitedPower Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Kann man das einfach mit CSS machen oder brauch ich dazu ein Image.

    Vielleicht kennt jemand ein Beispiel oder einen Link, wie man Überschriften in dieser Art designen kann.

    Folgender Ansatz ist noch nicht so elegant, aber sollte die Idee vermitteln können: http://jsfiddle.net/KcLEe/

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Line links und rechts

      Tabellenkalk
      – Informationen zu den Bewertungsregeln

      Hallo,

      Folgender Ansatz ist noch nicht so elegant, aber sollte die Idee vermitteln können: http://jsfiddle.net/KcLEe/

      was haltet ihr von meiner Weiterentwicklung?

        
h1::before {  
    margin-right: 1ex;  
}  
h1::after {  
    margin-left: 1ex;  
}  
h1::after, h1::before{  
        display: inline-block;  
    height: 0.3em;  
    width: 3em;  
    border-top: 1px solid black;  
    border-bottom: 1px solid black;  
    content: '';  
    margin-bottom: 4px;  
}

      Gruß
      Kalk

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Line links und rechts

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Tabellenkalk!

        was haltet ihr von meiner Weiterentwicklung?

        die bisherigen Vorschläge benötigen eine feste Angabe für die Breite der Linien. Wenn man das nicht möchte, lässt sich auf diese Lösung zurückgreifen:

        <!doctype html>  
<html>  
<head>  
  <meta charset=2UTF-8">  
  <title>flexible Linien</title>  
  <style>[code lang=css]  
	h1	{  
		text-align: center;  
	}  
  
	h1::before{  
		display: block;  
		height: 0.3em;  
		border-top: 1px solid black;  
		border-bottom: 1px solid black;  
		content: '';  
		margin-bottom: -.75em;  
	}  
  
	h1 span {  
		padding: 0 .5em;  
		background: white;  
	}

        </style>
        </head>
        <body>
          <h1><span>Hallo</span></h1>
        </body>
        </html>
        [/code]

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lauda und Laudatio.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln