SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Centering Div

Hybrid View

  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Centering Div

    I have a series of links at the top of my page (just under ad) but they are not centered. They were at one time, but I must have done something to screw it up. Hoping someone can help...


    http://www.stoutstandards.com/Latest.html

    Thanks...

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    your code may have MANY other bugs which may be playing havoc with your page, however I would guess this to be the issue



    #navbar {
    margin: 0 ;
    padding: 0;
    height: 1em; }

    you should have: margin: 0 auto; and width: ( the width of you page here);



    hope that helps

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dresden, I know my code stinks and is a hodgepodge....Took a few evening classes in html at a junior college about three years ago, and have been winging it ever since.
    I am embarrassed but at the same time I am 72, and just can't afford to take more classes.

    I did try your suggestion and it didn't make a difference.. Thank you however for replying....you were the only one.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,621
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hi again Barnum. Here's what you could do:

    In latest.html at line 133, change this:

    Code:
    #navbar {
    margin: 0;
    padding: 0;
    height: 1em;
    }
    to this:

    Code:
    #navbar {
    margin: 0;
    padding: 0;
    text-align: center;
    }
    Then at line 140, change this:

    Code:
    #navbar li {
    list-style: none;
    float: left;
    }
    to this:

    Code:
    #navbar li {
    list-style: none;
    display: inline-block;
    }
    As a final act, add this somewhere amid those styles:

    Code:
    #navbar li li {
      display: block;
    }


Bookmarks

Posting Permissions

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