asked on Navigation button mouseover effect pops above nav bar
Stupid question. How do I get the blue mousever effect to display above nav bar? The nav bar div tag seems to be blocking it from going above.
html
http://nsitedesigns.com/nsitedesigns/cbrf/test.html
screenshot
http://screencast.com/t/pmCFtkT7PoI
html
http://nsitedesigns.com/nsitedesigns/cbrf/test.html
screenshot
http://screencast.com/t/pmCFtkT7PoI
CSSWeb DevelopmentHTML
Last Comment
David S.
Set the nav bar div to relative the other the absolute and use a the position top to set how far above you want it
ASKER
Set the nav bar div to relative the other the absolute and use a the position top to set how far above you want it
What do you mean "the other the absolute"
What do you mean "the other the absolute"
for #nav li a:hover change padding to:
padding: 9px 18px 3px;
Cd&
padding: 9px 18px 3px;
Cd&
ASKER
COBOLdinnie
I did what you suggested but it didn't work. The div tag isn't letting the nav blue bar extend UP beyond the div tag, it is pushing the blue extention DOWN and the text is moving down with it. Do I need to increase the height of the div?
I did what you suggested but it didn't work. The div tag isn't letting the nav blue bar extend UP beyond the div tag, it is pushing the blue extention DOWN and the text is moving down with it. Do I need to increase the height of the div?
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Kravmir,
I tried your solution and it worked on the main nav bar. However, when I tried to bump it up to -8px on the margin-top for the #nav li a:hover it showed part of the main nav bar on the bottom margin. In other words, the mouseover moved up but so did the bottom of the mouseover button. Any idea how to fix that?
In addition, my drop downs now have this same effect applied, namely a large top margin. I went into #nav li:hover ul {display:block;} and put a margin-top of 0px but that didn't fix it so I took it back out.
Here is link to test document.
http://nsitedesigns.com/nsitedesigns/cbrf/test1.html
p.s. Is Dreamweaver CS4 THAT outdated that I should be worried?
I tried your solution and it worked on the main nav bar. However, when I tried to bump it up to -8px on the margin-top for the #nav li a:hover it showed part of the main nav bar on the bottom margin. In other words, the mouseover moved up but so did the bottom of the mouseover button. Any idea how to fix that?
In addition, my drop downs now have this same effect applied, namely a large top margin. I went into #nav li:hover ul {display:block;} and put a margin-top of 0px but that didn't fix it so I took it back out.
Here is link to test document.
http://nsitedesigns.com/nsitedesigns/cbrf/test1.html
p.s. Is Dreamweaver CS4 THAT outdated that I should be worried?
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Kravmir,
You stated, "... I consider XHTML 1.0 Transitional to be fairly obsolete." What would you suggest?
I will try modifying the code you recommended shortly.
You stated, "... I consider XHTML 1.0 Transitional to be fairly obsolete." What would you suggest?
I will try modifying the code you recommended shortly.
I recommend the HTML5 doctype, regardless of how many new HTML5 features you intend to use at present.
<!DOCTYPE html>
ASKER
Thanks.
Maybe this is another question, if so, let me know.
I understand you recommend I not use the following which automatically comes up when I open a new page in Dreamweaver CS4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I don't understand what I replace? Does all this get replaced with <!DOCTYPE html>
Maybe this is another question, if so, let me know.
I understand you recommend I not use the following which automatically comes up when I open a new page in Dreamweaver CS4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I don't understand what I replace? Does all this get replaced with <!DOCTYPE html>
Yes. The older doctypes included a lot more information, but it was decided that it was really not necessary for HTML documents, so they made the new much shorter document type declaration.