?
Solved

Split background color CSS

Posted on 2009-04-14
1
Medium Priority
?
1,251 Views
Last Modified: 2012-05-06
What I am trying to do is create a page that has 2 color background.
50% #000000
50% #d7e3ea
Then trying to place a centered table over the two backgrounds that is always aligned to the bottom of the page and centered.

I am having dificulty getting it to work. FF is working somewhat IE is not centering the image. Both are not placing the table at the bollom of the page.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
html, body { height: 100%; min-height:100%;height:auto!important; }
body { margin: 0; padding: 0; background: #d7e3ea; /*right bg */}
#background { /*left bg */ position: absolute; width: 50%; height: 100%; background: #000000;}
#content { position: relative; z-index: 1; height: 100%; /* puts content on top of background in stack order */}
#mainTable { margin-left: auto; margin-right:auto; width: 1077px; left:-9px; position: relative; vertical-align:bottom; }
</style>
</head>
<body>
<div id="background"></div>
   	<div id="content">
        <div id="mainTable">
       
        <table id="Table_01" width="1077" height="787" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td><img src="images/*****_01.jpg" width="367" height="129" alt=""></td>
                <td colspan="2"><img src="images/*****_02.jpg" width="349" height="129" alt=""></td>
                <td><img src="images/*****_03.jpg" width="361" height="129" alt=""></td>
            </tr>
            <tr>
                <td colspan="2"><img src="images/*****_04.jpg" width="546" height="197" alt=""></td>
                <td><img src="images/*****_05.jpg" width="170" height="197" alt=""></td>
                <td><img src="images/*****_06.jpg" width="361" height="197" alt=""></td>
            </tr>
            <tr>
                <td><img src="images/*****_07.jpg" width="367" height="133" alt=""></td>
                <td><img src="images/*****_08.jpg" width="179" height="133" alt=""></td>
                <td><img src="images/*****_09.jpg" width="170" height="133" alt=""></td>
                <td><img src="images/*****_10.jpg" width="361" height="133" alt=""></td>
            </tr>
            <tr>
                <td colspan="2"><img src="images/*****_11.jpg" width="546" height="328" alt=""></td>
                <td colspan="2"><img src="images/*****_12.jpg" width="531" height="328" alt=""></td>
            </tr>
        </table>
     
        </div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:NeoGohd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 13

Accepted Solution

by:
numberkruncher earned 2000 total points
ID: 24144294
What about something like the following?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			.background1 {
				position: absolute;
				top: 0px; right: 50%; bottom: 0px; left: 0px;
				background-color: #000000;
				z-index: -1000;
			}
			.background2 {
				position: absolute;
				top: 0px; right: 0px; bottom: 0px; left: 50%;
				background-color: #d7e3ea;
				z-index: -500;
			}
			.table-content {
				margin-right: auto;
				margin-left: auto;
			}
		</style>
	</head>
	<body>
		<div class="outer-content">
			<div class="background1"></div>
			<div class="background2"></div>
			<table class="table-content">
	            <tr>
	                <td><img src="images/*****_01.jpg" width="367" height="129" alt=""></td>
	                <td colspan="2"><img src="images/*****_02.jpg" width="349" height="129" alt=""></td>
	                <td><img src="images/*****_03.jpg" width="361" height="129" alt=""></td>
	            </tr>
	            <tr>
	                <td colspan="2"><img src="images/*****_04.jpg" width="546" height="197" alt=""></td>
	                <td><img src="images/*****_05.jpg" width="170" height="197" alt=""></td>
	                <td><img src="images/*****_06.jpg" width="361" height="197" alt=""></td>
	            </tr>
	            <tr>
	                <td><img src="images/*****_07.jpg" width="367" height="133" alt=""></td>
	                <td><img src="images/*****_08.jpg" width="179" height="133" alt=""></td>
	                <td><img src="images/*****_09.jpg" width="170" height="133" alt=""></td>
	                <td><img src="images/*****_10.jpg" width="361" height="133" alt=""></td>
	            </tr>
	            <tr>
	                <td colspan="2"><img src="images/*****_11.jpg" width="546" height="328" alt=""></td>
	                <td colspan="2"><img src="images/*****_12.jpg" width="531" height="328" alt=""></td>
	            </tr>
			</table>
		</div>
	</body>
</html>

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

771 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