DMX|ZONE
Register Login

Forums

DREAMWEAVER

This topic is locked

Help Centering Page...


Shawn Michael Kirkbride
Posted 24 Jun 2012 15:20:06
1
has voted
Vote
24 Jun 2012 15:20:06 Shawn Michael Kirkbride posted:
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.

Replies


Shawn Michael Kirkbride
Replied 24 Jun 2012 15:21:01
24 Jun 2012 15:21:01 Shawn Michael Kirkbride replied:
HERE is my HTML


<!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>

Shawn Michael Kirkbride
Replied 24 Jun 2012 15:21:48
24 Jun 2012 15:21:48 Shawn Michael Kirkbride replied:
And MY CSS


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;}

Reply to this topic

Currency:
Company Info
Payment & Pricing
Legal Notices
Guides
Copyright © 2001-2024 Dynamic Zones International B.V., All Rights Reserved.