SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    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,095
    Mentioned
    28 Post(s)
    Tagged
    1 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
    202
    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,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    If that works, then yes

  5. #5
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    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,095
    Mentioned
    28 Post(s)
    Tagged
    1 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
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 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.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    202
    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

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 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
  •