SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    http://www.sitesbysarah.com/images/b...ider-small.png

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://www.brazosmg.com/

    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sarb View Post
    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?
    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

    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:

    Code:
    .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:

    Code:
    .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

    Here's another example with a text overlay.

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

    View source for the full details.

  6. #6
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sarb View Post
    I don't know what browser people will be viewing this in...
    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).

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    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:
    Code:
    <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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sarb View Post
    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...
    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.

    Code:
    <div class="hr"><hr></div
    Code:
    .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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •