webstudiointeractive
asked on
Left and Right Hand Background
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...?
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...?
Create a Fixed width DIv and place it at the center.
ASKER
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.
@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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
liquid-bg.zip
ASKER
Almost there. How can we get the "content" container to be fixed width?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The method is logical and works well. All makes sense after a good night's sleep! Thank you.
#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)