SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with navigation include

    Hi,

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

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

    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

  2. #2
    SitePoint Guru
    Join Date
    Jun 2007
    Posts
    675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is not really an ASP problem. You may want to move this to a design/html/css forum to get assistance.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •