HTML - Centering Entire Site

Ok, I've written my entire site in tables and that works lovely. I now want to put a border around everything on my page.

So I tried:

<table width="820" cellspacing="0" cellpadding="10" border="1" bordercolor="#c51e21">
<tr>
<td>
<div align="center">
MY ENTIRE WEBPAGE
</div>
</td>
</tr>
</table>

However, the border color doesn't change and just fades here and there when I change the hex. I also want to change the border type from a 3dish window frame to a solid line.

Can anyone help me please.

Ok I am having some issues with my webpage. I first should say I am relatively new to page designs but I think I know the basics of HTML. However when I posted what I thought was my code in another post, I was told umm that it wasn't my code. I am using share point designer. So before I post what I think my code is, can someone tell me ahh, how I get the code to post lol.

Anyway my issue is on my 22" monitor the page looks fine and I can see everything. When I look at the same page on my lap top, well that is a different story. #1, I am not able to see the bottom half of my picture or what is in the bottom half of my left frame.

The reason I do not post the page is because it is not finished and I dont want anyone to see it yet lol.....

Looking for help, thank you

Hi.

What is the best way to make something, lets say a table or a div for example, span the entire height of the page?

I don't have any example code i'm just asking for future reference. Please ask if you need more detial or don't understand what i'm talking about.

Thanks in advance for any replies.

Hi there, well, the title basically says it all.

I have a site that consists of like, 8 .php pages... and I need to play this ambient sound at the background. ( I know, but well.. orders from above)

So I was wondering if there is a way to manage this, without having to hear the song all over again when you click on a link.

Thanks

I am wondering if it is possible to create an INDEX.HTML to redirect to another website?

I would like it to display the redirected site, but if possible keep to the original address..

e.g.
A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar.

Hope I explained ok, any responce would be much appricated!
Thanks!

so what is the easiest and best way to center a div within a div? or a div within anything else for that matter.

How do you center vertically?

and

How do you venter horizontally?

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated.
/* CSS Document */


#wrapper {margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 0;;}


body {
margin : 0px 0px 0px 0px;
background-color: #E1AE5A;
background-repeat: repeat;
}
#top {
position: absolute;
height: 48px;
width: 900px;
left: 250px;
top:3px;
border:0px none;
z-index:1;
color: #000033;
}

#main {
position: absolute;
top: 542px;
left: 328px;
z-index:5;
width: 745px;
color: #FFFFFF;
height: 28px;
}

#flash {
position: absolute;
top: 130px;
left: 299px;
z-index:4;
width: 803px;
color: #FFFFFF;
height: 419px;
}

.style1 {

font-family: Eurostile;
color: #FFFFFF;
}

.style2 {
font-family: Helvetica;
}
#Layer1 {
position:absolute;
left:300px;
top:121px;
width:804px;
height:540px;
z-index:3;
background-color: #000033;
border: medium solid #FFFFFF;
}

.style3 {
font-family: Eurostile;
}

#Layer2 {
position:absolute;
left:111px;
top:170px;
width:71px;
height:124px;
z-index:4;
}

.style4 {color: #000000}

#Layer3 {
position:absolute;
left:482px;
top:72px;
width:37px;
height:56px;
z-index:2;
}
#Layer4 {
position:absolute;
left:652px;
top:72px;
width:24px;
height:31px;
z-index:2;
}
#Layer5 {
position:absolute;
left:822px;
top:72px;
width:84px;
height:58px;
z-index:2;
}
#Layer6 {
position:absolute;
left:992px;
top:72px;
width:95px;
height:50px;
z-index:2;
}

#Layer7 {
position:absolute;
left:331px;
top:139px;
width:750px;
height:446px;
z-index:9;
}

#Layer11 {
position:absolute;
left:319px;
top:72px;
width:12px;
height:10px;
z-index: 2;
}

#Layer8 {
position:absolute;
left:302px;
top:98px;
width:791px;
height:48px;
z-index:10;
}
#Layer9 {
position:absolute;
left:299px;
top:40px;
width:32px;
height:20px;
z-index:0;
}
#Layer10 {
position:absolute;
left:1016px;
top:595px;
width:24px;
height:26px;
z-index:10;
}


and the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" land="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="top">
<h1 align="center" class="style3 style4">on The side, Inc. </h1>
<p align="center" class="style3">&nbsp;</p>
</div>

