Stretching out a horizontal divider

Hi,

I know there is a tutorial for this, but I don’t know what to call it to actually track it down.

I have an image that I want to stretch across the width of the page 100%. It will be used as a divider between subject matter. Can you direct me to a tutorial or info on how to do this.

Here is a link to the image so you can see what I currently have:

[B]http://www.sitesbysarah.com/images/brown-divider-small.png[/B]

Instead of creating an image 1000 px wide, I want to make it so the brown stripe extends 100% of the page. I want the leaf and raindrop to stay put.

Any help is appreciated.

Thanks,
Sarb

We kind of need to know the context for this—that is, what the rest of the page looks like and how it’s structured. Anyhow, you’ll need to separate the leaf/raindrop part from the brown background part it you want the brown part to span the page.

Hi,

Here’s an example using you image.

A narrow slice was taken of the brown section and repeated along the x-axis of the parent. The actual leaf image is then placed on top of the brown line using the pseudo class :before (ie8+ only) to save any extra mark up. I also added a right end to the line to make the shadow finish smoother using the :after pseudo class.

If you need to support IE7 and under then you will need to add 2 inner elements for the two extra images instead (or use an expression).

More semantically you could apply the image to the hr element as that is the correct element to use for dividing a page but we then lose IE8 in the process.

www.pmob.co.uk/temp/leaf-divider2.htm

Just for completeness here’s an example that will support IE6+ using an expression.

http://www.pmob.co.uk/temp/leaf-divider3.htm

If you want to use the image against coloured backgrounds then you will need to use transparent pngs for each of the sections.

That’s a good point about using the hr for the bar. I guess I hadn’t thought of that.

You asked about the page it will be placed on. The website that the page will eventually be added to is here:

It will have a white background. The page I am creating will have a logo at the top with some intro content.

Then the divider’s will be placed down the page separating text pertaining to 8 different topics on rainwater collection and links to pdf articles.

Paul, so do you just set up the hr ruler to have a background image (the bar with leaf), or is that just for the brown line. And if it’s just for the brown line, how do I get the leaf image into the hr rule?

Did I mention that I want white text (the subtitle) to appear over the brown bar on each divider?

Thanks,
Sarb

sarb

I explained all the details in my first post so just read through them again and then compare the the examples I put online (view source) as all the code is in the head :slight_smile:

However to recap:

The brown line is repeated as a background image on the parent.

The leaf image is added with the pseudo class :before:


.hr:before, .before {
	content:" ";
	height:61px;
	width:61px;
	display:block;
	position:absolute;
	left:0;
	top:0;
	background:url(images/brown-divider-small.png) no-repeat 0 0;
}

I capped the end of the line using the :after pseudo class:


.hr:after, .after {
	content:" ";
	height:61px;
	width:8px;
	display:block;
	position:absolute;
	right:0;
	top:0;
	background:url(images/brown-divider-right.png) no-repeat 0 0;
}

Did I mention that I want white text (the subtitle) to appear over the brown bar on each divider?

You know you didn’t :slight_smile:

Here’s another example with a text overlay.

http://www.pmob.co.uk/temp/leaf-divider4.htm

View source for the full details.

Wow, thank you. That was a lot of work and I really appreciate it. I use css, but I have never worked with the “before” and “after” code. This is a new animal for me.

I don’t know what browser people will be viewing this in, so I assume I need it to be viewable in IE 7 and 8. Will this work for both? You mentioned earlier that the “hr” rule might not apply for those using IE7…

I am waiting to get access to the page so I won’t be able to work on this for a day or two (plus just got called in for Jury Duty :-). But I will jump back on if I run into any problems.

Again,
Thank you.

Best thing you can do is sign up for Google Analytics. They will assign you a snippet of JavaScript code to include on all pages of the site; after a week or so, you’ll sign back in to GA and be amazed by the wealth of knowledge that has been collected for your site (including a breakdown of browsers used).

About semantics:

Also consider that HR has a meaning too ( loosely akin to SECTION in HTML5, VERY loosely) ,. so if this doesnt actually have a semantic meaning you could use:

IE9+ : Multiple BGs on container or last element.

OR IE8+: Apply the after in Paul’s first suggestion to the container element instead ; the container element holding the repeating brown bar image.

You really must adapt your CSS to your HTML. Think "what hooks does my markup natively provide?

here is a quickie:

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
				h3, p{margin:0;}
				 .article, hr {margin:2em  10% 0 10%} 
				.article + .article, hr{ background:  url(http://www.pmob.co.uk/temp/images/brown-divider-slice.png) repeat-x 0 0; }
				.article + .article h3  { background:  url(http://www.pmob.co.uk/temp/images/brown-divider-small.png) no-repeat 0 0; padding-top:91px; }
				
				/** bonus!!!**/
				hr {border: none; height:61px; text-align: center}
				hr:before, hr .before {content: url(http://www.pmob.co.uk/temp/images/brown-divider-small.png);}
				/**for IE**/
				hr {
zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	
				}
				
				
		</style>
	</head>
	<body>
 			<div class="article">
				<h3>This is just an article</h2> 
				<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p class="fleur">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
 			<div class="article">
				<h3>This is just an article</h2> 
				<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p class="fleur">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<hr><!-- denotes a  new section-->
			 			<div class="article">
				<h3>This is just an article</h2> 
				<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p class="fleur">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>

 	</body>
</html>

hope that helps

If you need to support older browsers then the last version I posted will work everywhere and indeed if you need text over the line as in that example it will be the simplest method.

There are many ways of doing the same thing as Dresden mentioned above so it does depend on the situation as to what’s best. As a simple divider I would be inclined to use the last version I posted and maybe for accessibility add an hr into the mix.

e.g.


<div class="hr"><hr></div


.hr hr{display:none}

In that way the page displays sections divided properly with css switched off. The hr is not used for styling at all and hidden from view with css. One of the good tests for a structural and semantic page is to turn css off and see if you can still read the page logically.