Need help with flyout nav links

HTML & CSS
1

Hi,

I have a css navigation problem. I have a drop down navigation on my site. The links with drop down links work fine. But my two stand alone links (Home and Contact - the first and last link) won’t line up correctly. Could anyone help me with this issue? Not sure how to correct it…

web page link is:

http://www.oaknoll.com/test/test_floating_index_work_file.asp

Code from Menu Nav html page is below:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oaknoll - An Adult Retirement Community</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords"
 content="oaknoll, iowa city, retirement, elderly, iowa, LifeCare, retirement community, nursing home, apartment, independent living, resident, geriatric, aging, community, retire, retired, elder,  health care, assisted living, nursing care">
<meta name="Description"
 content="Oaknoll is an adult retirement community in Iowa City, Iowa.">
<meta name="robots" content="index,follow">
</head>

<body>

         <div id="navcap">
          <img src="images/navigation-cap.gif" width="200" height="18" alt="navigation cap" />
         </div><!--end-navcap-->

 <div id="nav">

	<dt> <a href="test_floating_index_work_file.asp"><b>Home</b></a> </dt>

	

    <dt><b>LifeCare</b></dt>

	<dd>
		<ul>
			<li><a href="test_independent_living.asp">Independent Living</a></li>
			<li><a href="test_assisted.asp">Assisted Living</a></li>
			<li><a href="test_health_center.asp">Health Center</a></li>
			
			

		</ul>
	</dd>
	<dt><b>Health Services</b></dt>
	<dd>
		<ul>
			<li><a href="test_social_services.asp">Social Services</a></li>
	        <li><a href="test_health_services.asp">Health Services</a></li>
			<li><a href="test_physical_therapy.asp">Physical Therapy</a></li>
            <li><a href="test_dietician.asp">Dietician</a></li>
          <li><a href="test_companions.asp">Companions</a></li>
		</ul>
	</dd>
	
    <dt><b>Amenities</b></dt>
	<dd>
		<ul>
			<li><a href="test_dining.asp">Dining Services</a></li>
			<li><a href="test_transportation.asp">Transportation</a></li>
			<li><a href="test_theater.asp">Movie Theater</a></li>
			<li><a href="test_internet_cafe.asp">Internet Cafe/Coffee Shop</a></li>
			<li><a href="test_game_rooms.asp">Game Rooms</a></li>
            <li><a href="test_libraries.asp">Library</a></li>
            <li><a href="test_sewing.asp">Sewing Room</a></li>

	  </ul>

	</dd>
	<dt><b>Recreation/Wellness</b></dt>
	<dd>
		<ul>
			<li><a href="test_wellness.asp">Wellness</a></li>
            <li><a href="test_programs.asp">Programs</a></li>
			<li><a href="test_pool.asp">Pool/Spa</a></li>
			<li><a href="test_salon.asp">Salon</a></li>
      </ul>
	</dd>
	
    <dt><b>About Oaknoll</b></dt>
	<dd>
		<ul>
			<li><a href="test_history.asp">History</a></li>
            <li><a href="test_resident_council.asp">Oaknoll Resident Council</a></li>
            <li><a href="test_board_of_directors.asp">Board of Directors</a></li>
            <li><a href="test_foundation_board.asp">Foundation Board</a></li>
	  </ul>
	</dd>




<dt><b>Services</b></dt>
	<dd>
		<ul>
			<li><a href="test_maintenance.asp">Maintenance</a></li>
			<li><a href="test_housekeeping.asp">Housekeeping</a></li>
			<li><a href="test_laundry.asp">Laundry</a></li>
			<li><a href="test_technology.asp">Technology</a></li>
            <li><a href="test_banking.asp">Banking</a></li>
		</ul>
   </dd>




    <dt><b>Employment</b></dt>

	<dd>
		<ul>
        <li><a href="test_employment.asp">Employment</a></li>
			<li><a href="test_jobopenings_new_website.asp">Current Openings</a></li>
			<li><a href="pdf/Application_2012_for_website.pdf" target="blank">Application</a></li>
		</ul>
	</dd>


