Solved

Left and Right Hand Background

Posted on 2009-03-30
8
361 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Title # Comments Views Activity
Add image to into animation on website template 1 33
Mobile page Scrolling down when refreshing 4 63
Are these icons a web font? 3 21
really easy css change help please 4 17
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

839 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