PDA

View Full Version : Centering Page Help


xfile102
06-24-2012, 01:48 PM
I am having the most Horrible Time. I have a page that I cannot figure out how to center. It looks great on a standard monitor, But on a widescreen monitor it looks retarded as it is all the way off to the left hand side of the page. I have tried a hundred tricks and cannot get the page to center over the background. Someone PLEASE help me figure this out. I am going crazy. I will post whatever code is asked for. HTML, The CSS, you name it. I just need help.

xfile102
06-24-2012, 01:52 PM
HTML CODE:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Untitled</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv1 {
position: absolute;
width: 529px;
height: 455px;
z-index: 1;
left: 238px;
top: 404px;
}
#apDiv2 {
position: absolute;
width: 500px;
height: 253px;
z-index: 2;
left: 238px;
top: 150px;
}
#apDiv3 {
position: absolute;
width: 755px;
height: 130px;
z-index: 3;
top: 34px;
left: -2px;
}
#apDiv4 {
position: absolute;
width: 158px;
height: 56px;
z-index: 4;
left: 43px;
top: 124px;
}
#apDiv5 {
position: absolute;
width: 83px;
height: 93px;
z-index: 4;
left: 22px;
top: 499px;
}
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<div id=”container”>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:100%; height:840px;">
<tr>
<td style="width:766px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:766px; height:100%;">
<tr>
<td style="width:238px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:238px; height:100%; background-color:#010302;">
<tr><td style="height:36px; background-color:#252525;"></td></tr>
<tr>
<td style="height:136px;">
<img src="images/spacer.gif" width="1" height="41" alt="">
<div id="apDiv3"><img src="images/brose_logo_1.png" width="768" height="136"></div>
<br>
<img src="images/spacer.gif" width="28" height="1" alt=""><a href="#"><img src="images/logo.gif" alt="" border="0"></a></td>
</tr>
<tr>
<td style="background:#2F2F2F url(images/bg_1_right.gif) right repeat-y; height:291px;">
<table border="0" cellpadding="0" cellspacing="0" style="background:url(images/bg_1_bot.gif) bottom repeat-x;">
<tr>
<td style="background:url(images/bg_1_top.gif) top repeat-x">
<table border="0" cellpadding="0" cellspacing="0" style="background:url(images/bg_1_cbot.gif) bottom right no-repeat;">
<tr>
<td style="width:238px; height:291px; background:url(images/bg_1_ctop.gif) top right no-repeat;">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td style="height:10px;"></td></tr>
<tr>
<td style="background:#010302 url(images/bg_2_right.gif) right repeat-y;">
<table border="0" cellpadding="0" cellspacing="0" style="background:url(images/bg_2_bot.gif) bottom repeat-x; height:100%;">
<tr>
<td style="background:url(images/bg_2_top.gif) top repeat-x;">
<table height="48%" border="0" cellpadding="0" cellspacing="0" style="background:url(images/bg_2_cbot.gif) bottom right no-repeat; height:100%;">
<tr>
<td style="width:238px; height:271px; background:url(images/bg_2_ctop.gif) top right no-repeat;">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="height:24px;"></td></tr>
<tr>
<td style="width:18px;"></td>
<td style="width:195px;" class="text_2"><p>&nbsp;</p>
<div id="apDiv5"><img src="images/puppy_mini.jpg" width="78" height="89"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br>
<br style="line-height:12px;">
</p>
<div style="margin-left:6px;"> “We aim to breed the highest quality Bulldogs of fine pedigree in MO. Please look at our dogs above and see our commitment to excellence” </div>
<br style="line-height:9px;">
<div class="author">Shannon Goggin</div>
<br style="line-height:16px;">
<div style="margin-left:6px;"> “Some more stuff here, this could be Testimonials from buyers...” </div>
<br style="line-height:9px;">
<div class="author">Jane Buyer</div>
<br style="line-height:15px;">
<div style="margin-left:6px;" class="more_1">
<a href="#">read more testimonials</a>
</div>
</td>
<td style="width:25px;"></td>
</tr>
<tr><td style="height:26px;"></td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td style="height:96px; background:url(images/bg_left_bottom.gif);"></td></tr>
</table></td>
<td style="width:528px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:528px; height:100%;">
<tr>
<td style="height:36px; background-color:#252525;">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="height:10px;"></td></tr>
<tr>
<td style="width:514px;" class="navigation">
<a href="#">Home page</a>|&nbsp;<a href="#">Online Support</a>|&nbsp;<a href="#">FAQ</a>
</td>
<td style="width:14px;"></td>
</tr>
</table></td>
</tr>
<tr>
<td style="height:272px;"><div id="apDiv2"><img src="images/image.jpg" width="528" height="272"></div></td>
</tr>
<tr>
<td height="495" style="background-color:#010302;"><div id="apDiv1">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px 20px 0px 17px; width:490px;">
<tr>
<td style="height:12px;"></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="388" style="width:17px;"></td>
<td style="width:195px;" class="text_4"><img src="images/spacer.gif" width="1" height="16" alt=""><br>
<img src="images/t_2_2.gif" alt="" border="0"><br>
<br style="line-height:10px;">
<div style="margin-left:9px;"><img src="images/t_2_2.gif" alt="" border="0"><br>
<br style="line-height:10px;">
<div style="margin-left:9px;"> <a href="#"><strong>Another Heading Here</strong></a><br>
<br style="line-height:4px;">
Here is text for the above heading about whatever, James, You Blah</div>
</div>
<p><br style="line-height:9px;">
</p>
<div id="apDiv4"><img src="images/bulldog_puppies small.jpg" width="186" height="94"></div>
<p>&nbsp;</p>
<p><br>
<br style="line-height:9px;">
</p>
<div style="margin-left:9px;"> This is a place for a notice. lkj;liadsjf;aidsjf; aidsf a;sdlkfj a;sdifj a;sdfj a;sdfjas ;dfj as;dvja ssdivo adsvj adsf asdfkkasdfiasdjf;aslj ;alisdj f;oaij ;oiej fa;ioje; ;ajsd; iha; lkdh;aklsdklj;poaij oij ef;iaje fl;kaj;oiej ;a;iej e;if ;elfkj;pioe f;iajj ;ei ;ei </div>
<br style="line-height:11px;">
<div style="margin-left:9px;" class="more_1"> <a href="#">read more about us</a> </div>
<br style="line-height:13px;"></td>
<td style="width:16px;"></td>
<td style="width:2px; background-color:#202120;"><img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td style="width:26px;"></td>
<td style="width:230px;"><img src="images/spacer.gif" width="1" height="16" alt=""><br>
<img src="images/t_2_3.gif" alt="" border="0"><br>
<br style="line-height:10px;">
<div style="margin-left:9px;" class="text_4"><span class="text_4" style="margin-left:9px;">Featured Dogs</span></div>
<br style="line-height:13px;">
<img src="images/img_2_2.jpg" alt="" align="left" border="0" style="margin-right:16px;">
<div style="margin-left:9px;" class="text_5"> <img src="images/spacer.gif" width="1" height="2" alt=""><br>
<strong>Bentley</strong><br>
<br style="line-height:4px;">
<span class="text_5" style="margin-left:9px;">Bentley is from prime stock, dog info and a bunch of stuff about the dog here. Talk talk talk talk talk talk and stuff and things and more stuff about the dog and stuff and things, blah blah blah blah blah blah blah </span></div>
<br style="line-height:37px;">
<img src="images/super-adorable-english-bulldog-puppies-for-free--4fc09f98600d28801853.jpeg" alt="" align="left" border="0" style="margin-right:16px;">
<div style="margin-left:9px;" class="text_5">
<p><img src="images/spacer.gif" width="1" height="2" alt=""><br>
<strong>Hemi</strong><br>
</p>
<p><span class="text_5" style="margin-left:9px;">Cmon, seriously? How ****ing awesome is a dog named HEMI. Seriously, it doesnt get better. Fast, Powerful, and just sounds bad ass. You know you want a dog named Hemi. But you can't have him, he is a family fav. </span></p>
</div>
<br style="line-height:22px;"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="37" style="height:12px;"></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td style="height:129px; background:url(images/bg_bottom.gif) top repeat-x;">
<br style="line-height:22px;">
<div class="copy">Copyright 2012-2013 Rethink Associates Inc. <a href="#">Terms Of Use</a>&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;<a href="#">Privacy Policy</a></div></td>
</tr>
</table></td>
</tr>
</table></td>
<td style="width:100%;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
<tr><td style="height:36px; background-color:#252525;"></td></tr>
<tr><td style="height:272px; background-color:#010302;"></td></tr>
<tr><td style="height:43px; background:url(images/bg_menu.gif);"></td></tr>
<tr><td style="background-color:#010302;"></td></tr>
<tr><td style="height:129px; background:url(images/bg_bottom.gif);"></td></tr>
</table></td>
</tr>
</table>
</div>
</body>

