...
PDA

Keeping content centered when browser zoom/size changes!

Dirtynerd
05-27-2010, 10:03 AM
Okay here is my dilemma.

Im coding my website and the configuration for it works perfectly when opened standardly in safari. My issue comes into play when I change the zoom/screen size in the browser. Ive tried for about 12 hours and still can't figure out how to get my content centered in the middle of the page. My Header which is ID "morthix_banner", first image "subhead" and footer IDS "bannerbottom" and "morthix_footer_black" all work correctly.

HOWEVER, my division id that is holding majority of my content isnt working properly. its keeping everything to the left when the screen size of the browser is changed.

Here is my code. Please note: attached is my global.css and index.html.

NOTE**** top of index.html contains some style script on the actual page itself.

index.html : I put a note in the file where the issue starts and ends.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--
(**************************************)
(*****************************************)
(******************************************)
(********)-------(*********)-------(********)
(********) (*********) (********)
(********) (*********) (********)
(********) (*********) (********)
(********) (*********) (********)
(********) (*********) (********)
(********) (*********) (********)

-->
<title>Morthix - Interactive Web Development</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<meta name="description" content="">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel="stylesheet" href="_files/global.css" type="text/css">
<link rel="icon" type="image/png" href="_assets/_graphics/favicon.png">
<script type="text/javascript" charset="utf-8" src="_files/jquery.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>



<style type="text/css">
<!--
a:hover {
color: #FFFFFF;
}
.style21 {font-size: 11px; }
.style22 {font-size: 11px; color: #CCCCCC; }
body {
background-color: #A0A2A6;
}

-->
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
left: 2px;
top: 57px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
left: 561px;
top: 233px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
left: 389px;
top: 288px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
left: 72px;
top: 145px;
}
#rBox
{
width: 349px;
background-color: #FFF;
margin: 0px;
padding left: 1em;
padding-top: 1em;

}

h101
{
padding-left: 18px;
}

#bannerbottom
{

width: 100%;
background-image: url(_files/_assets/_graphics/_global/bottombanner.png);
background-repeat: repeat;
margin: 0px;
padding left: 0px;
padding-top: 0px;
height:40px;
}

h102

{
padding-right: 69px;
}

h103

{
padding-left: 69px;
}
-->
</style>

<!-- CSS HACK! RIGHT HERE FOR ROUNDED CORNERS!!!
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-->

<!-- START MORTHIX NAVIGATION -->

