Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts

    Exclamation Struggling to center content with CSS


    My test site can be viewed at http://deon.gotdns.com/preondemo/indexdemo1.php. It looks the same in IE7 and FF.

    My problem is that I cannot center the content (currently the grey text and flash photos between the left side menu and the right side pictures of my page) even though I use "margin-left:auto; mmargin-right: auto" in my CSS.

    I appreciate any help anybody can offer because I am really struggling with this.


    CSS code:
    body { color: gray; background-color:white; font-size:12px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; }
    div.header { height:137px; width:800px; margin-left: auto; margin-right: auto; }
    div.nav { float:left; color:black; height:700px; width:190px; border-right: thin dotted silver;}
    /* div.news { float:right; width:200px; height:auto; background-color:white; text-align: left; color: #ffffff; padding : 5px; } */
    div.projects { verticle-align:top; float:right; width:200px; height:auto; background-color:#ffffff; text-align: left; padding : 5px; border-left: thin dotted silver; }
    div.content { margin-left:auto; margin-right:auto; }
    div.footer { clear:both; padding:0px; color:black; text-decoration: none; margin-left:auto; margin-right:auto; font-size:11px;
    font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }
    div.footerleft { color:black; text-decoration: none; float:left; font-size:11px; padding:5px;
    font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }
    div.footerright { clear:both; color:black; text-decoration: none; float:right; font-size:11px; padding:5px;
    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; }

    width: 180px; /*width of accordion menu*/

    .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 14px Arial;
    color: white;
    background: black url(titlebar.png) repeat-x center left;
    margin-bottom: 10px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;

    .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
    background-image: url(titlebar-active.png);

    .arrowlistmenu ul{ /*CSS for UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/

    .arrowlistmenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/

    .arrowlistmenu ul li a{
    color: #A70303;
    background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
    display: block;
    padding: 2px 0;
    padding-left: 19px; /*link text is indented 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{ /*hover state CSS*/
    color: #A70303;
    background-color: #F3F3F3;

    HTML code:
    <!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">

    <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">
    * All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

    <div class="header">
    <OBJECT classid="clsid27CDB6E-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"

    <!-- Top Horizontal Menu-->
    <div id="ddtopmenubar" class="matttabs">
    <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>

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

    <!-- Top Drop Down Menu 1 HTML-->
    <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>

    <!-- Top Drop Down Menu 2 HTML-->
    <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>

    <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">
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use

    <script type="text/javascript">
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing

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

    <!-- Left Menu Starts Here -->
    <div class="nav">

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

    <h4>Proudly Serving You</h4>
    Elmhurst, IL * 218-555-9156<br />
    Seattle, WA * 446-555-4151<br />
    Sheridan, WY * 761-555-7821<br />
    Snow Camp, NC * 336-555-1778

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

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


  • #2
    New to the CF scene
    Join Date
    May 2009
    Thanked 0 Times in 0 Posts

    Thumbs up

    Fixed in.. just added "text-align: center" and it did it. Not sure why it needed it though.. but oh well...

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,845 Times in 1,829 Posts
    Quote Originally Posted by daalouw View Post
    Fixed in.. just added "text-align: center" and it did it. Not sure why it needed it though.. but oh well...
    I didn't look through your posted code and the site is down now? Normally, to center things you need to give them a width.

    The 3 things needed to center an element:
    1. a DocType
    2. an element with a width
    3. that elements left/right margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts