Raising the Navigational Bar

Discussion in 'Web Design' started by MarkStrobel3367, Jul 5, 2012.

to remove all ads.
  1. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    On my site, http://www.strongfamilies.us, I am trying to raise the navigational bar on the left of the page to touch the horizontal blue bar. Right now, there is a small gap between the two. Does any one know how I can raise this navigational bar a bit? Thanks.
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    remove the top padding from #content
     
  3. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    Hi Chris. Thank you for your reply. When I removed the top padding, the navigational bar went too far to the left and the footer messed up. However, I began experimenting with the top values and found that top: -10px; did the trick. Now the bar looks fine. Thanks, Chris. Another problem resolved!
     
  4. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Try not to use negative values.

    Here you go (line 12 of nav.css):

    #main_nav ul
    {
    margin: 0px;
    padding: 0px 10px 10px 10px;
    }
     
  5. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    Hi Lou. Thank you for your reply. Are you saying that I should return top: to 0px while using

    #main_nav ul
    {
    margin: 0px;
    padding: 0px 10px 10px 10px;
    }
    ?

    If it works, what is the harm in using negative values? Thanks.
     
    Last edited: Jul 7, 2012
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    The potential "harm" in using negative values is that you disrupt the normal flow for everything following that element, which can cause problems. Especially if floats or positioning is being used later in the flow of elements.

    Using positioning and negative margins is fine just as long as you DO understand the implications and possible pitfalls of using these properties and values.
     
  7. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    What are the potential problems that could occur? So far, I don't see any problems.
     
  8. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    The problem is that the website won't properly validate. Search engine crawlers will see negative values and assume that something is messed up on the site, thus causing them to "hiccup" and leave, which means they won't crawl through your site deeply enough.

    Regarding my code:

    #main_nav ul
    {
    margin: 0px;
    padding: 0px 10px 10px 10px;
    }

    You should completely replace your code with what I have. If you use padding the way I do, you will see 4 values. The first one Is the padding for the top, second for the right, third for the bottom, and fourth for the left. So when you were using padding: 10px; you are actually setting the padding value for the top, right, bottom, and left (all in one). My code just makes it so that there is no top padding (the 0px in the first value).

    -Louis
     
    Last edited: Jul 8, 2012
  9. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Mark,

    You seem to be having problems fairly often on this website. I seem to remember helping you with it a couple times before, and it's usually a positioning thing. Is it possible that you've used negative values elsewhere and it has caused the very problems you're asking about?

    Chris makes a very valid point that if you aren't fully aware of how other elements will react, you need to reconsider using negative values. I'll take it a step further: negative values should never be reactionary. In other words, if you're using it to push elements around in a very specific way for a well fore-thought purpose, that's fine. But, if you're using them to fix something that's broken, there's probably another mistake somewhere else.

    "Why does it matter if it works?", you might say. I'd say once you're trying to add another element and it jacks it up, you'll find out. Something else somewhere is going to break. Then, you're troubleshooting that. And now your positioning is so convoluted that you can't troubleshoot it at all. You have to just continue the same broken system of pushing things around with offset values.
     
  10. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    From the spec:
     
  11. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
  12. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I'm thinking that's more a problem with the validator expecting a number, but getting a "-" sign.
     
  13. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Negative values are not allowed for PADDING, but for positional properties and margins the are perfectly valid.

    And what difference does using the W3c spell checker make??


    AND

    One thing you need to know about positioning elements is that it is NOT to locate an element IN a particular position, it is used to push an element OUT of it's natural position.
     
    Last edited: Jul 8, 2012
  14. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    Hi Lou. I restored the following code on layout.css to a positive value:

    #content {

    position: relative;
    top: 0px;
    padding: 10px;

    and added your coding:

    #main_nav ul
    {
    margin: 0px;
    padding: 0px 10px 10px 10px;
    }

    to the nav.css file. However, this has had no effect to the navigational bar. I don't plan to return to the negative value because I noticed the 'back to top' coding when viewing with IE didn't work properly as a direct result of the negative value. Do you have any other suggestions as to how I can raise the navigational bar to touch the horizontal bar? Thanks.
     
    Last edited: Jul 9, 2012
  15. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    Hi Lou. I restored the following code on layout.css to a positive value:

    #content {

    position: relative;
    top: 0px;
    padding: 10px;

    and added your coding:

    #main_nav ul
    {
    margin: 0px;
    padding: 0px 10px 10px 10px;
    }

    to the nav.css file. However, this has had no effect to the navigational bar. I don't plan to return to the negative value because I noticed the 'back to top' coding when viewing with IE didn't work properly as a direct result of the negative value. Do you have any other suggestions as to how I can raise the navigational bar to touch the horizontal bar? Thanks.
     
  16. MarkStrobel3367

    MarkStrobel3367 Member

    Messages:
    108
    Hi Ronald. Thank you so much for your reply. In reviewing the css files, I noticed that the nav.css has one negative value:

    #main_nav {
    background-color:#99CCFF;
    float: left;
    height: auto;
    left: -10px;
    overflow: hidden;
    position: relative;

    This is the only negative value that I could find in all three css files. I honestly don't know if I changed this value or if it was done by the previous web designer. Do you think that this negative value might be causing me positioning problems? If so, do you have any suggestions as to what code I should use to replace this negative value? Thanks.
     
  17. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Negative values can be a problem, but they won't necessarily be the only problem.
     

Share This Page