problem with navigation include

**sarb** · Feb 9, 2012 09:03

Hi,

I have created a web site and the navigation menu is in the form of an include:



The menu navigation is working fine, except for one problem. The two links that are stand alone (Home and Contact) won't align with the rest of the links. I can't figure out why. Can anyone help me with this problem?

web page can be viewed at:

http://www.oaknoll.com/test/test_flo..._work_file.asp

page code is:

Code:


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

<!-- include Cycle plugin -->

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	    	
			});


   
$('#s3').cycle({ 
    fx:    'fade', 
	
    speed:  8500,
	
	cleartype: 1,
cleartypeNoBg: false,
height: 'auto',
containerResize: 0,

timeout: 2000,

sync: 0,

fadeOut:'slow', 



nowrap: 0,
randomizeEffects: 0,
pause: 2
	


});
	
	
	


});
</script>

		
  <!--Vertical Slider Navigation javascript-->    
    




  <script type="text/javascript">
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

$(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);
			}
			return false;
		});
	}
});
</script>





<!--endofVerticalSliderNavigationjavascript-->    
  
<!--tocorrecttheunsightlyFlashofUnstyledContenthttp://www.bluerobot.com/web/css/fouc.asp-->
	<script type="text/javascript"> </script>
	

	

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->


<link rel="stylesheet" href="css/test_floating_index.css" type="text/css" />
<link rel="stylesheet" href="css/test_nav_css.css" type="text/css" />

</head>

<body>

<div id="container">

 <!--#include virtual="test/includes/header_asp.asp"-->
		
      
       
        
		<div id="main">
         
         
        <div id="box1">
       <div class="slideshow">
		<img src="images/sls/building.jpg" width="400" height="300" alt="Oaknoll Entrance" class="first" />
		<img src="images/sls/taichi.jpg" width="400" height="300" alt="tai chi class"/>
        <img src="images/sls/movie_theater.jpg" width="400" height="267" alt="movie theater"/>
        <img src="images/sls/swimming_pool.jpg" width="400" height="267" alt="swimming pool"/>
        <img src="images/sls/vans.jpg" width="400" height="300" alt="Oaknoll vans" />
	   </div> <!--end-of-slideshow-->
        </div><!--end-box-1-->
        
        <div id="box2">                
   	  <div class="buttonbox"><img src="images/4_special_buttons.jpg" alt="internet buttons" width="181" height="300" border="0" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="rect" coords="14,8,178,70" href="http://www.touchtown.tv/tv/tv/webshow/tv1.jsp?tag=OAKNOLL_WEB" target="_blank" alt="Link to Oaknoll Announcements" border="none" />
          <area shape="rect" coords="14,86,177,145" href="http://www.facebook.com/Oaknoll?ref=sgm" target="_blank" alt="Link to Oaknoll's Facebook Page" border="none"/>
          <area shape="rect" coords="16,161,172,213" href="http://oaknoll.blogspot.com/" target="_blank" alt="Link to the Oaknoll Blog" />
          <area shape="rect" coords="18,233,175,297" href="hawkeye.asp" alt="Link to Golden Hawkeye Birthday Club" />
        </map>
   	  </div><!--BUTTONBOX--> 
        </div><!--end-box-2-->
        
  
   
   <h1 style="clear:left;">Feels like home...</h1>
   <p align="left">     <img src="images/relaxing_afternoon.jpg" width="200" height="150" alt="Relaxing afternoon" class="imgleft" />     We invite you to be a part of the Oaknoll Community               and pursue your lifestyle with the assurance of LifeCare. LifeCare               is a continuum of care from independent living to assisted living               to on-site nursing care (if the need arises). At Oaknoll, you do not               pay escalating costs if you need assisted living or on-site nursing               care services. With LifeCare you pay the same charges you would living               independently in your apartment. LifeCare is the difference.</p>
   <p align="left"><img src="images/reading_in_the_library.jpg" width="200" height="123" alt="Reading in the Library" class="imgright" /></p>
   <h3>&nbsp;</h3>
   <h3>Think about it and <br />
     come home to Oaknoll!</h3>
   <p>&nbsp;    </p>
   <p>&nbsp;</p>
    
        
</div>
        
        
     
      

   <!--#include virtual="test/includes/menu_asp.asp"-->

 
        
	 <!--#include virtual="test/includes/footer_asp.asp"-->
  
 
  </div><!--end-of-main-->
</div><!--end-of-container-->
</body>
</html>

Menu include code is:

Code:

<!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="#">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>

Any help would be appreciated...

Thank you,
sarb

**webber123456** · Feb 9, 2012 13:31

This is not really an ASP problem. You may want to move this to a design/html/css forum to get assistance.

**raw10** · Feb 9, 2012 13:31

I think your issue is with the fact that those two nav entries (home and contact) actually are links. You're styling both <b> and <a> with the same padding and background elements. If you were to add links to the other nav entries, they would also have the same problem with them.

Add links to the other elements, then remove padding from the <b> in your CSS (test_nav_css.css line 5). Try changing

Code:

#nav dt b, #nav dt a

...to

Code:

#nav dt a

Then, add links to the other menu items as well to make sure they get the appropriate styles.

It looks like you got this flyout script from Stu Nichols, but I personally don't like how it's using a definition list instead of nested unordered lists. I find the markup too complicated and not exactly semantic (it's a list of links, not a definition list). You should be able to do nested menu items with flyouts only using anchors and unordered lists. Just my two cents. :-)

-Rob

User Tag List

Thread: problem with navigation include

Thread Tools

Display

Hybrid View

problem with navigation include

Bookmarks

Bookmarks

Posting Permissions