SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question about centering an element

    I want to center my nav. bar on my page, but I don't know how to do it other than just typing, left: (so many)px;, until it looks right. I tried that but then it is not centered correctly in other browsers when I tested it. Can anyone tell me how to center it? Thank you.....

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's a static positioned ( not fixed/absolute ) or relative without any specified direction, and the width specified is less than the parent elements width then margin:0 auto; would do.

    Code:
    div.nav { margin:0 auto; width:200px; }
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    no, id didn't work, it's a absolute positioned element and the page is 1008px wide. Thanks if you can still help me. thanks

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does it necessarily need to be absolutely positioned? I wouldn't recommend it unless it's a logical decision in regards with source order and such - if you remove it and put a width it should work fine.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I changed it to relative positioning but it doesn't work either. I'm new to css, so I don't know all of what you were talking about. Here's the code that I'm using. This might be a stupid question, but like I said I don't know css very well, just read a book. Thanks for your help.
    #navbar{

    position:relative;
    top:240px;
    letter-spacing:.2em;
    width:1008px;
    text-align:center;

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where's the margin:0 auto part? Please take another look at the snippet above.
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that too but no luck here's what it looks like:

    #navbar{

    position:relative;
    top:240px;
    letter-spacing:.2em;
    margint:0 auto;
    width:1008px;
    text-align:center;

  8. #8
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you centering the contents of #navbar? #navbar itself should be centered now. I think it's about time you linked us to this page for a more definitive answer.
    Cross browser css bugs

    Dan Schulz you will be missed

  9. #9
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Canada
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I take it you figured it out, cause its centered now. Great looking page by the way.

  11. #11
    SitePoint Enthusiast weich1213's Avatar
    Join Date
    Nov 2008
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


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
  •