Question

What I want to do is very simple, but I don’t really know how to do it. What I want is to use a div class to style a title like this:

—-Page Title————————————————-

But obviously I’d want the dashed lines to be solid lines. Is this possible? Thanks a lot.

Judging by other posts, I’d just style an hr tag, but no examples I’ve tried work.

Answer 1

You could do something like this:
http://jsfiddle.net/zAytA/

Simple HTML

<h1 class="h-line"><b>Page Title</b></h1>​

CSS

.h-line{
    border-top:1px solid #ccc;
    height:1px;
    margin:8px 0 7px 0;
    position:relative;
}
.h-line b{
    position:absolute;
    display:block;
    bottom:-8px;
    left:32px;
    font-size:16px;
    padding:0 6px;
    background:#FFF;

}​

The idea is that for your header, you simply use the border of the container element (in this example H1 and I just choose to use the top border) and then add another bit of markup to contain the actual text, which you can absolutely position relative to the container.

I used the b tag as it’s as semantically unimportant as span but less characters.

I have the container a 1px height to make sure it shows up but it might not be necessary.

One important aspect is to make sure the container has some margin that will match the size of the text in the title or any content below/above the title could end up over-lapping the title.

Then, you finish this off with making the background of the b element to match the background color, which will make the border appear to disappear behind the text.

Note: I believe this is how fieldset and legend tags work but is semantically better if you’re using it for page titles and not form field groupings.

This concept will not work well if you have a non-solid color background. This will cause the text “highlight” background color to become obvious and breaking that ‘magical’ effect.