design issue in a template

I have a very Basic layout page in which my table starts with a width of 900 pixels and is centered, and the area inside the table tags is white and everything is nested inside that main table

i want that the outside of the borders of that table i should be able to show a background gradient image or a solid color so inside that table and nested table, everything should remain white and it should not pick the background color of the main page!

I am basically a Table Lover and uses less DIV tags, but i can prefer DIV's if they are used in few instances,

Here is the simple layout of the page!

CSS Body tag

body {
      padding: 0;
      margin: 0;
      font: 0.7em verdana, sans-serif;
      line-height: 1.5em;
      background: #fff;
      color: #454545;
      margin:10px;
}

HTML Page!

<html>
<head></head>
<body>
<table width="900" border="0" align="center" cellpadding="1" cellspacing="2" class="border">
All nested tables are inside this table and the backgound of this table is white and i want that the baackgound of this table and nested tables should remain white!
</table>
</body>
LVL 16
Gurpreet Singh RandhawaWeb DeveloperAsked:
Who is Participating?
 
Gurpreet Singh RandhawaConnect With a Mentor Web DeveloperAuthor Commented:
Solved it by using!

div > table {

}

it worked
0
 
Jason C. LevineNo oneCommented:
Nothing in the code above should change the white background.  What is the issue you are having?
0
 
Chris StanyonCommented:
If I understand this right, you want a white table to sit on a gradient background.

Set all the background colours for your table to white, and then set the background or body to use your image.

Something like this should do it.
//CSS
body {
      padding: 0;
      margin: 0;
      font: 0.7em verdana, sans-serif;
      line-height: 1.5em;
      background: url("path/to/your/background_image.jpg") center top no-repeat
      color: #454545;
      margin:10px;
}

table, tr, td { background-color: #ffffff; }

Open in new window

0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
@ ChrisStanyon

Your IDEA worked but inside the tables, i was using a rounded box inside the tables and setting their BG values also, and they are also changing to white, this is not good way i think
0
 
Chris StanyonCommented:
Not sure what you mean. In your question you say you want the background of the table to be white and everything outside of the table to be a gradient background.

Maybe I need to look at more of your code to see exactly what you are doing.

Can you post a link to your site online for me to have a look at.


0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
well site is not online but i can show the code in paste bin

here is the link!

http://pastebin.com/pNRFZTQ3

the above link will expire in 1 day
0
 
Chris StanyonCommented:
Sorry. I'm still struggling to see exactly what you need. The pasted code you've provided shows lots of classes which don't appear anywhere in your document, and don't look like they'd 'round' anything.

On looking at your code though, I would strongly suggest converting this to a DIV based layout. Using tables for design is out-dated, problematic and limited at best.

A div based layout for your pages looks like it would be very straight forward. Something like below should get you going
//CSS
#outer { width:900px; margin:0px auto; }
#column1 { width: 26%; }
#column2 { width: 58%; }
#column3 { width: 16%; }
.column { float: left; }
#footer { clear:both; }


//HTML
<div id="outer">

	<div id="header">
		<div id="hdr1"><include template="header.asp"></div>
		<div id="hdr2"><include template="header.html"></div>
	</div>

	<h1>Logo Banner</h1>

	<div id="content">
		<div class="column" id="column1">test</div>
		<div class="column" id="column2">test2</div>
		<div class="column" id="column3">test3</div>
	</div>

	<div id="footer">
		<div id="ftr1">Footer</div>
		<div id="ftr2">End</div>
	</div>

</div>

Open in new window

0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
ok well i am placing my layout online so it was take a bit of time to view give me a day/2
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
ok i have made a gradient but its placement is not correct

i am using like this

background: url(../images/gradient.jpg) center top repeat-x

but it is jus covering only the top portion and extenting to the last line, but if i use the repeat only, it overlaps, the one image over another, please guide
gradient.jpg
0
 
Chris StanyonCommented:
Take a look here for details on how to position and repeat a background

http://www.w3schools.com/css/css_background.asp
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
Solved by using DIV point ting to table inside it
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.