Cannot get content to center on the page with CSS

**daalouw** · 04-25-2009, 01:33 AM

Hey. I have a startup site that I am testing. It is http://deon.gotdns.com/preondemo/indexdemo1.php.

The page has a horizontal menu and a vertical menu (on left side). I cannot get anytihng to appear on the right hand side of the vertical menu. I've tried creating div's with "margin-left: auto; margin-right: auto;". The flash (3 electricity picture at the bottom left) is supposed to appear in the center to the right of the vertical menu. I cannot get it there.

CSS code:
body { color: #01355d; background-color:white; font-size:14px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; }
div.header { height:137px; width:800px; margin-left: auto; margin-right: auto; }
div.content { margin-left: auto; margin-right: auto; padding: 5px; }
div.footer { clear:both; padding:0px; color:black; text-decoration: none; margin-left:0px; margin-right:0px; font-size:11px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }

a:link {color:#01355D; text-decoration:none; }
a:visited {color:#01355D; text-decoration:none; }
a:hover {color:#0f4164; text-decoration:underline; }
a:active {color:#01355D; text-decoration:none; }
img.center { margin-left:auto; margin-right:auto; }
img.left { float:left; padding:10px; }
img.right { float:right; padding:10px; }
div.imageright { float:right; margin: 10px; padding:5px; border:1px solid gray; text-align:center; }

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ list-style-type: none;
margin: 0; padding: 0; margin-bottom: 8px;
}

.arrowlistmenu ul li{
padding-bottom: 2px; }

.arrowlistmenu ul li a{ color: #A70303;
background: url(arrowbullet.png) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{
color: #A70303;
background-color: #F3F3F3;

Web Page Code:
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Preon Power, Inc. Integrating Energy for a New World.</title>
<meta name="Description" content="Preon Power, Inc. Integrating Energy for a New World through microturbine and CHP" />
<meta name="Keywords" content="Preon Power integrating energy engineering tim tawoda micro turbine microturbine DG CHP Power green energy CTA Chicago Transport Authority
Chicago Police Chicago schools methane fields Reflectasite" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="www.reflectasite.com" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
</script>
</head>

<body>
<div class="header">
<OBJECT classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
ID=demoflash1 WIDTH=800 HEIGHT=130>
<PARAM NAME="wmode" value="transparent">
<PARAM NAME=movie VALUE="demoflash1.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=loop VALUE=false>
<EMBED src="demoflash1.swf" loop=false quality=high WIDTH=800 HEIGHT=130 wmode="transparent" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
>
</EMBED>
</OBJECT>
</div>


<div id="ddtopmenubar" class="matttabs">
<ul>
<li><a href="index.php?content=finance">Finance</a></li>
<li><a href="index.php?content=service">Service</a></li>
<li><a href="index.php?content=engineering">Engineering</a></li>
<li><a href="index.php?content=pq" rel="ddsubmenu2">Power Quality Sales</a></li>
<li><a href="index.php?content=dg" rel="ddsubmenu1">Distribution Generation Sales</a></li>
</ul>
</div>

<script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="index.php?content=microturbines">Micro Turbines</a></li>
<li><a href="index.php?content=chp">CHP</a></li>
</ul>


<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="index.php?content=ups">UPS</a></li>
<li><a href="index.php?content=gensets">Gensets</a></li>
<li><a href="index.php?content=switchgear">Switchgear</a></li>
<li><a href="index.php?content=monitoring">Monitoring</a></li>
<li><a href="index.php?content=control">Control</a></li>
</ul>

<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
</script>

<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["prefix", "", ""],
animatespeed: "fast",
oninit:function(headers, expandedindices){ },
onopenclose:function(header, index, state, isuseractivated){ }
})
</script>


<div class="arrowlistmenu">
<h3 class="menuheader" style="cursor: default">Home</h3>
<h3 class="menuheader expandable">About Preon</h3>
<ul class="categoryitems">
<li><a href="index.php?content=strategic">Strategic Differentiator</a></li>
<li><a href="index.php?content=mission">Mission</a></li>
<li><a href="index.php?content=management">Management</a></li>
<li><a href="index.php?content=history">History</a></li>
</ul>
<h3 class="menuheader expandable">Company Info</h3>
<ul class="categoryitems">
<li><a href="index.php?content=mission">Business Units</a></li>
<li><a href="index.php?content=requestinfo">Request Information</a></li>
</ul>
<h3 class="menuheader expandable">Projects</h3>
<ul class="categoryitems">
<li><a href="index.php?content=chicago">Chicago Police Station</a></li>
<li><a href="index.php?content=wyoming">Wyoming Gas Fields</a></li>
<li><a href="index.php?content=savanna">Savanna Army Depot</a></li>
<li><a href="index.php?content=ravallo">Ravallo Resort</a></li>
</ul>
<h3 class="menuheader expandable">News</h3>
<ul class="categoryitems">
<li><a href="index.php?content=press">Press Releases</a></li>
<li><a href="index.php?content=newsletters">Newsletters</a></li>
</ul>
</div>

<div class="content">
<p> just putting text here </p>

<?php if (!isset($_REQUEST['content']))
{
if(!isset($_SESSION['valid_user']))
{
include("main.inc");
}
}
else
{
$content = $_REQUEST['content'];
if (substr($content, 0, 4) == "http")
{
echo "Invalid page code\n";
exit;
} else
{
$nextpage = $content . ".inc";
include($nextpage);
}
}
?>
</div>

<div class="footer">
<?php include("footer.inc");
?>
</div>

</body>
</html>

And the content code (appears in file called "main.inc")
<h3>Providing Tommorrow's Solutions Today</h3>

<OBJECT classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
ID=demoflash2 WIDTH=390 HEIGHT=340>
<PARAM NAME="wmode" value="transparent">
<PARAM NAME=movie VALUE="demoflash2.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=loop VALUE=true>
<EMBED src="demoflash2.swf" loop=true quality=high wmode="transparent" WIDTH=390 HEIGHT=340 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>

<p>As an Energy Integrator, Preon provides the most comprehensive and highest quality product
and service offerings to critical and on-site power generation industries. The focus is with
commercially viable technologies but with segue for tomorrow’s solution – including renewable energy.
</p>

Any help will be much appreciated.

Thank you.
daalouw

**daalouw** · 04-25-2009, 01:34 AM

I have the issue with IE7 and FF.

**daalouw** · 04-25-2009, 04:00 AM

For what it is worth, I put the whole menu in another enclosing div. At least I get info to the right of my verticle menu but I am still unable to center my content. For now, this is tomorrow's problem.

**SGBotsford** · 04-25-2009, 05:16 PM

I didn't try very hard to unscramble your code. As a general rule, make the simplest possible example that illustrates the problem. Static web page, separate css file, pare both down to the minimum. A lot of the time in paring down, you find the bug.

I didn't include a header div, as it seemed irrelevant to what you are trying to do.

#vnavbar {
width: 25%;
float: left;
display: inline;
}

#content {
width: 74%
float: right;
display: inline;
}

.center {
margin: auto 0 auto 0;
width: 50%;
}

img {
width: 100%;
}

****

In the web page:

<div id="vnavbox">
nav stuff goes here
</div>

<div id="content">
content goes here.
<div class="center">
image goes here.
</div>
more content
</div>

This gives you a totally liquid layout that will give acceptable results on an iphone or a 1600 x 1200 pixel monitor.

With images automatically sized to fill the div, the browser doesn't have to get the image size before starting to do the layout. It can reserve the width of the box ahead of time.

Thread: Cannot get content to center on the page with CSS

Thread Tools

Search Thread

Cannot get content to center on the page with CSS

Bookmarks

Bookmarks

Posting Permissions