Solved

Split background color CSS

Posted on 2009-04-14
1
1,242 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
1 Comment
 
LVL 13

Accepted Solution

by:
numberkruncher earned 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

708 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

20 Experts available now in Live!

Get 1:1 Help Now