SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unable to highlight the current page that has li and and a ul

    This is what i am using as my page, and i only want to hihglight the top part i.e only test and not the lowers when i include the current page hihglight class to the menu the whole section is hihglighted, is there a way to hihglight just the li and not the ul under the li that are contained within the same class.

    Hihglight.gif


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    	<head>
    		<title>Test</title>
    		<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <style type="text/css" media="screen">
    /*
    horizontal  menu coding 
     */
     
    #nav {
    	float: left;
    	margin: 0 0 1em 0;
    	padding: 0;
    	list-style: none;
    	
    	
    	}
    #nav li {
    	float: left; }
    #nav li a {
    	display:block;
    	padding: 7px 23.9px;
    	text-decoration: none;
    	font-family:"Arial";
    	color: white;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px  dashed #ccc;
    	font-size: 14px;
    	background-color: #3f6fb7; }
    	
    	
    }
    #nav li a:hover {
    	color: #3f6fb7;
    	background-color: #d1cf9f; } 
    	
    	
    #nav li.current-pageHorizontal a 
      {
        background:#d1cf9f;
        color: white;
    	}
    	
    #nav ul.current-pagelowerHorizontal a 	
     {
        background:#Black;
        color: white;
    	}
    /*
    Print  menu coding 
    */
    </style>
    
    	</head>
    	<body onLoad="preloadImages();" bgcolor="#ffffff">
    			<div class="ts-1-13">
    				<ul id="nav">
    					<li>
    						<a href="testnewMenu.html">test</a>
    						
    						<!--for the new menu -->
    						<ul id="nav"  class="current-pageHorizontal">
    							<a href="XXX.html">Lower 1 </a>
    						</ul>
    						<ul id="nav">
    							<a href="XXX.html">Lower 2</a>
    						</ul>
    						<ul id="nav">
    							<a href="XXX.html">Lower 3 </a>
    						</ul>
    						<ul id="nav">
    							<a href="XXX.html"> Lower 4</a>
    						</ul>
    						<!--for the new menu ul under a list -->
    					</li>
    					<li>
    						<a href="XXX.html">Test2</a>
    						
    					</li>
                        <li>
    						<a href="XXX.cfm">test 3</a>
    						
    					</li>
    					<li>
    						<a href="About_Us.html">About Us</a>
    						
    					</li>
    			  </ul>
    		  </div>
    		  
    		  </body>
    </html>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This should solve it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Test</title>
    		<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <style type="text/css" media="screen">
    /*
    horizontal  menu coding 
     */
     #nav ul, ul#nav {
    	float: left;
    	margin: 0 0 1em 0;
    	padding: 0;
    	list-style: none;
    	}
    #nav li {
    	float: left; }
    #nav li a {
    	display:block;
    	padding: 7px 23px  9px;/* Correction: no such thing as fractional px*/
    	text-decoration: none;
    	font-family:"Arial";
    	color: white;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px  dashed #ccc;
    	font-size: 14px;
    	background: #3f6fb7; }
    	
    	
    #nav >li:hover> a{ /*this is the easy way*, but it doesnt support older IE, you would nned .js to do hovers on non anchors anyway*/
    	color: #3f6fb7;
    	background: #d1cf9f;  } 
    
    	
    	
    #nav li.current-pageHorizontal a 
      {
        background:#d1cf9f;
        color: white;
    	}
    #nav ul.current-pagelowerHorizontal a 	
     {
        background:#Black;
        color: white;
    	}
    
    </style>
    
    	</head>
    	<body onLoad="preloadImages();" bgcolor="#ffffff">
    			<div class="ts-1-13">
    				<ul id="nav">
    					<li>
    						<a href="testnewMenu.html">test</a>
    						
    						<!--for the new menu -->
    						<ul class="current-pageHorizontal">
    							<li><a href="XXX.html">Lower 1 </a></li>
    						</ul>
    						<ul >
    							<li><a href="XXX.html">Lower 2</a></li>
    						</ul>
    						<ul >
    							<li><a href="XXX.html">Lower 3 </a></li>
    						</ul>
    						<ul>
    							<li><a href="XXX.html"> Lower 4</a></li>
    						</ul>
    						<!--for the new menu ul under a list -->
    					</li>
    					<li>
    						<a href="XXX.html">Test2</a>
    						
    					</li>
                        <li>
    						<a href="XXX.cfm">test 3</a>
    						
    					</li>
    					<li>
    						<a href="About_Us.html">About Us</a>
    						
    					</li>
    			  </ul>
    		  </div>
    		  
    		  </body>
    </html>

    1) I changed the doc type, for good measure
    2) there are no decimal pixel measurements
    3) you had a and extra "}" in your CSS which Brockie all the rules below
    4) Just so you know, only LIs can be direct children of ULs ( you had As directly inside the UL.. a no-no)
    5) IDs must be unique ( unlike classes, you can only use them in a single element in the entire document)


    FOR IE6 support your CSS would be
    Code:
    /*this is the works for >=IE6*/	
    #nav li:hover a{ 
    	color: #3f6fb7;
    	background: #d1cf9f;  } 
    	
    #nav li:hover li a{ 
    	color: white;
    	background: #3f6fb7; }
    and you would need to tweak this to be able to work along side some script which will enable older IE to do hover on element other than anchors.

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the help but my problem still remains the same as described earlier as when I add the current page definition to the page, on hover the li is highlighted but I have to have the li highlighted by it. i.e. test only then when the user clicks on test and lower 1 I want test and lower 1 to be highlighted, as of now the whole li and the ul are highlighted instead of just the li i.e. only test, is that even possible to have only the li hihglighted and not the ul's that are a child of the li
    Thanks again

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Am a little confused as to your goal,

    IS what you want: for the top tier to highlight only OR for the top tier and the chosen lower item to highlight? ...

    If it's the latter just use this edit to the CSS
    Code:
    /*this is the works for >=IE6*/	
    #nav li:hover a, #nav li:hover li:hover a{ 
    	color: #3f6fb7;
    	background: #d1cf9f;  } 
    	
    #nav li:hover li a{ 
    	color: white;
    	background: #3f6fb7; }
    if you want .current-pageHorizontal to remain highlighted, even WITHOUT the user hovering... maybe this is what you wanted

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Test</title>
    		<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <style type="text/css" media="screen">
    /*
    horizontal  menu coding 
     */
     #nav ul, ul#nav {
    	float: left;
    	margin: 0 0 1em 0;
    	padding: 0;
    	list-style: none;
    	}
    #nav li {
    	float: left; }
    #nav li a {
    	display:block;
    	padding: 7px 23px  9px;/* Correction: no such thing as fractional px*/
    	text-decoration: none;
    	font-family:"Arial";
    	border-right: 1px solid #ccc;
    	border-bottom: 1px  dashed #ccc;
    	font-size: 14px;
    	}
    #nav li a, #nav .current-pageHorizontal li a, #nav .current-pageHorizontal:hover li a  {
    	background:  #3f6fb7 ; 
    	color: white;
    	}	
    
    #nav li:hover a, #nav .current-pageHorizontal  a, #nav .current-pageHorizontal:hover  li:hover a { 
    	color:  #3f6fb7;
    	background:   #d1cf9f;  } 
    	
    
    	
    #nav  .current-pageHorizontal  li.current-pageHorizontal  a , #nav  .current-pageHorizontal   li.current-pageHorizontal:hover  a {
        background:Black;
        color: white;
    	}
    </style>
    
    	</head>
    	<body onLoad="preloadImages();" bgcolor="#ffffff">
    			<div class="ts-1-13">
    				<ul id="nav">
    					<li class="current-pageHorizontal">
    						<a href="testnewMenu.html">test</a>
    						
    						<!--for the new menu -->
    						<ul >
    							<li><a href="XXX.html">Lower 1 </a></li>
    						</ul>
    						<ul >
    							<li class="current-pageHorizontal"><a href="XXX.html">Lower 2</a></li>
    						</ul>
    						<ul >
    							<li><a href="XXX.html">Lower 3 </a></li>
    						</ul>
    						<ul>
    							<li><a href="XXX.html"> Lower 4</a></li>
    						</ul>
    						<!--for the new menu ul under a list -->
    					</li>
    					<li>
    						<a href="XXX.html">Test2</a>
    						
    					</li>
                        <li>
    						<a href="XXX.cfm">test 3</a>
    						
    					</li>
    					<li>
    						<a href="About_Us.html">About Us</a>
    						
    					</li>
    			  </ul>
    		  </div>
    		  
    		  </body>
    </html>
    Note that in the HTML I moved .current-pageHorizontal to the LIs

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well the currentPagehorizontal will highlight the top and the bottom i.e. not only test but all the lowers as well, all i want is to highlight test when we are on test and when we are on lower 1 i want to highlight test an lower 1 i.e. lower 2 3 and 4


    onlyTesttobehihglighted.jpg
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    
    <html>
    	<head>
    		<title>Test</title>
    		<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <style type="text/css" media="screen">
    /*
    horizontal  menu coding 
     */
     
    #nav {
    	float: left;
    	margin: 0 0 1em 0;
    	padding: 0;
    	list-style: none;
    	
    	
    	}
    #nav li {
    	float: left; }
    #nav li a {
    	display:block;
    	padding: 7px 23.9px;
    	text-decoration: none;
    	font-family:"Arial";
    	color: white;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px  dashed #ccc;
    	font-size: 14px;
    	background-color: #3f6fb7; }
    	
    	
    }
    #nav li a:hover {
    	color: #3f6fb7;
    	background-color: #d1cf9f; } 
    	
    	
    #nav li.current-pageHorizontal a 
      {
        background:#d1cf9f;
        color: white;
    	}
    	
    #nav ul.current-pagelowerHorizontal a 	
     {
        background:#Black;
        color: white;
    	}
    /*
    Print  menu coding 
    */
    </style>
    
    	</head>
    	<body onLoad="preloadImages();" bgcolor="#ffffff">
    			<div class="ts-1-13">
    				<ul id="nav">
    					<li class="current-pageHorizontal" >
    						<a href="test.html">test</a>
    						
    						<!--for the new menu -->
    						<ul id="nav">
    							<a href="XXX.html">Lower 1 </a>
    						</ul>
    						<ul id="nav">
    							<a href="XXX.html">Lower 2</a>
    						</ul>
    						<ul id="nav">
    							<a href="XXX.html">Lower 3 </a>
    						</ul>
    						<ul id="nav">
    							<a href="XXX.html"> Lower 4</a>
    						</ul>
    						<!--for the new menu ul under a list -->
    					</li>
    					<li>
    						<a href="XXX.html">Test2</a>
    						
    					</li>
                        <li>
    						<a href="XXX.cfm">test 3</a>
    						
    					</li>
    					<li>
    						<a href="About_Us.html">About Us</a>
    						
    					</li>
    			  </ul>
    		  </div>
    		  
    		  </body>
    </html>

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Copy paste my sample code from my last post, including the HTML, exactly as I posted.

    My example assumes that lower2 is the current page. As you will see, Only TEST 1 and LOWER2 are highlighted. The other tabs get highlighted on :hover; I didn't think you wanted to get rid of that functionality, if you do just delete the selectors containing :hover from the rules.


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
  •