Log in

View Full Version : Resolved 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/y221/ryoshockwave/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
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 :rolleyes: 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:


<!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:


<!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.
jamidodger
11-08-2009, 04:57 PM
Thanks for that other method John. I like the look of it, but I'm willing to accept your informed opinion about cross-browser compatibility and will most probably use the float method. Going to try out the positioning method now.
jscheuer1
11-08-2009, 05:31 PM
Here's a more cross browser method of the positioned idea:


<!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.5em;
margin: 0.25ex 0;
padding: 0;
}
.hhr div{
font-family: sans-serif;
letter-spacing: 0.5ex;
background-color: white;
position: absolute;
right: 0;
top: 0;
padding: 0 1em;
}
</style>
</head>
<body>
<div class="hhr"><hr><div>MISEI</div></div>
</body>
</html>

There is a drawback though to all of these methods. The IE zoom utility will make the construct wider than the window. However, this is more a drawback of the IE zoom utility, though worth considering. Even in IE, if the size is controlled by changing the text size, rather than the zoom, it works out OK. But the way IE 7+ is designed, it encourages use of the zoom over text resizing. Zoom was not available on IE 6 and less. Other browsers do not have this problem, either because they don't do zoom, or because when they do, it is proportional, with the window remaining 100% of the layout area. In IE, the page remains 100% of the layout area. The page is still usable with IE zoom, but you do get horizontal scrolling.