Creating a heading with an expanding line to the left

**jamidodger** · 11-08-2009, 03:09 PM

I'm trying to create a styled heading based on the specifications provided to me. Here is a link showing what I mean: http://i6.photobucket.com/albums/y22...untitled-3.jpg

I am having difficulty finding a way to use css to create the grey lines to the left of the titles. If the lines were a fixed width there would be no problem but they need to adjust to the width available between the heading and the left margin.

Any hints or tips would be great

**Nile** · 11-08-2009, 03:22 PM

I might be able to fix this issue and make the layout look better... But if you don't like my suggestion then I don't know how to help... Sorry:
You put the line under the text instead of next to.

**jamidodger** · 11-08-2009, 03:40 PM

Originally Posted by Nile

I might be able to fix this issue and make the layout look better... But if you don't like my suggestion then I don't know how to help... Sorry:
You put the line under the text instead of next to.

So that the line would be the entire width? Or do you know how to make it expandable in width, even if it is underneath.

I'm not too fussy and would probably choose a different way other than that shown in the link I posted, however, the site isn't for me

so I'm trying to work to my friends specs for how they want it to look.

Thanks for the reply

**jscheuer1** · 11-08-2009, 03:49 PM

How about:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.hhr {
 float: left;
 width: 88%;
 padding-top: 0.5ex;;
}
.htxt {
 float: left;
 width: 8%;
 font-size: 120%;
 font-family: sans-serif;
 letter-spacing: 0.5ex;
 overflow: visible;
}
.htxt span{
 padding-left: 1em;
}
</style>
</head>
<body>
<div class="hhr"><hr></div><div class="htxt"><span>MISEI</span></div>

</body>
</html>

**jamidodger** · 11-08-2009, 04:02 PM

Thanks John, I was afraid I was going to have to do something like that. Thought there might be some other CSS I wasn't aware of. To be honest though I think your method should work fine because I don't think the titles are going to be too long.

**jamidodger** · 11-08-2009, 04:06 PM

as a further note I did initially try to do this by placing a full width hr element behind the heading and setting the heading background to white, I thought the white background would cover the hr, but apparently not... I used the z-index property as well to make sure they were the correct way around but they just seem to combine. I noticed this combination by changing the overlay colour so that it was visible against the content background.

**jscheuer1** · 11-08-2009, 04:11 PM

Well, there is some latitude, the percentages could be reduced and/or apportioned slightly differently to accommodate longer titles. But even as it is, it works out OK for page widths of 800px and larger. Once you put it in a container which also resizes to width (as I imagine you are going to) some tweaking will probably be required. The overflow visible on the text div prevents wrapping though, should the available width be too short.

**jscheuer1** · 11-08-2009, 04:13 PM

We cross posted, my previous post was addenda to my first post. Now I'll address z-index. It should work, but both elements need to be position relative or absolute. Relative would probably be good for this. Or a relative container with two absolute positioned elements inside.

**jamidodger** · 11-08-2009, 04:25 PM

I'm sure it will be more than adequate for this site, I will be managing it as well so I can always fiddle with the percentages when there is some content up.

it works fine here now inside it's container: http://www.photochroma.co.uk/hanaki/uninsomnia/news.php

I've edited the files now so don't have the original css with the z-index method, however, I'm pretty sure they were both set to the same positioning, which was relative. The line lined up perfectly with the text it was just that the colour of the top most element did not cover up the element behind it.

**jscheuer1** · 11-08-2009, 04:46 PM

Well, I actually believe that the float method is better, from testing here it is more cross browser. But here is a method using positioning:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.hhr {
 position: relative;
 font-size: 120%;
 height: 1em;
}
.hhr hr {
 width: 99%;
 position: absolute;
 left: 0;
 top: 0.25ex;
}
.htxt {
 width: auto;
 font-family: sans-serif;
 letter-spacing: 0.5ex;
 background-color: white;
 position: absolute;
 right: 0;
 top: 0;
 padding: 0 1em;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.hhr hr {
 top: 50%;
}
</style>
<![endif]-->
</head>
<body>
<div class="hhr"><hr><div class="htxt">MISEI</div></div>

</body>
</html>

No z-index required, as the stacking order is determined by the document flow. Note though that IE required a tweak. I didn't test in IE 8, though assume it shouldn't need this tweak, at least not in IE 8 Standards mode.