</html>

xfile102
06-24-2012, 01:53 PM
CSS Code:



ul {margin:0px 0px 0px 8px; padding:0; list-style:none; line-height:17px;}
li { padding-left:11px; background:url(images/arrow_ul.gif) no-repeat left center}
li a {color:#818181;}

#container {

width:960px;

margin-left:auto;

margin-right:auto;

}

body{margin:0px; padding:0px; background-color:#4C4C4C;}

table {border:0px;}

form{margin:0px; padding:0px;}

td {margin:0px; padding:0px; font-size:11px; font-family:Tahoma; color:#6C6C6C; line-height:14px; vertical-align:top;}
input, textarea, select {margin:0px; padding:0px; font-size:11px; font-family:Tahoma; color:#585858; line-height:13px; vertical-align:top;}


.middle{vertical-align:middle;}

a:hover {text-decoration:none;}

.text{font-size:11px; font-family:Tahoma; color:#444444; line-height:13px; vertical-align:top;}


.navigation {font-size:10px; text-align:right; color:#666666;}
.navigation a {color:#666666; text-decoration:none; padding:0px 10px 0px 10px;}
.navigation a:hover {color:#FA5E00; background:url(images/arrow_nav.gif) left center no-repeat;}


.text_1 {color:#CECECE; line-height:13px;}

.line_1 {height:1px; background:url(images/line_1.gif) repeat-x;}
.line_2 {height:1px; background:url(images/line_2.gif) repeat-x;}
.line_3 {height:1px; background:url(images/line_3.gif) repeat-x;}

#form_1 select {width:178px; height:17px;}

.text_2 {color:#AAAAAA; line-height:13px;}
.text_2 a {color:#AAAAAA;}
.text_2 strong {color:#DA5C0E;}

.more_1 a {color:#E3E3E3; text-decoration:none; padding-left:13px; background:url(images/arrow_1.gif) left center no-repeat; font-weight:bold;}
.more_1 a:hover {text-decoration:underline;}

.copy {font-size:10px; text-align:center; color:#5F5F5F; margin-right:60px;}
.copy a {color:#999999; text-decoration:none;}
.copy a:hover {text-decoration:underline;}
.copy span {color:#999999;}

.text_3 {color:#6C6C6C; line-height:14px;}
.text_3 a {color:#6C6C6C; font-weight:bold;}
.text_3 .more_1 a {color:#BEBEBE; text-decoration:none; padding-left:13px; background:url(images/arrow_1.gif) left center no-repeat; font-weight:bold;}
.text_3 .more_1 a:hover {text-decoration:underline;}

.author {color:#E3E3E3; text-align:right;}

.text_4 {color:#818181; line-height:14px;}
.text_4 a {color:#818181;}
.text_4 .more_1 a {color:#BEBEBE; text-decoration:none; padding-left:13px; background:url(images/arrow_1.gif) left center no-repeat; font-weight:bold;}
.text_4 .more_1 a:hover {text-decoration:underline;}

.text_5 {color:#6C6C6C; line-height:14px;}
.text_5 a {color:#6C6C6C;}
.text_5 strong {color:#DA5C0E;}
.text_5 .more_1 a {color:#BEBEBE; text-decoration:none; padding-left:13px; background:url(images/arrow_1.gif) left center no-repeat; font-weight:bold;}
.text_5 .more_1 a:hover {text-decoration:underline;}

Corrosive
06-24-2012, 02:24 PM
You've got your container div starting before your opening body tag. The body section is the bit that shows on the page :)

Corrosive
06-24-2012, 02:25 PM
There are many other things wrong with your code by the way.

xfile102
06-24-2012, 02:34 PM
Lol. Thanks Corrosive. Would you be willing to help point them out and help me correct it? I am a noob and need assistance.

Corrosive
06-24-2012, 02:41 PM
Lol. Thanks Corrosive. Would you be willing to help point them out and help me correct it? I am a noob and need assistance.

Sure thing. I wrote this a while ago http://corrosiveonline.co.uk/articles_beginner_mistakes.php after making numerous mistakes when I first started. Hopefully it will help you :)

xfile102
06-24-2012, 02:46 PM
That page is filled with helpful recommendations. It doesn't offer any specific help with my page. I am looking for assistance with my pages from the awesome community of experience here. I am trying to be better, but I am beating my head against a wall from staring at the code over and over trying to figure out whats wrong

Corrosive
06-24-2012, 02:55 PM
*sigh* I thought perhaps you might take the hint that it is your fundamental approach that is the main thing wrong with your page. Don't think anyone here would be willing to trawl through nested tables and absolute positioning to try and figure out what is 'wrong' when the answer is that you are using nested tables and absolute positioning! You need to go back to the 'learning zone' and try starting again from scratch once you have a grasp of CSS and the 'box model'. These tutorials are very good http://www.htmldog.com/guides/cssbeginner/ Once you have the concepts down then start your own page.

gentleone
06-24-2012, 03:07 PM
*sigh* I thought perhaps you might take the hint that it is your fundamental approach that is the main thing wrong with your page. Don't think anyone here would be willing to trawl through nested tables and absolute positioning to try and figure out what is 'wrong' when the answer is that you are using nested tables and absolute positioning! You need to go back to the 'learning zone' and try starting again from scratch once you have a grasp of CSS and the 'box model'. These tutorials are very good http://www.htmldog.com/guides/cssbeginner/ Once you have the concepts down then start your own page.
^ +1

xfile102, learn to walk before you run!

edbr
06-25-2012, 01:41 AM
most of us moved away from tables for layout long ago, and although we can assist specific questions (when we can remember in my case at least) Its just too much to debug a file like this.
i would aim to redo using relatively positioned divs for your layout , use tables if you must for tabular data, we can easier help you then.
if you follow my signature link to different loinks it is the simplest of centred layouts , use that or the templates that come with dreamweaver and re do before you invest too much time and effort in the wrong direction. I know i did in the past