I am volunteering to design a website for an NGO here in Accra. They gave me a pdf to go off of, and a few of their ideas have been difficult for me to reproduce with HTML and CSS.
One that I don’t know how to approach at all is the line they want to go through the major headers of the page. I’ve attached a jpeg of the design they want. Hopefully you can see what I mean. It’s visible in the jpeg with the Recent Updates and Join the Conversation headers.
There are various ways to do that. Probably the easiest is to make an image for each header that includes the text and line all in one, and use an image replacement technique. However, that assumes that the blue line ends where it appears to in the image, rather than extending off to the left as far as the screen goes. Can you confirm what needs to happen with that blue line extending to the left?
Probably the way I’d tackle that is, firstly, break the page up into a series of sections (one for each heading), each with a 100% width div with a content div centered inside that. The centered div on the inside is for the content, which is centered on the screen.
Then create an image to sit as a background on the 100% wide divs. Firstly, let’s assume the centered content area is 900px wide. Create a file in Photoshop that’s, say, 3000px wide and about 20px tall. Mark off the center of the file, and then measure 450px to the left of that and mark off another guide line. Now, from that left point (which is 450px from the center of the file) draw a blue line off to the left, going out to the left edge of the file.
Save this as a transparent gif.
If you place that background image centered on the 100% wide container, the blue line will appear to start at the left edge of the content area and continue off to the left.
Then create images for each header and use the image replacement method I linked to above. The header image should include the little blue bit of line to the right.
If you just need ie8+ support then you can do something like this quite easily.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.outer {
width:960px;
margin:auto;
border:1px solid #000;
padding:25px;
}
.line {
margin:0 0 1em;
height:2em;
line-height:2em;
color:#f00;
font-size:1.5em;
position:relative;
}
.line:before {
content:" ";
height:5px;
width:999em;
right:100%;
background:blue;
position:absolute;
top:1em;
}
.line span:after {
content:" ";
height:5px;
width:25px;
display:inline-block;
background:blue;
vertical-align :middle;
position:relative;
left:5px;
}
</style>
</head>
<body>
<div class="outer">
<h1 class="line"><span>Heading Goes here</span></h1>
<p>Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. </p>
<h2 class="line"><span>Heading Goes here</span></h2>
<p>Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. </p>
</div>
</body>
</html>
Given the target audience is in Ghana, I think I need to make the site compatible with older versions of IE than 8. I really like the way you threw that together though Paul. What I’m going to do is try Ralph’s idea. If that doesn’t work I’ll use the :before and :after. If someone is using a browser older than 8 will the blue line just not show up? Or will it distort the page?
It just won’t show up … which is perfectly fine, really, since it’s not important content, but just decoration. It’s a better (and much quicker!) method for something that’s just decorative. Just make sure the client isn’t on an old browser, or you’re in trouble!
I have a question though. Why did you chose to make the header text a span? I got it working pretty well using the span and not using the span. I’m just curious. Thank you!
Just to clarify, the header text isn’t a span. It’s a heading element whose text is also wrapped in a span. Paul isn’t here to give his reasons, but I suspect that it’s to help some browsers that would otherwise create difficulties. But as you say, in good browsers it seems to work without the span.
I added the span as an easy way to put space between the line and the text but isn’t really needed if the space isn’t required (and indeed you can make some space without using the span but not as accurately).
For IE8 and under you can duplicate the effect with a small expression like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.outer {
width:960px;
margin:auto;
border:1px solid #000;
padding:25px;
}
.line {
margin:0 0 1em;
padding:0 0 0 10px;
height:2em;
line-height:2em;
color:#f00;
font-size:1.5em;
position:relative;
}
.line:before,.before {
content:" ";
height:5px;
width:999em;
right:100%;
background:blue;
position:absolute;
top:1em;
overflow:hidden;
}
.line:after,.after {
content:" ";
height:5px;
width:25px;
display:inline-block;
background:blue;
vertical-align :middle;
position:relative;
left:10px;
overflow:hidden;
}
* html .before{top:.5em}
* html .after{top:5px}
.line{
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML('beforeEnd','<span class="before"></span><span class="after"></span>')
);
}
</style>
</head>
<body>
<div class="outer">
<h1 class="line">Heading Goes here</h1>
<p>Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. </p>
<h2 class="line">Heading Goes here</h2>
<p>Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. Lorem ipsum text goes here. </p>
</div>
</body>
</html>
)
)