Solved

Left and Right Hand Background

Posted on 2009-03-30
8
356 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

932 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now