www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS Centering Issues

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    5

    CSS Centering Issues

    I am having some issues with centering my webpage with css. I have set the margins as auto and the width as 760px, and my page is somewhat centered. However the contents still little bit right of the page. I'm including the code below. Any help will be greatly appreciated.


    body {
    background-image:url(../images/slice.gif);
    background-repeat:repeat-x;
    }
    #wrap {
    margin-left:auto;
    margin-right:auto;
    width:760px;
    }

    #header img {
    float:left;
    margin:-10px 0px 0px 0px;
    }
    #header ul {
    float:left;
    list-style:none;
    }
    #header li {
    float:left;
    display:inline;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    font-size:24px;
    padding:0px 32px 0px 0px;
    }
    #header p{
    float:right;
    color:#FFF;
    font-size:24px;
    text-decoration:underline;
    font-family:Arial, Helvetica, sans-serif;
    margin: 16px 0px 0px 0px;
    }

    #header li a {
    text-decoration:none;
    }
    #header li a:visited {
    float:left;
    display:inline;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    font-size:24px;
    padding:0px 30px 0px 0px;
    }
    #header li a:hover {
    text-decoration:underline;
    color:#FFF;
    }
    #header p a:hover {
    color:#0099CC;
    }
    #header #social {
    float:right;
    margin: -100px 0px 0px 0px;
    }
    #header p a:visited {
    float:right;
    color:#FFF;
    font-size:24px;
    text-decoration:underline;
    font-family:Arial, Helvetica, sans-serif;
    margin: 16px 0px 0px 0px;
    }

  2. #2
    Join Date
    Mar 2012
    Posts
    63
    body
    {
    margin:auto;
    width:100%;

    }
    .fiv
    {
    margin:auto;
    width:768px;
    border:1px solid red;
    background:center;
    }
    <html>
    <body>
    <div class="fiv"> HI, welcome </div>

    </body>
    </html>

  3. #3
    Join Date
    Apr 2012
    Posts
    5
    Unfortunately this did not fix my problem, it did however move my contents upwards by a bit. I'm guessing one of my margins that I set below may have moved my contents right

  4. #4
    Join Date
    Mar 2012
    Posts
    63
    have you provided margin to "content" div?

    can you paste all the codes?

  5. #5
    Join Date
    Apr 2012
    Posts
    5
    sure my html code is included below, and i have set auto margins for the content div

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Site</title>
    <link href="style/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="wrap">
    <div id="header">
    <a href="#"><img src="images/Logo.gif" /></a>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    <p><a href="#">#Wheatley2012</a></p>
    <ul id="social">
    <li><a href="http://tinyurl.com/cerxupe"><img src="images/google_32.png" /></a></li>
    <li><a href="https://www.facebook.com/wheatley.laboratories"><img src="images/facebook_32.png"/></a></li>
    <li><a href="http://ps3.ign.com/objects/064/064329.html"><img src="images/playstation_32.png" /></a></li>
    <li><a href="http://store.steampowered.com/app/620/"><img src="images/steam_32.png" /></a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

  6. #6
    Join Date
    Mar 2012
    Posts
    63
    add "text-align:center;" on #wrap class

  7. #7
    Join Date
    Apr 2012
    Posts
    5
    That did not fix it either. I think one of the margins I set below is causing this but I can't determine which one

  8. #8
    Join Date
    Apr 2012
    Location
    Tampa, FL
    Posts
    2
    Code:
    #wrap {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:760px;
    }
    If that does not work try:
    Code:
    #wrap {
    position:relative !important;
    margin-left:auto;
    margin-right:auto;
    width:760px;
    }

  9. #9
    Join Date
    Apr 2012
    Posts
    5
    that didnt work either

  10. #10
    Join Date
    Apr 2012
    Posts
    34
    #wrap {
    margin: 0 auto;
    width:760px;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles