asked on

web page background

Attached is what I am trying to accomlish but not sure how to do it. My area 1 is 1000x800. My area 2 is the background. How do set that up so the background can match the top and bottom of area 1? Thanks
temp.jpg

Scott Fell

I'm not a fan of these types of layouts. But it would be something like this http://jsbin.com/eFutuhi/1/edit?html,css,output

html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <div class="container">
    <div class="col side colleft">left</div>
    <div class="col middle">Middle</div>
    <div class="col side colright">Right</div>
  <div>
</body>
</html>

Open in new window

css

.container{width:1000px;}
.col{height:800px;float:left;border: thin solid #000;}
.side{width:220px;}
.middle{width:500px;}
.colleft{margin-right:20px;}
.colright{margin-left:20px;}

Open in new window

Your better off using a grid system.

http://getbootstrap.com/css/#grid
http://foundation.zurb.com/
http://960.gs/

or just a grid
http://www.blueprintcss.org/

I like the first 2 best. They are responsive meaning you can create your site to look different in one size screen vs another such as ipad or phone. With 40% visitors and growing using mobile, I think you are looking for trouble using fixed with and especially fixed hight. Fixed hight and matching columns has always been a problem when you think of it statically.

COBOLdinosaur

The kind of layout your are doing trying to line up a background with content is just a piece of glass waiting for a stone. Any time you try and do that sort of thing you will find there are all kind of ways to break it including user settings.

With a simple no content layout like you have in the image you can tack it up on the wall and it will hold but in a real page with content (especially if some things are variable) what have will not work very well. If you post a link to a real page then maybe we can give you the variations on padas' code that will work cross-resolution, cross-device, and cross-browser.

Cd&

leblanc

ASKER

I am so behind in the web design and css. So what is the correct approach to make it work? Thanks

leblanc

ASKER

So this website, http://www.satmetrix.com/net-promoter/nps-score-model/, is built based on grid?

Scott Fell

It does not look like it.

leblanc

ASKER

so how is it done?

COBOLdinosaur

That site was built using Wordpress and Wordpress themes.

The problem we have here is that there is nothing to focus on. All you have posted is an image and a vague descriptions of some fixed dimensions. We don't realy have any requirements to work from; or code to look at, or a page to diagnoses.

So all we can do is speculate about what you actually want or need for your site.

So, do you have anything other than just an image? Can you give us an idea of what the site and its target audience is? do you know what browses and devices you must support? The more detail we have about your requirements, the more we can help.

Cd&

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leblanc

ASKER

The desktop picture that you did is what I have in mind, But what I am trying to figure out is how do I code that. I can set the area 1 with a big table. But not sure how to code the area 2. My area 1 is fixed with the width as 1000 pixels. But how do I estimate for area 2 as the monitor varies? Thx