<style type="text/css">
<!--
.style25 {color: #5B5B5B}
.style28 {color: #000000}
.style39 {color: #5B5B5B}
-->
</style>


<div id="morthix_banner">
<h1><a href="http://morthix.com/">Morthix</a></h1>
<ul id="morthix_banner_search">
<li id="vnav_2"><a href="http://ac.morthix.com" target="_parent"><strong><font color="#b3cfdc"><b>Login</b></font></strong></a><span></span><li>
</ul>
<div id="morthix_banner_search"><img src="_files/_assets/_graphics/_global/phone.png" alt="Contact" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="15,3,138,21" href="http://morthix.com/company/contact" alt="Contact Morthix" />
</map>
</div>

<ul id="morthix_banner_account">

<li id="vnav_4"><a href="http://morthix.com/support" target="_parent">Support</a><span></span></li>
<li id="vnav_6"><a href="http://morthix.com/company" target="_parent"><strong>Company</strong></a><span></span></li>
<li id="vnav_7"><a href="http://morthix.com/weblog" target="_parent"><strong>Weblog</strong></a><span></span></li>
<li id="vnav_8"><a href="http://morthix.com/services" target="_parent"><strong>Services</strong></a><span></span></li>
<li id="vnav_9"><a href="http://morthix.com" target="_blank"><strong>Home</strong></a><span></span></li>


</ul>
</div><!--morthix_banner-->

<!-- End Morthix Navigation -->



<!-- Start Content -->
<div id="subhead">

<img src="_files/_assets/_graphics/_global/1day.png" alt="1 Day Design" width="936" height="324" longdesc="http://morthix.com/services/websitedesign/1daydesign" /></div>

<!-- THIS IS WHERE THE ISSUE STARTS!!!!!!!!!!!!!! -->
<div id="subheaddiv">
<p>&nbsp;</p>
<table width="950" border="0" align="center">
<tr>
<td width="524" height="35"><ul id="MenuBar4" class="MenuBarHorizontal">
<li>
<div align="center"><a class="MenuBarItemSubmenu" href="#">Hosting</a>
<ul>
<li>
<a href="#">CloudDuo</a></li>
<li>
<a href="#">Revolution</a></li>
<li>
<a href="#">CorePro</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a class="MenuBarItemSubmenu" href="#">Design</a>
<ul>
<li><a href="#">Website</a></li>
<li><a href="#">Graphic</a></li>
<li><a href="#">logo</a></li>
</ul>
</div>
</li>
<li>
<div align="center"><a class="MenuBarItemSubmenu" href="#">Hourly Work</a>
<ul>
<li><a href="#">Coding</a></li>
<li><a href="#">Editing</a></li>
<li><a href="#">Editing</a></li>

</ul>
</div>
</li>
<li>
<div align="center"><a class="MenuBarItemSubmenu" href="#">Marketing</a>
<ul>
<li><a href="#">Media</a></li>
<li><a href="#">Appearel</a></li>
<li><a href="#">Strategy</a></li>
</ul>
</div>
</li>
</ul>
</td>
<td width="58">
<div align="right">
<img src="_files/_assets/_graphics/_global/line.png" width="29" height="28" />
</div>
</td>
<td width="344">
<p align="center">
<img src="_files/_assets/_graphics/_global/payments.png" alt="Morthix Payments" width="225" height="32" longdesc="http://morthix.com/payments" />
</p>
</td>
</tr>
</table>
<p>&nbsp;</p>
<!-- End Content -->


<!-- START EVERYTHING - ADVERTISEMENT BANNERS TABLE TABLES -->


<!-- START TABLE FOR EVERYTHING, RSS, AND SUPPORT-->

<table width="952" border="0" align="center">
<tr>
<td width="348" height="333">
<p>&nbsp;</p>
<h5 class="style28"><img src="_files/_assets/_graphics/_global/top.png" width="349" height="73" /> </h5>
<div class="style25" id="rBox">
<p>
<h101 align="left"><img src="_files/_assets/_graphics/_global/arrow.png" width="20" height="10" />Search for a domain name</h101>
<br />

<h101 align="left"><img src="_files/_assets/_graphics/_global/arrow.png" width="20" height="10" />Get Website Hosting </h101>
<br />

<h101 align="left"><img src="_files/_assets/_graphics/_global/arrow.png" width="20" height="10" />Build your website</h101>
<br />

<h101 align="left"><img src="_files/_assets/_graphics/_global/arrow.png" width="20" height="10" />Website Design</h101>
<br />

<h101 align="left"><img src="_files/_assets/_graphics/_global/arrow.png" width="20" height="10" />Customer Support</h101>
<br />

<h101 align="left"><img src="_files/_assets/_graphics/_global/arrow.png" width="20" height="10" />Reliability</h101>

<h101 align="left"></h101>
<br />
</p>
</div>
<h5>
<img src="_files/_assets/_graphics/_global/bottom.png" width="349" height="23" />
<img src="_files/_assets/_graphics/_global/rss.png" alt="RSS" width="173" height="90" longdesc="feed://morthix.com/weblog/?feed=rss2" />
<img src="_files/_assets/_graphics/_global/support.png" alt="Support" width="176" height="90" longdesc="http://morthix.com/support/" /></h5>
</td>

<!-- END START TABLE FOR EVERYTHING, RSS, AND SUPPORT-->


<!-- START TABLE FOR SERVICES IDEAS AND REVIEWS -->


<td width="146"><p>&nbsp;</p>
<p align="center"><img src="_files/_assets/_graphics/_global/services_side.png" alt="Morthix Services" width="121" height="253" /></p>
<p align="center"><img src="_files/_assets/_graphics/_global/reviews.png" alt="reviews" width="125" height="65" longdesc="http://morthix.com/company/reviews" />
</p>
</td>


<!-- END TABLE FOR SERVICES IDEAS AND REVIEWS -->





<!-- START ADVERTISEMENT BANNERS TABLE -->

<td width="444">
<div align="right">
<p>&nbsp;</p>
<p align="center"><img src="_files/_assets/_graphics/_global/blueprint.png" alt="BluePrint" width="445" height="92" longdesc="http://morthix.com/services/websitedesign/blueprint" />
</p>
<p>&nbsp;</p>
<p align="center"><img src="_files/_assets/_graphics/_global/cloudduo.png" alt="CloudDuo Hosting" width="445" height="92" longdesc="http://ac.morthix.com/cart.php?gid=1" />
</p>
<p>&nbsp;</p>
<p align="center"><img src="_files/_assets/_graphics/_global/graphicdesign.png" alt="Graphic Design" width="445" height="92" longdesc="http://morthix.com/services/graphicdesign/" />
</p>
</div><!--rBox-->
</td>

<!-- END ADVERTISEMENT BANNERS TABLE -->

</tr>
</table>

<!-- END EVERYTHING - ADVERTISEMENT BANNERS TABLE TABLES -->

<!-- THIS IS WHERE THE ISSUE ENDS!!!!!!!!!!!!!! -->




<!-- PRE FOOTER WITH SOCIAL -->


<div id="bannerbottom">
<p align="center"><h102 align="left"><a href="http://morthix.com/services/quote/"><img src="_files/_assets/_graphics/_global/get-a-quote.png" alt="Morthix Quote" width="113" height="29" longdesc="http://morthix.com/services/quote/" /></a></h102>

<img src="_files/_assets/_graphics/_global/morthix-twitter.png" alt="Morthix Twitter" width="35" height="35" longdesc="http://twitter.com/morthix" /></a>

<a href="http://www.facebook.com/morthix"><img src="_files/_assets/_graphics/_global/morthix-facebook.png" alt="Morthix Facebook" width="35" height="35" longdesc="http://www.facebook.com/morthix" /></a>

<a href="http://www.myspace.com/morthix"><img src="_files/_assets/_graphics/_global/morthix-myspace.png" alt="Morthix Myspace" width="35" height="35" longdesc="http://www.myspace.com/morthix" /></a>

<a href="http://www.linkedin.com/companies/morthix-llc."><img src="_files/_assets/_graphics/_global/morthix-linkedin.png" alt="Morthix Linkedin" width="35" height="35" longdesc="http://www.linkedin.com/companies/morthix-llc." /></a>

<a href="http://digg.com/design/Morthix_Innovative_Web_Media"><img src="_files/_assets/_graphics/_global/morthix-digg.png" alt="Morthix Digg" width="35" height="35" longdesc="http://digg.com/design/Morthix_Innovative_Web_Media" /></a>

<a href="http://www.flickr.com/photos/41473885@N06/"><img src="_files/_assets/_graphics/_global/morthix-flickr.png" alt="Morthix Flickr" width="35" height="35" longdesc="http://http://www.flickr.com/photos/41473885@N06/" /></a>

<h103 align="left"><a href="http://morthix.com/company/employment/"><img src="_files/_assets/_graphics/_global/employment.png" alt="Morthix Employment" width="113" height="29" longdesc="http://morthix.com/company/employment/" /></a></h103></p>
</div><!--bannerbottom-->

<!-- END PRE FOOTER WITH SOCIAL -->

<!-- MORTHIX FOOTER -->
<div id="morthix_footer_black">
<div id="footer_content">
<p>&nbsp;</p>
<p class="style22">© 2008-2010 Morthix LLC. All rights reserved. <a href="http://morthix.com/privacy">Privacy Policy</a> | <a href="http://morthix.com/legal">Terms of Service </a></p>
<p class="style22">&nbsp;</p>
<p class="style22"><span class="style22"><a href="http://morthix.com">Home</a> | <a href="http://morthix.com/services">Services</a> | <a href="http://morthix.com/weblog">Weblog</a> | <a href="http://morthix.com/company">Company</a> | <a href="http://morthix.com/support">Support</a></span></p>
<p>&nbsp;</p>
</div>
<p align="center" class="style21"> </div>

</div>


<!-- START GOOGLE ANALYTICS -->


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7649813-1");
pageTracker._trackPageview();
} catch(err) {}</script>


<!-- End Google Analytics -->


<!-- START TWITTERr -->


<script type="text/javascript" charset="utf-8"><!--
//SETTINGS BELOW
keywords = 'Morthix';
auto = false;
speed = 'walk';
--></script>

<script src="http://eduvoyage.com/ttseed.js" type="text/javascript"></script>


<!-- END TWITTER -->


<script type="text/javascript">


<!-- SPRY MENU BAR DETAILS


var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});


