Der Martin: <h1> gestallten

Beitrag lesen

Hallo,

kann ich eine <h1>Test</h1> so gestallten wie auf dem Bild? Bis jetzt hatte ich dafür Grafiken verwedet. Mir wäre lieber wenn dieses mit CSS gehen würde.

http://fs1.directupload.net/images/150117/f9qb4nxi.jpg

Mir kommt es hier auf den Strich links und rechts vom Wort an.

war mir beim Anschauen schon klar. ;-)
Ob es ohne zusätzliches Markup geht, ist zunächst mal zweifelhaft. Die Linie an sich könnte eine in x-Richtung gekachtelte Hintergrundgrafik sein, aber das möchtest du ja nicht. Eventuell kann man mit einer Kombination von height, overflow, margin-bottom und border-bottom was reißen, etwa so:

<h1><span>Explore</span></h1>

h1  
 { height: 0.5em;  
   overflow: visible;  
   border-bottom: 1px solid #888;  
   margin-bottom: 0.5em;  
   text-align: center;  
 }  
h1 span  
 { background-color: #FFF;  
   text-transform: uppercase;  
   padding: 0 0.5em;  
 }

Der entscheidende Punkt ist, dass hier das h1-Element nur halb so hoch ist wie sein inline-Inhalt, und somit die Unterkante (border-bottom) etwa auf halber Höhe des Texts zu liegen kommt. Damit der Abstand zu nachfolgenden Elementen wieder passt, gleiche ich das mit margin-bottom:0.5em aus.
Der Textinhalt selbst, also das span-Element, muss nun einen deckenden (nicht-transparenten) Hintergrund haben, damit der die Rahmenlinie des h1-Elements überdeckt. Dazu ein bisschen padding seitlich, damit's etwas gefälliger aussieht.

Mit den Maßen musst du vermutlich ein bisschen spielen, bis es so richtig passt.

Viel Spaß beim Weiterstricken,
 Martin

PS: "gestalten" hat nichts mit "Stall" zu tun!

--
I do take my work seriously, and the way to do that is not to take yourself too seriously.
  (Alan Rickman, britischer Schauspieler)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
0 152

Bild über die ganze Breite

Carmen
  • meinung
  1. 0
    Mattes
    1. 0
      Carmen
      1. 0
        Mattes
      2. 0
        Gunnar Bittersmann
        1. 0

          Grafik-Software: Wo und was lernen?

          Robert R.
          • multimedia (audio & video)
  2. 0
    Robert R.
    1. 0
      Carmen
  3. 0
    1UnitedPower
    1. 0
      Auge
      1. 0
        Gunnar Bittersmann
        1. 0
          Gunnar Bittersmann
          1. 0
            Auge
            1. 0
              Gunnar Bittersmann
              1. 0
                Auge
    2. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Matthias Apsel
  4. 0

    Online Beispiel + Navigations Frage

    Carmen
    1. 0
      Camping_RIDER
      1. 0
        Matthias Apsel
        1. 0
          Camping_RIDER
      2. 0
        Carmen
  5. 0

    <h1> gestallten

    Carmen
    • css
    1. 0
      Mattes
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          • multimedia (audio & video)
        2. 0
          Mattes
          1. 0
            Gunnar Bittersmann
            1. 0
              Mattes
              1. 0
                Gunnar Bittersmann
                1. 0
                  Mattes
      2. 0
        Gunnar Bittersmann
    2. 0
      Der Martin
      1. 0
        Matthias Apsel
        1. 1
          Matthias Apsel
          1. 0
            Carmen
            1. 0
              Matthias Apsel
              1. 0
                Carmen
                1. 0
                  Matthias Apsel
                  1. 0
                    Carmen
    3. 0
      ChrisB
  6. 0

    Warnung beim validator

    Carmen
    • html
    1. 0
      Der Martin
  7. 0

    PX und EM

    Carmen
    1. 0
      Camping_RIDER
      1. 0
        Carmen
        1. 0
          Camping_RIDER
        2. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
              1. 0

                Sass und Co.

                Camping_RIDER
                1. 0
                  Gunnar Bittersmann
    2. 0
      Der Martin
      1. 0
        Carmen
  8. 0

    Bild & Text bei hover ändern

    Carmen
    • css
    1. 0
      Carmen
      1. 0
        Carmen
        1. 0
          Carmen
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
      2. 0
        Tabellenkalk
        1. 0
          Carmen
          1. 0
            Matthias Apsel
            1. 0
              Carmen
              1. 0
                Matthias Apsel
                1. 0
                  Carmen
                  1. 0

                    Update - figure & figcaption

                    Carmen
                    1. 0
                      Matthias Apsel
                      1. 0
                        Carmen
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Camping_RIDER
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Carmen
                              2. 0
                                Camping_RIDER
                          2. 0
                            Carmen
                            1. 0

                              Der Name der Friseuse (Friseurin?)

                              Camping_RIDER
                              • meinung
                  2. 0
                    Matthias Apsel
                    1. 0
                      Carmen
                  3. 0
                    Gunnar Bittersmann
                    1. 0
                      Carmen
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Carmen
                          1. 0
                            Camping_RIDER
                            1. 0
                              Carmen
                              1. 0
                                Matthias Apsel
                                1. 0
                                  Carmen
                                  1. 0
                                    Der Martin
    2. 0
      Matthias Apsel
  9. 0

    Darstellung Adresse, Öffnungszeiten und Kontaktmöglichkeiten

    Carmen
    1. 0
      Auge
      1. 0
        Carmen
        1. 0
          Carmen
          1. 0
            Matthias Apsel
            1. 0
              Gunnar Bittersmann
            2. 0
              Carmen
  10. 0

    Design Frage - Anordnung der Bilder

    Carmen
    • design/layout
    1. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Matthias Apsel
        2. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Auge
              1. 0
                Carmen
          2. 0
            Carmen
            1. 0
              Gunnar Bittersmann
              1. 0
                Matthias Apsel
  11. 0

    Kontaktformular

    Carmen
    • css
    1. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Carmen
          1. 0
            Carmen
            1. 0
              Matthias Apsel
              1. 0
                Carmen
                1. 0
                  Auge
            2. 0
              Gunnar Bittersmann
          2. 0
            Gunnar Bittersmann
            • design/layout
            1. 0
              Gunnar Bittersmann
            2. 0
              Carmen
              1. 0
                Gunnar Bittersmann
  12. 0

    Bilderslider - CSS oder JavaScript?

    Carmen
    1. 0
      Auge
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
              1. 0
                Carmen
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Carmen
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Carmen
                      2. 0

                        Es funktioniert einfach nicht!

                        Carmen
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Carmen
                            1. 0
                              Matthias Apsel
                              1. 0
                                Carmen
                                1. 0
                                  Matthias Apsel
                                  1. 0
                                    Auge
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Auge
                                    2. 0
                                      Matthias Apsel
                                      1. 0
                                        Auge
        2. 0

          jQuery != JavaScript

          Camping_RIDER
  13. 0

    JavaScript - Slider hat zu viel Abstand nach rechts!

    Carmen
    • css
    1. 0

      JavaScript - Slider Version 2 (aktuelle Version)

      Carmen
  14. 0

    Warum funktioniert :nth-child(3n) nicht?

    Carmen
    • css
    1. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          1. 1
            Gunnar Bittersmann
            1. 0
              Carmen
              1. 0
                Gunnar Bittersmann