<dt><a href="test_contact.asp"><b>Contact Us</b></a></dt>


 </div>

  <div id="ldirector">
	  <a href="test_executive_director.asp"><p>Patricia Heiden ~ <br />
            A Director With a Dream. <br/><br/>
            Click here to learn more...</p></a>
</div> <!--director-end-->


<div id="ladministrator">
<a href="test_administrator.asp"><p>Meet <br/>
Steve Roe, <br />
			    our Administrator</p></a>
</div> <!--administrator-end-->
	


</body>
</html>

CSS CODE IS BELOW:





#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
#nav dt b, #nav dt a {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}
#nav dt b {background:url(../images/mini_leaf.jpg) no-repeat left center;
padding: 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;

}
#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; line-height: 1.5;}

Any help you could provide would really be appreciated. I’m sort of stuck on this one…

Thanks,
Sarb

2

Hi,

You just need to remove this part of the selector.


#nav dt b[B], #nav dt a[/B]

You’re styling both the <a> and the <b> tags which is why the border / padding is doubled.

3

Do you mean on the css style sheet, I need to delete the following?



#nav dt b {background:url(../images/mini_leaf.jpg) no-repeat left center;
padding: 10px 10px;
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;

}
#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; line-height: 1.5;}
4

If that works, then yes :slight_smile:

5

I removed the following code:

#nav dt b, #nav dt a {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 10px 10px;
background: #333399 url(…/images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}

But it didn’t seem to have any affect…

Sarb

6

Sorry, You just need to remove a part of the selector, not the entire rule.


#nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
#nav a:hover {text-decoration:underline;}
[B]#nav dt b[/B] {display:block;
color:#fff;
height:25px;
line-height:35px;
padding-left:10px;
cursor:pointer;
width:173px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase; 
padding: 10px 10px; 
background: #333399 url(../images/mini_leaf.jpg) no-repeat center right;
border-left: 5px solid #7c7ca5;
border-bottom: 1px solid #fff;
}
#nav dt a {color:#fff; text-decoration:none;}
#nav dd { width: 200px; padding: 5px 0 15px 0; margin:0; background-color:#d6e1de; }
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font: 10px Verdana, Arial, Helvetica, sans-serif;
color:#333399; text-decoration:none; line-height: 1.5;}
7

Ok, this is odd. I corrected the code as you suggested and the links finally have lined up beautifully -YAE!!! But when I select the “contact” link it does not take me anywhere. Same with the “Home” link if I am on another page. Not sure why they aren’t working now…They look beautiful though :-)…

Sarab

8

That’s a problem with your javascript.

You’re suppressing the click events to open up the sub navigation.

If you remove return false; it will work.
You don’t need to prevent the click event from doing anything when you click the dt’s.

9

Ok, I don’t work with java script often, so when I do, I tend to massacre the whole thing. So, just to be sure I am understanding you correctly. If I remove the text in green, it should work correctly.

Do I just remove that from the “Home” and “Contact” pages, or from the javascript on ALL the pages??



$(document).ready(function(){
	if($("#nav")) {
		$("#nav dd").hide();
		$("#nav dt b").click(function() {
			if(this.className.indexOf("clicked") != -1) {
				$(this).parent().next().slideUp(200);
				$(this).removeClass("clicked");
			}
			else {
				$("#nav dt b").removeClass();
				$(this).addClass("clicked");
				$("#nav dd:visible").slideUp(200);
				$(this).parent().next().slideDown(500);
			}


			[COLOR="#008000"]return false;
		});[/COLOR]

	}


});
</script>

Thanks,
sarb

10

Yes, you’ll need to remove that script from all pages.

If that script is identical on all pages you should move into an external .js file.

11

Yes, it worked!!!

Thank you so much for your help Mark! I feel like I have a pretty good handle on things, but in every project I come across something that causes me to hit a wall - always learning. Since I am “freelance” I really don’t know any other web developers so I really depend on the help I receive from these forums. It’s people like you who make a difference. You are wonderful. I didn’t think to put the java script as an external sheet. So much easier. Will do that on future projects.

Again, thank you for your time and patience! I will tweak the rest of the pages this morning and actually get outside for bit this afternoon now that this hurtle is over - thanks to you.

Have a wonderful weekend…
Sarahb

12

No problem at all,

Glad I could help,