// END DETAILS-->
</script>
</body></html>
Dirtynerd
05-27-2010, 10:03 AM
global.css
/**************************************************************************************************** *****************************
/
/
/ (***************************************)
/ (*****************************************)
/ (******************************************)
/ (********) (*********) (********)
/ (********) (*********) (********)
/ (********) (*********) (********)
/ (********) (*********) (********)
/ (********) (*********) (********)
/ (********) (*********) (********)
/ (********) (*********) (********)
/
/
/**************************************************************************************************** *****************************
/ Website Designed For Morthix LLC. Morthix LLC. is not responsible for website design code or images. Designed By 3rd Party.
/**************************************************************************************************** *****************************/

/*****************************************************
* Morthix Global CSS
*****************************************************/

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
}
body {
background: #262626;
font: normal 100% "Myriad Pro", "Jamrul", Helvetica, Verdana, Arial, Tahoma, sans-serif;
color: #0C0D10;
margin: 0;
padding: 0;
height: 100%;
}

img { border: 0; }
img { -ms-interpolation-mode:bicubic; }

hr { display: none; }

a,
a:focus,
a:active,
input,
select { outline: none; }

ul, li { list-style-type: none; padding: 0; margin:0; }

table, tr, td {
border: 0;
border-collapse: collapse;
vertical-align: top;
}

