Solved

Left and Right Hand Background

Posted on 2009-03-30
8
355 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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.

760 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

19 Experts available now in Live!

Get 1:1 Help Now