Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Struggling to center content with CSS

    Hello.

    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.

    Thanks.

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

    .arrowlistmenu{
    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:
    <?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">
    /*****************************************************************************************/
    * 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
    ******************************************************************************************/
    </script>
    </head>

    <body>
    <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"
    PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
    >
    </EMBED>
    </OBJECT>
    </div>

    <!-- Top Horizontal Menu-->
    <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>

    <!-- 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>
    </ul>

    <!-- 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>
    </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">
    /***********************************************
    * 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>

    <script type="text/javascript">
    ddaccordion.init({
    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
    }
    })
    </script>

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

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

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

    <div class="content">
    <?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>
    -----------------------------------------------------------------

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    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
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 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
    •