pre {
display: block;
padding-bottom: 20px;
}
pre br {
display: none;

}

.clear {
position: relative;
clear: both;
}

.hide {
display: none;
}

a,
a:visited {
color: #FFFFFF;
text-decoration: none;
border-bottom: 0px solid #7db8d9;
}
a:hover {
color: #222;
text-decoration: none;
border-bottom: 0;
}

body .nospace {
margin: 0;
padding: 0;
}

/*****************************************************
* Morthix Header
*****************************************************/

div#morthix_banner {
position: relative;
z-index: 1000;
display: block;
height: 24px;
padding: 8px;
background: #333 url(_assets/_graphics/_frontend/bg-gradient.png) repeat-x;
}
div#morthix_banner a,
div#morthix_banner a:visited {
text-decoration: none;
}
#morthix_banner h1 {
float: left;
width: 60px;
height: 24px;
padding-right: 12px;
margin-right: 4px;
}
#morthix_banner h1 a,
#morthix_banner h1 a:visited {
font-size: 10px;
text-indent: -7777px;
display: block;
width: 100px;
height: 24px;
border: 0;
background: url(_assets/_graphics/_global/logo-banner.png) no-repeat;
}
#morthix_banner[id] h1 a:hover {
background-position: left bottom;
}

#morthix_banner ul, div#morthix_banner_search {
float: right;
height: 24px;
display: block;
z-index: 799;
padding-right: 10px;
margin-right: 2px;
}
#morthix_banner ul#morthix_banner_about, #morthix_banner ul#morthix_banner_explore, div#morthix_banner_search {
margin: 0;
padding: 0;
background: none;
}
#morthix_banner ul#morthix_banner_explore { width: 145px; float: left; }
#morthix_banner ul#morthix_banner_account {
width: 400px;
padding-right: 11px;
}
#morthix_banner ul#morthix_banner_about { width: 120px; padding-left: 2px; }
div#morthix_banner_search { width: 150px; }

div#morthix_banner_search {
padding-left: 8px;
}
div#morthix_banner_search form {
padding: 0;
}
div#morthix_banner_search input {
height: 16px;
width: 134px;
margin: 1px 0 1px 0;
padding: 4px 8px 2px 8px;
font-size: 11px;
line-height: 16px;
border: none;
background-color: transparent;
background: url(_assets/_graphics/_global/banner-nav_search.png) no-repeat top;
color: rgba(0,0,0,.60);
}
div#morthix_banner_search input.hidden {
display: none;
}

/*****************************************************
* Morthix Navigation Buttons
*****************************************************/

