Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7213

    Hi,

    I would like to style my h5-headlines with background stripes. Example screenshot:

    http://i43.tinypic.com/24lqyk5.jpg

    I have tried it with this CSS:

    h5 {

    background: url("../images/shared/stripes.gif") repeat-x scroll center 20px transparent;

    float: left;

    text-align: center;

    width: 100%;

    font-size: 12px !important;

    letter-spacing: 2px !important;

    font-weight: normal !important;

    margin-top: 10px;

    text-transform: uppercase;

    color: #777777;

    margin-bottom: 6px;

    }

    But with this, the stripes goes behind the headline text, like this:

    http://i44.tinypic.com/iedspc.jpg

    How can I do it, so that the text is like in the example above left blank from the stripes behind it?

    Thanks for any help!

    #57159

    you can do this kind of thing by slapping your h5 contents in a span and styling the span

    #57160

    Hey,

    yes – you need to wrap your text into a span and apply a white background color to it.I see no other chance to do this.

    #57161

    ok, thanks a lot, I’m not really so familiar with CSS ;-)

    I’ve tried this with the help of SELFHTML (http://de.selfhtml.org/css/formate/zentrale.htm)

    If somebody likes to style his headlines in such way, too, here is the code:

    The CSS:

    h5 {

    background: url("../images/shared/stripes.gif") repeat-x scroll center 18px transparent;

    float: left;

    text-align: center;

    width: 100%;

    font-size: 12px !important;

    letter-spacing: 2px !important;

    font-weight: normal !important;

    margin-top: 10px;

    text-transform: uppercase;

    color: #777777;

    margin-bottom: 6px;

    }

    .h5background {

    background-color: #FFffff;

    padding: 0 10px;

    }

    And the code:

    <h5><span class="h5background">My latest Projects</span></h5>

    Works now fine and looks like this:

    http://i43.tinypic.com/24lqyk5.jpg

    Thanks for your help!

    #57162

    Glad that it works now :)

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘CSS-Help needed: styling headlines with background stripes’ is closed to new replies.