Raising the Navigational Bar

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!
 
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:

chrishirst

Well-Known Member
Staff member
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.
 

LouTheDesigner

New Member
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:

ronaldroe

Super Moderator
Staff member
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.
 

ronaldroe

Super Moderator
Staff member
I'm thinking that's more a problem with the validator expecting a number, but getting a "-" sign.
 

chrishirst

Well-Known Member
Staff member
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:
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:
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

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.
 
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.

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.
 
Top