<div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div>
<div id="Layer1"></div>
<div id="flash" align="center">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400">
<param name="movie" value="main.swf">
<param name="quality" value="high">
<embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed>
</object>
</div>
<div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div>

<div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div>
</body>
</html>

Hi. I can't remember how to center a table to the center of the page. Here is my current code:
HTML Code:

<table style="width: 66%" >
			<tr>
				<td class="style4">
				<a href="http://au.youtube.com/user/bombardieraddict123" style="color:white" class="style5">
				Bombardieraddict123</a></td>
			</tr>
			<tr>
				<td style="background-color:white">More Information Will go here</td>
			</tr>
		</table>

I want it to be centered in the middlof thepage. How can I do that?
thanks

Hi all

I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude )

If any of you have a moment could you have a look at the code below.

What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious.

Below is the code ...

TEMPLATE
HTML Code:

body {
background-color: #000000;
}
-->
</style>
<link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
}
-->
</style></head>

<body>
<div id="outer">
<div align="center" id="Header"></div>
<div id="links">
<p><a href="Home.html" class="style1">Home<br />
<br />
</a><br />
</p>
</div>
<div align="center" id="Main">
<p align="center">&quot;It does not do to leave a live dragon out of your calculations, if you live near him.&quot;<br />
<em>(JRR Tolkien - The Lord of the Rings)</em></p>
<br />
<p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br />
Welcome to Dragons Touch</p>
</div>
<div id="News">Content for id "News" Goes Here</div>

</div>
<h1 align="center">&nbsp;</h1>
</body>
</html>

CSS
PHP Code:
body {
font-family: "Times New Roman", Times, serif;
background-color: #000000;
background-repeat: no-repeat;
color: #FFFFFF;
font-size: medium;
width: 100%;
position: relative;
left: auto;
right: auto;
bottom: auto;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;

}

#Header {
position: absolute;
height: 150px;
width: 800px;
left: 121px;
top: 0px;
background-image: url(../Images/NewBanner.jpg);
color: #F0F0F0;
background-color: #000000;
background-repeat: no-repeat;
margin: 0px;

}
Links {
top: 150px;
position: relative;
height: 350px;
width: 150px;
bottom: auto;
}
#links {
top: 151px;
height: 350px;
width: 126px;
clip: rect(auto,auto,auto,auto);
position: absolute;
font-family: "Times New Roman", Times, serif;
padding-top: 50px;
font-size: large;
font-weight: normal;
font-style: normal;
text-transform: none;
padding-left: 40px;
text-align: left;
list-style-position: inside;
left: 41px;
margin: 0px;
}
#Main {
font-family: "Times New Roman", Times, serif;
position: absolute;
height: auto;
width: 620px;
left: 208px;
top: 151px;
right: 800px;
margin: 0px;
}
#News {
position: absolute;
left: 829px;
top: 151px;
width: 162px;
height: 406px;
margin: 0px; 

Take a look at this image.
What I want to do is make the background black (which I know how to do), but to add in the black header plus the gray box--same width. What I'm trying to do is my forum is fixed width (in the center, not expanded on browser) and I want to do the same to a new non-forum site starting from scratch.

Hi,

Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to.

In some versions of IE its sits to the far left.

Here is the page:

http://www.ironworksstudio.co.uk/

And here is the CSS:

Code:

*{	
	margin: 0;
	padding: 0;
}
		
body{
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 15px;
	color: #000000;
	background-color:#000000;
}
		
#container {
				margin-right: auto;
				margin-left: auto;
				margin-top: 15px;
				width: 700px;
				background-color:#000000;
				}
				
