PDA

Click to See Complete Forum and Search --> : Centering Help

focus310
06-24-2007, 12:28 PM
Hello:

I'm having trouble centering my page layout. I never had a problem in the past but someone passed this coding over to me and it won't center. I have a div id named container which is what I'm using to position my layout on the page. There is something somewhere in the code which is forcing the layout to be left justified and I can't seem to find it.

Can someone help me out? Thanks in advance.

This is the HTML:

<html>
<head>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script language="JavaScript" src="email.js" type="text/javascript"></script>
<!--[if IE]><link rel="stylesheet" href="email-archive.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="container">

<table width="850" height="27" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="menu">
<ul class="menu1" id="nav">
<li><span class="menu_top"><a href="#" style="padding: 0;">Communities</a></span>
<ul>
<li><a href="#">Chestatee</a></li>
<li><a href="#">Hawks Ridge</a></li>
<li><a href="#">Lake Arrowhead</a></li>
<li><a href="#">Area Map</a></li>
</ul>
</li>
</ul>

<ul class="menu2" id="nav">
<li><span class="menu_top"><a href="#" style="padding: 0;">Build On Your Own Lot</a></span>

</li>
</ul>

<ul class="menu3">
<li><span class="menu_top"><a href="#" style="padding: 0;">House Plans</a></span>
<ul>
<li><a href="under-3000.html">Examples of stock home plans under 3000 sq.ft.</a></li>
<li><a href="over-3000.html">Examples of stock home plans over 3000 sq.ft.</a></li>
<li><a href="custom-homes.html">Examples of Custom Homes Plans</a></li>
</ul>
</li>
</ul>

<ul class="menu4">
<li><span class="menu_top"><a href="#" style="padding: 0;">Available Homes</a></span>
<ul>
<li><a href="#">Chestatee</a>
<ul>
<li><a href="#">The Greens</a></li>
<li><a href="#">The Waterfront</a></li>
<li><a href="#">Linkside</a></li>
</ul>
</li>
<li><a href="#">Hawks Ridge</a></li>
<li><a href="#">Lake Arrowhead</a></li>
</ul>
</li>
</ul>

<ul class="menu5">
<li><span class="menu_top"><a href="#" style="padding: 0;">Gallery</a></span>
<ul>
<li><a href="#">Exterior Gallery</a></li>
<li><a href="#">Interior Gallery</a></li>
</ul>
</li>
</ul>

<ul class="menu6">
<li><span class="menu_top"><a href="#" style="padding: 0;">Features</a></span></li>
</ul>

<ul class="menu7">
<li><span class="menu_top"><a href="#" style="padding: 0;">Design Center</a></span></li>
</ul>

<ul class="menu8">
<li><span class="menu_top"><a href="#" style="padding: 0;">Selected Option Prices</a></span></li>
</ul>
</div> </td>
</tr>
</table>
<div id="main">
this is the main content area

<br><br>
</div>


</div>
</body>
</html>


=====
This is the css file:

#container
{
width: 850px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}


/* communities */
.menu1 {
width: 90px;
}
/* build on your own lot */
.menu2 {
width: 140px;
}
/* house plans */
.menu3 {
width: 95px;
}
/* available homes */
.menu4 {
width: 120px;
}
/* gallery */
.menu5 {
width: 65px;
}
/* features */
.menu6 {
width: 70px;
}
/* design center */
.menu7 {
width: 102px;
}
/* selected option prices */
.menu8 {
width: 135px;
}


#menu {
width: 100%;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menu ul ul li{
width: 120px;
background: #DDDDDD;
}

#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
display: block;
border-width: 0;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
}

#menu .menu_top {
color: #fff;
text-align: center;
}

#menu a {
text-decoration: none;
padding: 3px 3px 4px 10px;
}

#menu a:hover {
color: #ffffff;
background: #8C8C8C;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul li {
background: #DDDDDD;
}

#menu ul ul li:hover a{
color: #fff;
background: #8C8C8C;
}

#menu ul ul a {
color: #000;
}

#menu ul ul a:active {
background: #8C8C8C;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

#menu ul ul ul li {
background: #8C8C8C;
}

#menu ul ul ul a{
color: #fff;
}

#menu ul ul ul a:hover{
color: #fff;
background: #336699;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/** end navbar css code **/


====

This is the other CSS file being used:

body {
font-size: 100%; /* enable IE to resize em fonts */
behavior: url(csshover.htc); /* call hover behaviour file */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}

#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}

===
This is the .htc file:

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* - Martin Reurings
* - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}

function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}

function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
coothead
06-24-2007, 01:00 PM
http://www.codingforums.com/showthread.php?t=117147
Centauri
06-24-2007, 07:17 PM
Possibly due to there being no doctype, and you are looking at it in IE ?
focus310
06-25-2007, 07:37 AM
Hello:

I did put a doctype in my HTML and that did make the centering work. I now have another issue.

The menu works correctly in IE6 and Firefox. In IE7, when I place my mouse over a link and the drop down apears, there is a blank space in between in each link. When you try to scroll over the links, the first link is ok but then the menu disappears when you try to hover over the other links.
Centauri
06-25-2007, 07:51 AM
Browsers have differing default margins and/or padding on a lot of elements, and the inclusion of:* {
margin: 0;
padding: 0;
} at the start of the css will zero out these defaults. You will then have to apply the margins and paddings you do want.