SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu / body id problem

    Hi All,

    What im trying to do is have the background-color of a menu item be different if the user is on that page.
    So if the user were on this page: http://www.messagetrain.com/2012/fac...-bis-sales.php I want that menu item to be blue.

    The way i usually do this by using a body id in the html isnt working and im not the best at css.

    Code HTML4Strict:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Message Train :: Training & Coaching for High Performance</title>
    <link rel="stylesheet" href="mt.css" type="text/css" media="screen">
    </head>
     
    <body>
    	<div id="wrapper">
        	<div id="main_nav"><?php include 'nav_main.php'; ?>
            </div>
            <div id="header"><a href="index.php"><img src="images/logo.jpg" alt="Message Train Logo" width="200" height="125" border="0" /></a>
            </div>
            <div id="stream_nav" class="ff_bg">
            <ul id="tabnav">
    	<li class="streambc"><a href="stream-bid-coaching.php">BID COACHING</a></li>
        <li class="streamel"><a href="stream-e-learning.php">E LEARNING</a></li>
        <li class="streamtv"><a href="stream-training-videos.php">TRAINING VIDEOS</a></li>
    </ul>
            </div>
            <div id="main">
            	<div id="main_left_nav"><?php include 'nav_ff.php'; ?>
              </div>
                <div id="main_right">
    			<h1 class="ff_head"><span class="ff_head_light">FACE TO FACE TRAINING</span><br/>&rarr;&nbsp;SALES AND BUSINESS DEVELOPMENT</h1><br/>
    		  <span class="body_cap">Getting a different or better result means doing something differently. Message Train can work with your sales and BD teams to turn skills and knowledge into behavioural change.</span><br/><br/><span class="body_txt">Whether this is to build productive relationships, influence others or to negotiate a contract, we can help you to achieve greater performance levels in your sales and BD teams. Our clients comment on our attention to commercial outcomes and our ability to tailor the development to their specific context.<br/><br/>Learning pathways may include some of the following pre-designed courses or speak to us about custom designing a solution for your specific needs.
    </span>
              </div>
            </div>
        </div>
    </body>
    </html>

    Code CSS:
    /* -------------------main_left nav-------------------- */
     
     
    #main_left_nav {
    width:99px;
    display:block;
    float:left;
    }
     
     
    #main_left_nav ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
     
    #main_left_nav li {
    	float: left;
    }
     
    #main_left_nav li a {
    	font-family:'TrumpGothicEastRegular', Helvetica, sans-serif;
    	font-size:20px;
    	width: 90px;
    	display: block;
    	color: #ffffff;
    	text-decoration: none;
    	text-align: center;
    	margin-bottom:5px;
    	padding-top:2px;
     
    }
     
     
     
     
    #main_left_nav li.main_left_ff a {
    	background-color:#eaeaea;
    }
     
    #main_left_nav li.main_left_bc a {
    	background-color:#eaeaea;
    }
     
    #main_left_nav li.main_left_el a {
    	background-color:#eaeaea;
    }
     
    #main_left_nav li.main_left_tv a {
    	background-color:#eaeaea;
    }
     
    #main_left_nav li.main_left_ff a:hover {
    	background-color:#15a9e2;
    }
     
    #main_left_nav li.main_left_bc a:hover {
    	background-color:#f1852a;
    }
     
    #main_left_nav li.main_left_el a:hover {
    	background-color:#d55c9e;
    }
     
    #main_left_nav li.main_left_tv a:hover {
    	background-color:#32ac5c;
    }
     
     
     
    #main_left_nav li a, #main_left_nav li a:hover {
      -webkit-transition-property: background-color;
      -webkit-transition-duration: 1.0s;
      -webkit-transition-timing-function: ease;
      -moz-transition-property: background-color;
      -moz-transition-duration: 1.0s;
      -moz-transition-timing-function: ease;
      -o-transition-property: background-color;
      -o-transition-duration: 1.0s;
      -o-transition-timing-function: ease;
      -ms-transition-property: background-color;
      -ms-transition-duration: 1.0s;
      -ms-transition-timing-function: ease;
      transition-property: background-color;
      transition-duration: 1.0s;
      transition-timing-function: ease;
    }

    Any Ideas?? Thanks in advance!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    One way to do this is to put a class on the body element (e.g. <body class="bus">) and then a special class on the LI or the <a> (e.g. <li class="bus">) and then write a CSS rule like this:

    Code:
    .bus #main_left_nav li.bus a {
        background-color: #15A9E2;
    }
    You could also do this totally differently with something like PHP (as shown here) but that's another story ...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m!
    ended up going with the php option..

    Cheers.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    So you know, I'm getting an error accessing the page.

    No input file specified.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    So you know, I'm getting an error accessing the page.

    No input file specified.
    Changed the URL by the looks of it.

    http://www.messagetrain.com/2012/
    http://www.messagetrain.com/2012/fac...evelopment.php


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
  •