#morthix_banner ul li {
float: left;
height: 22px;
padding: 0 12px 0 0;
margin: 1px 0 1px 5px;
background: url(_assets/_graphics/_global/banner-nav_right.png) no-repeat right top;
position: relative;
cursor: pointer;
}
#morthix_banner ul#morthix_banner_account li { float: right; }
#morthix_banner ul li:hover {
background: url(_assets/_graphics/_global/banner-nav_right.png) no-repeat right bottom;
cursor: pointer;
}
#morthix_banner ul li a,
#morthix_banner ul li a:visited {
display: block;
height: 22px;
padding: 0 0 0 12px;
border: 0;
color: #fff;
font-size: 11px;
line-height: 22px;
background: url(_assets/_graphics/_global/banner-nav_left.png) no-repeat left top;
}
#morthix_banner ul li a img,
#morthix_banner ul li a:visited img {
margin: -2px -3px 0 0;
padding: 0;
width: 16px;
height: 16px;
vertical-align: middle;
position: relative;
}
#morthix_banner ul li a strong,
#morthix_banner ul li a:visited strong {
font-weight: normal;
}
#morthix_banner ul li a strong.plus,
#morthix_banner ul li a:visited strong.plus {
font-weight: bold;
font-size: 12px;
line-height: 21px;
}
#vmorthix_banner ul li a strong.nav_arrow,
#morthix_banner ul li a:visited strong.nav_arrow {
background: url(_assets/_graphics/_global/banner-nav_arrow.png) no-repeat right top;
padding: 0 12px 0 0;
}
#morthix_banner ul li a:hover,
#morthix_banner ul li:hover a {
color: #fff;
background: url(_assets/_graphics/_global/banner-nav_left.png) no-repeat left bottom;
}


/*****************************************************
* Morthix Extras
*****************************************************/

p.subhead {
font-size: 11px;
color: #999;
margin: 0 auto;
padding: 0;
height: 25px;
background: url(_assets/_graphics/_frontend/bg-index_subhead.gif) no-repeat;
width: 17.2em;
}

.subhead em {
float: left;
display: block;
font-style: normal;
padding: 8px 0 0 20px;
}

.subhead span {
float: right;
display: block;
height: 25px;
width: 20px;
background: url(_assets/_graphics/_frontend/bg-index_subhead.gif) no-repeat right top;
}

#wrapper .custom_message_wrap p.mark.error {
font: 14px;
padding: 0 0 10px 0;
}

/*****************************************************
* Morthix Footer
*****************************************************/

#morthix_footer {
margin: 0px;
position: relative;
text-align: center;
background-color: #CCCCCC;
background-repeat: repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#morthix_footer_black {
margin: 0px;
position: relative;
text-align: center;
background-color: #7D7E81;
background-repeat: repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#morthix_footer a,
#morthix_footer a:visited {
border: none;
color: #595959;
}
#morthix_footer a:hover {
color: #808080;
}


/*****************************************************
* Morthix Extra
*****************************************************/
#subhead {
width:100%;
text-align:center;

border-top:.5px solid #000000;
background-color: #e6eef1;
}
#subheaddiv {
width:100%;
margin:0 auto;
text-align: left;
background-color: #e6eef1;
}
#subhead h1 {
padding:0;
margin:42px 0;
font: normal 26px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
line-height:26px;
letter-spacing: -1px;
font-weight:normal !important;
float:left;
}

#subhead h1 a {
color:#222;
text-decoration:none;
}
#subhead h1 b, #subhead h1 a:visited b, #subhead h1 a:link b {
font-weight:normal;
color:#88201b;
}

#content {
width:100%;
background:#000000;
}
#contentdiv {
padding-top: 20px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
#subnav {
float:right;
font-size:12px;
color:#777;
margin:42px 0;
}
#morthixsubhead {
width:940px;
text-align:left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#morthixsubheader {
width:100%;
text-align:left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;}


/****************************************************/

Thank you for your help.
If need to get in contact you can email me at cmorte@morthix.com

Thank you,
Curtis
Dirtynerd
05-27-2010, 06:42 PM
If anyone has any ideas or suggestions i would greatly appreciate it.
Scriptet
05-27-2010, 06:50 PM
You have the subheaddiv as width:100%, try changing this to the actual width that it's intended to be which from the table looks as though it should be 950px.

Or did you want the subheaddiv to be 100% wide? Then you'd have to center all of it's children, or add another wrapper DIV and set a width and margin:auto;

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum