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
LVL 1
leblancAccountingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
COBOLdinosaurCommented:
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&
0
leblancAccountingAuthor Commented:
I am so behind in the web design and css. So what is the correct approach to make it work? Thanks
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

leblancAccountingAuthor Commented:
So this website, http://www.satmetrix.com/net-promoter/nps-score-model/,  is built based on grid?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It does not look like it.
0
leblancAccountingAuthor Commented:
so how is it done?
0
COBOLdinosaurCommented:
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&
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>so how is it done?
 
Like Cd& said, concentrate on what you want, not what others do. My 7th grade mechanical drawing teacher used to say don't copy from your neighbor because they are probably wrong.  I have gone with that for nearly 40 years and it seems to have been good advice.  

You can make the same or similar visual experience many multiple ways where only a few may be "best" whatever that is.  

Don't get hung up on if it is a grid system or not.  I like to start at the end and work backwards.  The one thing I would change in your sample is the footer. If you can live with the header and footer being the same color instead of trying to match up column's in the body, your coding will be much easier in the long run.  

With a slight change to your layout, you can do this for desktop.
DesktopThen using the responsive grid with bootsrap, as the screen gets smaller the phone version could look like this.
Phone
And all you needed to do is code perhaps like this
<div class="container">
    <div class="col-lg-2 col-xs-12">left</div>
    <div class="col-lg-8 col-xs-12">Middle</div>
    <div class="col-lg-2 col-xs-12">Right</div>
  <div>

Open in new window

If you decide to use bootsrap, that code will make more sense.  In short you are using 2 classes and making the the large screen have 2 small columns and one middle that is larger. When you go to the small screen, they will all stack up.  You can do this on your own without bootsrap or foundation, but you will need to learn about using @media queries. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

I hope this starts to make more sense.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leblancAccountingAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.