?
Solved

Left and Right Hand Background

Posted on 2009-03-30
8
Medium Priority
?
372 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 12

Accepted Solution

by:
alien109 earned 2000 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 2000 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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

770 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