CODEWITHSUNDEEP
htmlcss
losippo
losippo

Reputation: 21

Styling heading with a line

In a way this is simple but I have been trying to figure out this for hours now so I decided to write the problem down and maybe with your help I could find a solution.

On layout heading (h1, h2, h3) have a line next to them. Basically somehting like this:

Example Heading--------------------------------------------

Another Example Heading---------------------------------

One more------------------------------------------------------

So that is end result (----- is gfx as background-image). How would you do it? The background color could change and/or have opacity.

One thing what I was thinking would be this:

<h1><span>Example Heading</span></h1>

when the CSS would look lke this:

h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}

But since the background color can be something else than white (#fff) that doesn't work.

Hopefully you did understand my problem :D

Upvotes: 2

Views: 146

Answers (3)

J. Holmes
J. Holmes

Reputation: 18546

Hacky but, maybe something like this:

HTML:

<h1>
    <span>Test</span>
    <hr>
    <div class="end"></div>
</h1>

And the css:

h1 span{ float :left; margin-right: 1ex; }
h1 hr {
    border: none;
    height: 1px;
    background-color: red;
    position: relative;
    top:0.5em;
}
h1 div.end { clear:both; }

Fiddle here

Upvotes: 2

marissajmc
marissajmc

Reputation: 2613

I don't think you can achieve this with pure css because the heading text could be any length. Here is a dynamic javascript solution which sets the width of the line image based on the width of the heading text.

Click here for jsfiddle demo

html (can be h1, h2 or h3)

<div class="heading-wrapper">
    <h1>Example Heading</h1>
    <img src="line.png" width="193" height="6" alt="" />
</div>

css

h1{font-size:16px}
h2{font-size:14px}
h3{font-size:12px}
h1,h2,h3{margin:0;padding:0;float:left}
.heading-wrapper{width:300px;overflow-x:hidden}
.heading-wrapper img{
    float:right;padding-top:9px;
    /*ie9: position:relative;top:-9px */
}

jquery

setHeadingLineWidth('h1');
setHeadingLineWidth('h2');
setHeadingLineWidth('h3');

function setHeadingLineWidth(selector){
    var hWidth;
    var lineWidth;
    var wrWidth = $('.heading-wrapper').width();

    hWidth = $(selector,'.heading-wrapper').width();
    lineWidth = wrWidth - hWidth;
    $(selector).siblings('img').width(lineWidth);
}
  • heading width = width of the heading text inside the wrapper
  • line image width = wrapper width - heading text width

Hope that helps :)

Upvotes: 0

Martin
Martin

Reputation: 1226

This worked for me.

HTML

<div class="title">
    <div class="title1">TITLE</div>
</div>

CSS

.title {
    height: 1px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-bottom: 1px solid #bfbfbf;
}
.title .title1 {
    width: 125px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 22px;
    color: #4c4c4c;
    background: #fff;
    text-align: center;
    position: relative;
    top: -12px
}

Upvotes: 1

Related Questions