Manfred Meier: Line links und rechts

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

  1. 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?
  2. 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/

    1. 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

      1. 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.