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 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question CSS for <li class="active"> not working.

    Man I hate being a newbie... -.-

    I tried div#navigation li a where the li class active is, as I have seen in examples of other CSS, but THAT didn't work correctly, so I tried div#navigation li.active and THAT didn't work...

    The CSS:
    Code:
    div#navigation li //main li
    {
    	margin-bottom:5px;
    	font: normal 18px Verdana, sans-serif;
    	color:#0000ff;
    }
    
    div#navigation li a //or li.active?
    {
    	font: bold 20px Verdana, sans-serif;
    	color: #3366CC;
    }
    Last edited by Skylear; 07-23-2011 at 01:36 AM.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,742
    Thanks
    41
    Thanked 191 Times in 190 Posts
    what are you trying to do? a hover? :active (note the : instead of the "." ... close though ) is only for when the link is being fired... typically will never be seen unless the user holds the mouse down on the link for an indefinite period of time

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    No, not hover. This is supposed to work like this:
    When a person is on a particular page, that page's link is a lighter blue (#3366CC) than the "not active" blue (#0000FF). It's basically a thing to show what page you're on. :/

    Also, how would you go about a hover?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Skylear View Post
    No, not hover. This is supposed to work like this:
    When a person is on a particular page, that page's link is a lighter blue (#3366CC) than the "not active" blue (#0000FF). It's basically a thing to show what page you're on. :/

    Also, how would you go about a hover?
    You are referring to an "active" appearance for a menu. This is not the same as the :active pseudoclass for CSS. CSS alone will not know what page is the current page. With server-side includes and a different class attribute used for the body tag depending on which page is being served, and a static id or class added to each menu <li> tag you can control the "active" appearance with simple CSS rules thereafter. But you WILL need the server-side interaction to deliver the HTML correctly in the first place.

    An example of how this would work is something like this:

    CSS:
    Code:
    #menu li{background:#000;}
    body.about #menu li.about{background:#f00;}
    body.home #menu li.home{background:#f00;}
    HTML snippet:
    Code:
    <body class="about">
    <ul id="menu">
    <li class="home"><a href="/">Home</a></li>
    <li class="about"><a href="/about/">About</a></li>
    ...
    </ul>
    When you change the class of the body tag (which is what the server-side part of this would be for) you will automatically fire the CSS to show the page which is actively being viewed.

    Again, this is entirely separate from the :active abilities of CSS.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question

    I see. But does it have to be that complex if I'm just using div#navigation li.active to make the text color different? I've seen this done multiple times or multiple sites. All I did was on each page I set the link of that to <li class="active">etc... and try to CSS it for each "active" link. :/

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Skylear View Post
    I see. But does it have to be that complex if I'm just using div#navigation li.active to make the text color different? I've seen this done multiple times or multiple sites. All I did was on each page I set the link of that to <li class="active">etc... and try to CSS it for each "active" link. :/
    That way works, too. It's actually easier to code the CSS that way, too if each active state will have the exact same appearance. My method adds the flexibility to use separate colors, images, sizes, etc. for any given menu item's "active page" state. There is no reason you couldn't simplify it as you have suggested.

    I would still recommend a server-side include for the menu with a check against which page is being loaded so that the menu file adds the "active" class to the correct menu item each time on its own. That way you set the "active" class dynamically and you won't have such a headache when you need to make a change to your menu.

    If you aren't using includes then you will have to update each and every menu rather than just one file if you want to add a menu item or re-order your menu some time down the road.

    Do you have any experience with PHP?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    A tiny bit. Anyways, I can do this dynamically? Man, that'd be a miracle and a half. Unfortunately, I'm still reading books to even learn PHP. I know most of the basics, and that's it.

    *EDIT*
    Gosh I'm an idiot... I was trying to do the <li> itself and not the <A href:""> that the text was in. I fixed it. But I still would like to know how to do this dynamically.
    Last edited by Skylear; 07-22-2011 at 05:05 PM.

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    The general idea with PHP includes to build a page is like so...

    You have your normal run of the page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
    <ul id="menu">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact Us</a></li>
    </ul>
    <p>content here...</p>
    <div id="footer">
      <p>This is the footer...</p>
    </div>
    </body>
    </html>
    Suppose that is your normal *.html page file. You want to turn this into a PHP page and use includes to pull in static parts of the page such as the document head (or some part of it, you can really chop this up as small as you want and include it all back together if you want), a sidebar, a banner, a footer, etc.

    You can pull each and every one of the items into a separate *.php file (or any workable mix of *.html, *.php, *.txt, etc. files) and then bring them back together later.


    So, a general example from the above could be something like so...

    head.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
    menu.php
    PHP Code:
    <ul id="menu">
      <li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/">Home</a></li>
      <li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/about/">About</a></li>
      <li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/contact/">Contact Us</a></li>
    </ul>
    index.php
    PHP Code:
    <?php
    include('path/to/head.html');
    include(
    'path/to/menu.php');
    ?>
    <p>content here...</p>
    <?php include('path/to/footer.html'); ?>
    footer.html
    Code:
    <div id="footer">
      <p>This is the footer...</p>
    </div>
    </body>
    </html>


    Then, when index.php is visited, the server grabs all of the files included and assembles the HTML to be sent to the user as one piece. It would be indistinguishable to the end user that this has been done. It starts to make a lot more sense once you try it. It's not an advanced technique and it REALLY pays off for site maintenance.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    New Coder
    Join Date
    Jul 2011
    Location
    Kansas
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    menu.php
    PHP Code:
    <ul id="menu">
      <li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/">Home</a></li>
      <li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/about/">About</a></li>
      <li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/contact/">Contact Us</a></li>
    </ul>
    How would I make a check to see what page it's on?

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You have a couple of options using the $_SERVER variable in PHP.

    Look into $_SERVER['REQUEST_URI'] or $_SERVER['SCRIPT_FILENAME'] or $_SERVER['SCRIPT_NAME'] or __FILE__ for options for the basic tools you would need to test which page is being served. You would take one of those and compare it to the menu item's destination page and if that's the page being served the menu item gets marked as the active page.

    Actually setting up the "if" statement correctly will depend on your website's file tree and file names so I can't really guess at those.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Quote Originally Posted by Rowsdower! View Post
    You have a couple of options using the $_SERVER variable in PHP.
    You could as well just define a variable on each page and check for that in the menu, like:
    PHP Code:
    /* assume this is the home page */
    <?php
    $page 
    'home'/* we define a page name here – on other pages this would be “about”, “contact”, or whatever */
    include('path/to/head.html');
    include(
    'path/to/menu.php');
    ?>
    <p>content here…</p>
    <?php include('path/to/footer.html'); ?>
    PHP Code:
    <ul id="menu">
      <li<?php if($page == 'home') {echo "class=\"active\"";} ?>><a href="/">Home</a></li>
      <li<?php if($page == 'about') {echo "class=\"active\"";} ?>><a href="/about/">About</a></li>
      <li<?php if($page == 'contact') {echo "class=\"active\"";} ?>><a href="/contact/">Contact Us</a></li>
    </ul>


  •  

    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
    •