Solved

Left and Right Hand Background

Posted on 2009-03-30
8
362 Views
Last Modified: 2013-11-19
I would like to change the background on the following page:

http://howdra.sevenstone.ae/

...to have the left-hand part of the background floated to the left of screen, and the right-hand part floating to right of screen. The fixed width content in the middle is *to remain*.

At present the background is fixed width and in the centre of the screen.

Here is a rough mockup of the desired, scalable, outcome:

http://images.echohealth.me/hmc_demo.jpg

How can this be done in XHTML/CSS without tables...?
0
Comment
Question by:webstudiointeractive
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 12

Expert Comment

by:alien109
ID: 24026275
<style>
#header-wrapper {
      background:url(hc.gif) no-repeat center;
      height:147px;
}

#header_l {
      background:url(hl.gif) no-repeat;
      height:100%;
      width:268px;
      float:left;
}

#header_r {
      background:url(hr.gif) no-repeat;
      height:100%;
      width:268px;
      float:right;
}
</style>
</head>
<body>

<div id="header-wrapper">
      <div id="header_l"></div>
      <div id="header_r"></div>
</div>

you'll need to create three images hl (for the left), hr (for the right) and hc (for the center)
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24026300
Create a Fixed width DIv and place it at the center.
0
 

Author Comment

by:webstudiointeractive
ID: 24026479
Thanks for both replies so far,

@alien109: looks like it could work for the header, but not for the main content area as that uses a text container div.

@gwerty: the left background and right background will be a variable distance from each other depending on window size / screen resolution, so fixed width bg is not an option.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Accepted Solution

by:
alien109 earned 500 total points
ID: 24029738
Sorry. Missed that you wanted the body as well. Here's another solution. You'll need to adjust the margins and widths based on the gfx that you've got.

Essentially you'll need the following assets:

left header image
center header image (logo?)
right header image
left content image
right content image

you could use a background image in the content container as well, if you so desire.

tested in IE7 and FF, but nothing else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-us" />
 
	<title>BG test</title>
 
	<style type="text/css">
 
	body {
		/* background:url(bl.png) repeat-y; */
		margin:0;
		padding:0;
	}
 
	#wrapper {
		text-align:center;
	}
 
	#header-wrapper {
		padding:0;
		margin:0;
		background:url(bc.png) no-repeat center;
		height:128px;
	}
 
	#header_l {
		background:url(hl.png) no-repeat left;
		height:100%;
		width:130px;
		float:left;
	}
 
	#header_r {
		background:url(hr.png) no-repeat right;
		height:100%;
		width:130px;
		float:right;
	}
 
	#content-wrapper1 {
		background:url(bl.png) repeat-y left;
	}
 
	#content-wrapper2 {
		background:url(br.png) repeat-y right;
	}
 
	#content {
		text-align:left;
		margin-left:130px;
		margin-right:130px;
	}
 
	</style>
 
</head>
<body>
 
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header_l"></div>
		<div id="header_r"></div>
	</div>
	<div id="content-wrapper1">
		<div id="content-wrapper2">
			<div id="content">
				<br />
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel lorem sed lectus facilisis vulputate. Quisque justo libero, iaculis quis, dignissim vel, fermentum eget, nibh. Proin quis tellus id nunc fringilla condimentum. Phasellus dictum imperdiet lectus. Pellentesque rhoncus.</p>
			</div>
		</div>
	</div>
</div>
 
</body>
</html>

Open in new window

0
 
LVL 12

Expert Comment

by:alien109
ID: 24029819
Here's the same thing with the nav bar as indicated in your screenshot. See the attached source. FYI - you'll need to rename index.txt to index.html in the zip file after decompressing. It won't let me attach a zip file that contains and html file!
liquid-bg.zip
0
 

Author Comment

by:webstudiointeractive
ID: 24029854
Almost there. How can we get the "content" container to be fixed width?
0
 
LVL 12

Assisted Solution

by:alien109
alien109 earned 500 total points
ID: 24030769
easy enough.

change the content style declaration to this (substitute in desired with, of course)

      #content {
            text-align:left;
            margin:0 auto;
            width:800px;
      }
0
 

Author Closing Comment

by:webstudiointeractive
ID: 31564695
The method is logical and works well. All makes sense after a good night's sleep! Thank you.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question