Solved

Navigation button mouseover effect pops above nav bar

Posted on 2013-01-04
12
313 Views
Last Modified: 2013-01-07
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
0
Comment
Question by:nsitedesigns
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 6

Expert Comment

by:stevepwales
ID: 38745128
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
0
 

Author Comment

by:nsitedesigns
ID: 38745164
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"
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38745861
for #nav li a:hover change padding to:
padding: 9px 18px 3px;

Cd&
0
 

Author Comment

by:nsitedesigns
ID: 38747366
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?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 50 total points
ID: 38748591
Yeah it looks like with that transitional doctype, it will need the height increased as well for the #nav li a:hover rule... or you could try setting line-height to a larger value.

Also try setting z-index:10 to make sure it stays on top.

Cd&
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 450 total points
ID: 38748899
Since browsers are not using "quirks mode", the doctype is not the issue here. (Though I consider XHTML 1.0 Transitional to be fairly obsolete.)

There are two issues here. The first is that "#nav" has "overflow:hidden" which will hide the top of the links, since you want them to extend beyond the top of the bar. To keep "#nav" from collapsing to 0 height, you can float it and give it 100% width instead.

The second thing is that increasing the top padding alone will only shift the link down. If you want the top to move up to account for the increase in top padding, you need to use a negative top margin. (And to avoid problems in older versions of IE, it's best to give "position:relative" to elements with a negative margin.)

#nav li a {
color:#fff;
font-weight:bold;
display:block;
padding:4px 18px 3px 18px;
text-decoration:none;
position: relative;
}	

#nav li a:hover {
   color: #fff;
   background-color: #809eb2;
padding: 9px 18px 3px;
margin-top: -5px;
    }

Open in new window

0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:nsitedesigns
ID: 38751161
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?
0
 
LVL 42

Accepted Solution

by:
David S. earned 450 total points
ID: 38751673
To increase the negative top margin, you would need to increase the top padding as well. So in this case the padding would be "padding: 12px 18px 3px".

The margin was not given to <ul>s; it was given to <a>s. Add this new rule to your stylesheet:
#nav li ul li a:hover {
	margin-top: 0;
	padding: 4px 18px 3px;
}

Open in new window

The editor is (or at least should be) irrelevant. Don't let your editor make decisions about your markup for you. I assume there is a way to use whatever doctype you choose in DreamWeaver. This seems to give information on that: http://forums.adobe.com/thread/886172
0
 

Author Comment

by:nsitedesigns
ID: 38751702
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.
0
 
LVL 42

Expert Comment

by:David S.
ID: 38751802
I recommend the HTML5 doctype, regardless of how many new HTML5 features you intend to use at present.
<!DOCTYPE html>

Open in new window

I also recommend that you start using some of the new HTML5 input types, especially "number", "email", "url", and "tel", since they are quite helpful when using mobile devices (and those 4 types gracefully degrade to "text" in older browsers).
0
 

Author Comment

by:nsitedesigns
ID: 38752010
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>
0
 
LVL 42

Expert Comment

by:David S.
ID: 38752054
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.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now