SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal bars that stretch to fit

    Hi all - I'm terrible with code so need a little help.
    I'm designing a site in Photoshop and need to have some bars in the background that stretch to fit any sized screen.

    For example:

    http://www.websense.com/content/Home.aspx
    http://www.freaklife.com/redirect/?theme=studionine

    Can someone point me in the right direction as to how I can achieve this effect?

    Thanks!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Welcome to Sitepoint, waylman.

    by default, any block element : div, p, ul, ol, blockquote , etc. will stretch to fill the width of its parent element(always use the proper semantic element to wrap each part of your content).

    What that means is any BLOCK child of a body element will do this.

    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">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    				.center{margin:0 auto; width:960px;
    						border-top: 5px solid pink;
    						border-bottom: 5px solid pink;
    				}
    				.wrap{
    						background:  #51f;
    						border-top: 2px solid orange;
    						border-bottom: 15px solid orange
    				}
    		</style>
    	</head>
    	<body>
    <div class="wrap">
    	<p class="center"><em>Am a centered paragraph of content </em>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

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, very helpful!
    I came across this little tool as well which does it in css
    http://jsfiddle.net/dhf3B/

    The problem I'm having is I dont know how to place content in the content wrapper. My content is just a bunch of sliced up images at this point.
    Can someone help me out with that?

    Much appreciated!

  4. #4
    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
    6 Thread(s)
    Here is a fairly simple description of how to build a page like that:

    http://pageaffairs.com/code/layout-full-width-bands

    The demo page is here: http://pageaffairs.com/code-archive/...d-columns.html

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks much....I'm playing around with a very simple method of doing this but it's not working. I have bars.css, bars.html, and bars.png all in the same folder.
    Can someone tell me what I'm missing here!?

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <link href="bars.css" rel="stylesheet" type="text/css" />

    <title>Untitled Document</title>

    </head>

    <body>

    </body>
    </html>




    CSS
    body {
    backgroung-color: #fff;
    background-imgae: url('bars.png');
    background-repeat: repeat-x;
    }

  6. #6
    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
    6 Thread(s)
    There's no property called background-imGAe.


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
  •