10

enter image description here

Like the example above. I've found some helpful script with the a small img which I do like however I don't know how to get the padding about the title so the line doesn't go straight through.

h3.line {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(../images/line.jpg);
    background-origin: padding-box;
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto auto;
    display: block;
    margin-bottom: 20px;
}

Which shows this. enter image description here

Any suggestion or ideas?

4 Answers 4

6

You can have a 1px dot image which you can place as a background on the H3. Then have a span element in between which have a background on.

CSS:

h3 {
    background: url(images/dot.png) left center repeat-x;
    padding: 10px;
    text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }

HTML:

<h3><span>About</span></h3>
2
  • I've been testing it out and I will be placing multiple ones on different background colours. Am I just going to add a new class and call upon it for each colour or is there an easier way?
    – kia4567
    Commented Feb 1, 2012 at 22:02
  • Instead of multiple classes you can just do an inline style if you want a quicker way. :-) Commented Feb 2, 2012 at 7:06
1

You can put a <span> for example in your <h3> and make it have the same background as your <h3> but without the line so the <span> effectively overlaps the <h3>.

You can say this to your span:

span {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

to make it center. You can add width and height to it too. line-height helps place your text to the middle vertically.

If you want to spare images than you can use text-decoration: line-through; to draw a line through your text.

1
  • This also works. I love have many different ways there are to so something. Thanks!
    – kia4567
    Commented Feb 1, 2012 at 20:38
1

Here is a solution using the CSS border property instead of an image.

the html:

<h2>
  <span>This is a test</span>
  <div></div>
</h2>

And here is the CSS:

h2 {
    text-align:center;
    background-color:#EFEFEF;
    line-height:26px;
    position:relative;
}

span {
    background-color:#EFEFEF;
    padding-right:5px;
    padding-left:5px;
    position:relative;
    z-index:2;
}
h2 > div {
    border-bottom:1px solid grey;
    position:relative;
    z-index:1;
    top:-13px; /* half the line-height of the containing element */
}

A fiddle Demonstration

The <div> is placed inside the heading element, and positioned half-way up by settings its top position to one-half the height of the heading element, which is the headings line-height. z-index is used on the span and div so that the span gets a higher stack order than the div and obscures the (border) line where there is overlap.

3
  • Hey, I like the idea behind not having to use an image however I have many titles throughout my layout that would require this and wouldn't it just up the amount of <div>'s I don't need?
    – kia4567
    Commented Feb 5, 2012 at 3:49
  • sure would, though i'm not sure it would cause any problems - is there something particular your worried about?
    – chris
    Commented Feb 5, 2012 at 15:11
  • Nothing in particular, just seen in forums and read about divitis or something like that and I guess I try to avoid divs when I don't need them.
    – kia4567
    Commented Feb 5, 2012 at 21:51
1

I just stumbled upon another way of achieving this.

h1
{
    position: relative;
    padding: 0 26%;
}

h1:before,
h1:after
{
    width: 25%;
    background-color: rgba( 0, 0, 0, .5 );
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
}

Taken from: http://osvaldas.info/blog/background-independent-css-bars

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.