PDA

View Full Version : Centering Help

focus310
06-24-2007, 05:29 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>
_Aerospace_Eng_
06-24-2007, 05:42 PM
What browser are you using to view the page? If its IE then its not going to center without a full doctype. I bet it centers in Firefox. Read the sticky about doctypes.
focus310
06-24-2007, 05:49 PM
Hi,

Thanks for the reply. I did put in a doctype and it is centered. Though, another issued developed.

When you scroll through the menu, the link Available Homes has three levels of drop-downs. The first level, Available Homes, is no problem. The second level, Chestatee, no problem. But, under Chestatee, is another level which when you scroll the hovering is not highlighting the links.

Before I inserted the doctype, it worked without a problem.

This is the doctype I put in my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Why would inserting the doctype effect the last level of drop down? The last level should highlight in blue when you hover and scroll through that list.

Any ideas?

Just a note, I tried the page on Firefox with the doctype and the menu is working as it should. Everything is being highlighted and appearing correctly. I think it is the doctype and I don't know how to fix it.
_Aerospace_Eng_
06-24-2007, 05:56 PM
Inserting the doctype effects the drop down because now its trying to display properly. Post a link to your page please. I'm not going to recreate it myself.
focus310
06-24-2007, 06:07 PM
Hi,

Here is the link.
http://www.chrisspencerhomes.com/cssdropdown.htm

I'm using IE7 and it isn't working. Yet, the menu does work with IE6.