Horizontal bars that stretch to fit

**waylman** · Apr 11, 2013 10:22

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!

**dresden_phoenix** · Apr 11, 2013 13:39

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

**waylman** · Apr 11, 2013 14:25

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!

**ralph.m** · Apr 11, 2013 17:11

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

**waylman** · Apr 12, 2013 08:26

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;
}

**ralph.m** · Apr 12, 2013 14:25

There's no property called background-imGAe.

User Tag List

Thread: Horizontal bars that stretch to fit

Thread Tools

Display

Horizontal bars that stretch to fit

Bookmarks

Bookmarks

Posting Permissions