SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with flyout nav links

    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_flo..._work_file.asp

    Code from Menu Nav html page is below:

    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="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:

    Code:
    
    
    #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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You just need to remove this part of the selector.
    Code:
    #nav dt b, #nav dt a
    You're styling both the <a> and the <b> tags which is why the border / padding is doubled.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean on the css style sheet, I need to delete the following?


    Code:
    #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. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    If that works, then yes

  5. #5
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed the following code:

    #nav dt b, #nav dt a {display:block;
    color:#fff;
    height:25px;
    line-height:35px;
    padding-left:10px;
    cursorointer;
    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. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Sorry, You just need to remove a part of the selector, not the entire rule.

    Code:
    #nav {padding:0; margin:0 0 0 13px; background:#d4dedc;}
    #nav a:hover {text-decoration:underline;}
    #nav dt 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. #7
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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. #9
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??


    Code:
    $(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>
    Thanks,
    sarb

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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. #11
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    No problem at all,

    Glad I could help,


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
  •