p{
	padding-top: 10px;
	font-size: 13px;
	line-height: 18px;
}
		
	#header {
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 0;
			height: 100px;
			width:700px;
			background-color:#000000;
			padding: 0 0 10px 0;
			
			}
			
		#menu ul{
		margin-left:0;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		background-color:#FFFFFF;
		
	}
	
	#menu li{
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		background-color: #000000;
		list-style-type: none;
		width: 84px;
		height: 20px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom; 3px;
		margin-right: 2px;
		margin-left: 2px;
		float: left;
		border: 1px solid;
		}
		
	#menu li:hover {
			color: #ffffff;
			background-color: #333333;
			}
			
	
			
	#menu li a {
			text-decoration: none;
			color: #ffffff;
		}
	
	#menu li a:hover {
			color: #ffffff;
			}
	
	
	
	#footer {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	background-color:#000;
	color: #FFF;			
		}
	
	
		
	#top_image {
				margin-bottom:20px;
				clear: left;
				background-color:#000000;
				}
		
	#menu {
			
			float: left;
			width: 700px;
			margin-bottom:10px;
			background-color:#000000;
			
		}
		
	#two_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;	
				line-height:1.4;
				margin-top: 10px;
				margin-bottom: 50px;
				float: left;
				width: 700px;
				text-align: left;
				background-color:#000;
				
				}
			
		
	#l_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;	
				color:#FFF;
				line-height:1.4;
				margin-top: 10px;
				margin-right: 30px;
				margin-bottom: 50px;
				float: left;
				width: 335px;
				text-align: left;
				background-color:#000;
				
				
			}
			
	#l_column a{color:999999;}		

					
			
	#r_column {
				font-size:12px;
				font-family: Helvetica, Arial, sans-serif;
				color:#fff;
				line-height:1.4;
				margin-top: 23px;
				float: right;
				width: 335px;
				background-color:#000;
				padding: 0 0 10px 0;
				
			}
			
	
	
	.left {
			font-size:12px;
			font-family: Helvetica, Arial, sans-serif;
			width: 335px;
			float: left;
			text-align: left;
			border: 2px solid #000000;
			border-collapse: collapse;
			background-color:#000000;
			}
			
	.right {
			font-size:12px;
			font-family: Helvetica, Arial, sans-serif;
			width: 335px;
			float: right;
			text-align: left;
			border: 2px solid #000000;
			border-collapse: collapse;
			margin-top:12px;
			background-color:#000000;
			}
			
			
	th { 
		font-weight: bold;
		font-size:13px;
		color: #000000;
		background-color:#FFFFFF;
		padding: 5px;
		}
		
	td {
		padding:5px;
		}
		
	tr {
		color:#FFFFFF;
		}
		
	.rowstyle1 {
				border-bottom:1px dotted;
				}
	


			

		
	#gallery {
		background-color:#000;
		width: 680px;
		padding-left: 0;
	}
	#gallery ul { list-style: none;
					margin-left: 0;
					
					}
					
	#gallery li { 
				 padding-left:1.2px;
				 }
				 

	
	#gallery ul li { display: inline;
					padding-right: 0;
					}
	#gallery ul img {
		border: 0;
		border-width: 0;
	}
	#gallery ul a:hover img {
		border: 0 solid;
		
	}
	
	#gallery ul a:hover { color: #cccccc; }
	
	hr {color:#333333;
		border-style:normal;
		padding: 0 0 0 0;
		margin: 0 0 10 0;
		}
	
	h2 {color:#ffffff;}
	
	</style>

Hi,

I'm having the same problem too.

I want the red box to fill the whole page (ie 100% width & height) and the blue box to to be centered (horizontally & vertically)

http://www.randam.org/TEST-NEW.html

Here's my coding:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST NEW</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="867" align="center" valign="middle" bgcolor="#FF0000"><table width="1020" height="602" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td bgcolor="#0000FF">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Please help me out. I've been banging my head against the wall all morning.

thanks,
Rich

http://insomnia.eternal-glory.org/2.0/index.php
I'm trying to imitate a Mac computer, Tiger.
Looks great in FF/Safari, but in IE7, the dock refuses to center.

I have:
Code:

body {
text-align:center;}

in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not?
Help, please?

Doctype is Strict, and I have margin-left/-right set to auto.

Thanks in advance,
Michele

I tried every code I could find, but warning, I'm still new to HTML. This is my table code for now. I need the first row image to be centered. When i view it in a browser it is aligned to the left

<table style="width: 635px; height: 900px" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="width: 600px; height: 600px;" colspan="6"><img alt="" src="breakfast1.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb1.JPG" /></td>
<td><img alt="" src="bthumb2.JPG" /></td>
<td><img alt="" src="bthumb3.JPG" /></td>
<td><img alt="" src="bthumb4.JPG" /></td>
<td><img alt="" src="bthumb5.JPG" /></td>
<td><img alt="" src="bthumb6.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb7.JPG" /></td>
<td><img alt="" src="bthumb8.JPG" /></td>
<td><img alt="" src="bthumb9.JPG" /></td>
<td><img alt="" src="bthumb10.JPG" /></td>
<td><img alt="" src="bthumb11.JPG" /></td>
<td><img alt="" src="bthumb12.JPG" /></td>
</tr>
<tr style="height: 100px">
<td><img alt="" src="bthumb13.JPG" /></td>
</tr>
</tbody>
</table>