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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Help Centering Website

    HI,

    I would appreciate any help anyone can offer me. I would like to centre the template I have for my site, currently it is based on the left.

    I have tried to add a wrapper:

    #wrap {
    width: 900px;
    margin: 0 auto;
    }

    But it doesnt work. The body code looks like this:

    body{
    background:url(.....) repeat-y top left #121212;
    font:11px Arial, Helvetica, sans-serif normal;
    text-align:left;
    padding:0;

    #header{
    background:url(...) no-repeat top left #121212;
    position:absolute;
    top:0;left:0;
    height:144px;
    width:800px;

    #main{
    position:absolute;
    top:170px;left:0;
    width:600px;
    color:#000

    #sidebar{
    position:absolute;
    top:144px;left:700px;
    width:200px;
    color:#FFF;

    they are all absolute, should they be auto with a wrapper?

    Thanks for your help in advance

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    get rid of all "position:....." attributes. completely.
    Then add the wrapper to the html (and show the html so we can see how you have it "layed out")... it should look something like this
    Code:
    <div id="wrap">
      <div id="header"><div>
      <div id="main"></div>
      <div id="sidebar"></div>
    </div>
    now if you are doing what I think you are doing you will need to add
    Code:
    float:left;
    to both #main and #sidebar and also will need to flip the order of them in the above "layout"
    so...
    Code:
    <div id="wrap">
      <div id="header"><div>
      <div id="sidebar"></div>
      <div id="main"></div>
    </div>

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I was dealing with the same problem too


    Try this. Remove all the stuff you have related to horizontally centering the Div.

    CSS:
    Code:
    <style type="text/css">
    .center
    {
    margin:auto;
    width:200px; 
    }
    </style>
    You can set the "width" property to whatever you'd like in number of pixels.

    BODY:
    Code:
    <body>
    <div class=".center">
    ---BODY CONTENT GOES HERE---
    </div>
    </body>

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thank you for your help, here is the amended html now with the "menu" and "main" swapped.


    <body>
    <div id="wrap">

    <div id="header">

    <div class="menu"> ...


    </div>
    </div>

    <div id="sidebar">

    <h3>MONKEY LINKS</h3>
    ...

    </div>

    <div id="main">


    ....

    <div style="clear:both"></div>

    .....
    </div>

    </div>

    </body>
    </html>

    Thanks again for your help


  •  

    Posting Permissions

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