Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    having problem setting current state of my verticle nav menu

    Hi all, this is my first post and I am a very part time web designer...like 3 in my whole life..

    So for the last two weeks I have been trying to alter this free 3 column template to my needs and I have come undone.

    My problem is( and I know it's a css issue) I cannot get the navigation to highlight when on the current page. I have managed to do it for my top navigation using some PHP but the left nav, which I tried to use similar code for will not work. It seems to me that my top nav that worked was just a case of setting an id called "current". for example :

    Code:
    <ul>
    	<li<?php if ($current_page == "home") echo $list_item ?>><a href="index.php"><span>Home</span></a></li>
    	<li<?php if ($current_page == "about") echo $list_item ?>><a href="about.php"><span>About</span></a></li>
    	<li<?php if ($current_page == "News") echo $list_item ?>><a href="news.php"><span>News</span></a></li>
    	<li<?php if ($current_page == "contact") echo $list_item ?>><a href="contact.php"><span>Contact</span></a></li>
    	<li<?php if ($current_page == "support") echo $list_item ?>><a href="support.php"><span>Support</span></a></li>
    			<li<?php if ($current_page == "downloads") echo $list_item ?>><a href="downloads.php"><span>Downloads</span></a></li>			
    	</ul>
    so a variable is set in the current page. $current_page with home...about... etc and the $list_item is just a variable current.

    and in my .css i had
    Code:
     #header #current a {
       background-position:0% -42px;
    	color: #FFF;
    }
    #header #current a span {
       background-position:100% -42px;
    	color: #FFF;
    }
    which looked like it moved the background image...ok it worked.

    so now I am trying to do the same with this vertical menu but there is no image, just a 4 pixel border that changes colour along with the text it is in the stylesheet as follows
    Code:
     /* sidebar */
    #sidebar {
    	float: left;
    	width: 23%;
    	margin: 0;	padding: 0; 
    	display: inline;		
    }
    #sidebar ul.sidemenu {
    	list-style:none;
    	margin:10px 0 10px 15px;
    	padding:0;		
    }
    #sidebar ul.sidemenu li {
    	margin-bottom:1px;
    	border: 1px solid #f2f2f2;
    }
    #sidebar ul.sidemenu a {
    	display:block;
    	font-weight:bold;
    	color: #333;	
    	text-decoration:none;	
    	padding:2px 5px 2px 10px;
    	background: #f2f2f2;
    	border-left:4px solid #CCC;	
    	
    	min-height:18px;
    }
    
    * html body #sidebar ul.sidemenu a { height: 18px; }
    
    #sidebar ul.sidemenu a:hover {
    	padding:2px 5px 2px 10px;
    	background:  #f2f2f2;
    	color: #006F6F;
    	border-left:4px solid #006F6F/*#9EC630*/;
    }
    
    /* my try at setting 'current' for the side menu */
    
    #sidebar #currentside a {
    	padding:2px 5px 2px 10px;
    	background:  #f2f2f2;
    	color: #006F6F;
    	border-left:4px solid #006F6F/*#9EC630*/;
    }
    with this code in my page, very similar to the top one just with a different id=currentside. example
    Code:
    <div id="sidebar" >							
    				
    			<h1>Main</h1>
    			<ul class="sidemenu">
    				<li<?php if ($current_page == "home") echo $sidelist_item ?>><a href="index.php">Home</a></li>
    				<li><a href="about.php">About</a></li>
    				<li><a href="times.php">Times</a></li>
    				<li><a href="contact.php">Contact</a></li>
    				<li><a href="teaching_calendar.php">Teaching Calendar </a></li>	
    				<li><a href="our_team.php">Our Team  </a></li>
    				<li><a href="recruitment.php">Recruitment </a></li>				
    			</ul>
    so far i have just been testing it with the home page and it won't work, any help will possibly stop me losing my one strand of hair left...save the hair!! a link to my test site http://www.thefulhamstudy.co.uk/thef...test/index.php

    Woody
    Last edited by headzandtailz; 01-19-2012 at 06:57 PM.

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pretty sure it's to do with inheritance

    i stripped away the class for the ul and rewrote the sidebar css with my currentside Id and it now displays with a liststyle even though i have set it to no list style in the css for example .

    Code:
     /* sidebar */
    #sidebar {
    	float: left;
    	width: 23%;
    	margin: 0;	padding: 0; 
    	display: inline;
    				
    }
    #sidebar ul {
    	list-style:none;
    	margin:10px 0 10px 15px;
    	padding:0;
    	}
    	
    #sidebar li {
    	margin-bottom:1px;
    	border: 1px solid #f2f2f2;*/
    }
    #sidebar a {
    	display:block;
    	font-weight:bold;
    	color: #333;	
    	text-decoration:none;	
    	padding:2px 5px 2px 10px;
    	background: #f2f2f2;
    	border-left:4px solid #CCC;	
    	
    	min-height:18px;
    }
    
    * html body #sidebar a { height: 18px; }
    
    #sidebar a:hover {
    	padding:2px 5px 2px 10px;
    	background:  #f2f2f2;
    	color: #006F6F;
    	border-left:4px solid #006F6F/*#9EC630*/;
    } 
    
    /* my try at setting 'current' for the side menu */
    
    #sidebar #currentside a {
    	padding:2px 5px 2px 10px;
    	background:  #006F6F/*#f2f2f2*/;
    	color: #006F6F;
    	border-left:4px solid #006F6F/*#9EC630*/;

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ok i'm running out of ideas

    i have tried setting the ul to have an id instead of a class - didn't work

    i have a thought to set a new class for a in
    Code:
    #sidebar ul.sidemenu a
    loosing my marbles

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cracked it

    ok so I managed to finally get it :

    I removed the class of the ul thus changing and referenced the div id like this

    Code:
     #sidebar {
    	float: left;
    	width: 23%;
    	margin: 0;	padding: 0; 
    	display: inline;		
    }
    #sidebar ul {
    	list-style:none;
    	margin:10px 0 10px 15px;
    	padding:0;		
    }
    #sidebar li {
    	margin-bottom:1px;
    	border: 1px solid #f2f2f2;
    }
    #sidebar a {
    list-style:none;
    	display:block;
    	font-weight:bold;
    	color: #333;	
    	text-decoration:none;	
    	padding:2px 5px 2px 10px;
    	background: #f2f2f2;
    	border-left:4px solid #CCC;	
    	
    	min-height:18px;
    }
    
    
    * html body #sidebar  a { height: 18px; }
    
    #sidebar a:hover {
    	padding:2px 5px 2px 10px;
    	background:  #f2f2f2;
    	color: #006F6F;
    	border-left:4px solid #006F6F/*#9EC630*/;
    }
    
    /* my try at setting 'current' for the side menu */
    
    #sidebar #currentside a {
    	padding:2px 5px 2px 10px;
    	background:  #006F6F/*#f2f2f2*/;
    	color: #006F6F;
    	border-left:4px solid #006F6F/*#9EC630*/;
    what was messing me up for the past few hours was I had missed the list-style:none in
    Code:
    #sidebar a {
    list-style:none;
    	display:block;
    	font-weight:bold;
    	color: #333;	
    	text-decoration:none;	
    	padding:2px 5px 2px 10px;
    	background: #f2f2f2;
    	border-left:4px solid #CCC;
    which i found strange because i had it declared in #sidebar ul . Anyway sorry to have shovelled a tonne of code on here. have a good night


  •  

    Tags for this Thread

    Posting Permissions

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