Need help with a nav bar, quick fix!

Discussion in 'CSS' started by GH Fever, Jan 10, 2011.

0
  1. #1
    Trying to center my nav bar and having a really, really difficult time. It's pushed to the left just the slightest bit and any attempts to center it make the links "stack" on top of each other. It's the most frustrating thing! Could anyone help?

    http://115media.net/style.css is the stylesheet.

    Thank you
     
    GH Fever, Jan 10, 2011 IP
  2. ARTidas

    ARTidas Active Member

    Messages:
    177
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Instead of <nav> tag use div... and then text-align: center;

    Cheers,
     
    ARTidas, Jan 10, 2011 IP
  3. GH Fever

    GH Fever Peon

    Messages:
    432
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    <div style="text-align: center;">

    That didn't work :(
     
    GH Fever, Jan 10, 2011 IP
  4. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The reason it looks nudged to the left is because the heading below it is nudged to the right.

    Remove margin-left:7px; from line the following on line 179 of your stylesheet:

    
.post h2, .post h2 a {
  color: #333333;
  display: block;
  font-size: 54px;
  font-weight: bold;
  letter-spacing: -1px;
  margin-left: 7px;
}
    Code (markup):
    Also, remove all of the inline styles and put the class back into your navigation DIV the way it was before.
     
    Dodger, Jan 10, 2011 IP
  5. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Sorry on the nav class. You are using Html5 elements, in a mostly non-Html5 world. If you want to use them, then you will still have to serve up Html4 pages for the rest of us.

    Suggest that you change <nav> to <div class="nav"> and style appropriately from there.
     
    Dodger, Jan 10, 2011 IP
  6. GH Fever

    GH Fever Peon

    Messages:
    432
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Arghhh now the whole layout is off, how did that happen?
     
    GH Fever, Jan 10, 2011 IP
  7. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It looks like you are using a "grid" layout. Where is your stylesheet for that? Your <head> says the stylesheet is at css/960.css, but that is getting a 404 error not found.
     
    Dodger, Jan 10, 2011 IP
  8. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #8
    Now THAT solution is the ugliest and wrongest ever!

    Never use text-align to align a block!

    In that case use an ID or CLASS and use width with margin:0 auto

    But as I can see here is something generally wrong (404 for 960.css).
     
    CSM, Jan 11, 2011 IP
  9. GH Fever

    GH Fever Peon

    Messages:
    432
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I got the layout stacked properly again and removed the line "margin-left: 7px;" and renamed it simply <div>

    However, it's still not working - any ideas?
     
    GH Fever, Jan 11, 2011 IP
  10. GH Fever

    GH Fever Peon

    Messages:
    432
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Any ideas?
     
    GH Fever, Jan 12, 2011 IP