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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question [Js][html][css][Getting menu's to stay a colour when on the page not responding]

    Greetings i am an amateur coder and of need of advice and help . Sorry if the layout is wrong im following the recommended layout as best i can.

    Refrences:

    1. Website can be found here ver 1.2 (avoid pressing on forums and item | mob list as they are bandwidth heavy). Page DDL here ver 1.2
    2. CSS DDL can be found here ver 1.3
    3. Original sidebarmenu code here
    4. Reference code for target selector here

    Question:
    1. Now please point your attention to the below code which is part of the css file linked. It is to do with my sidebarmenu class for a the linked website. What i want the menu on the side to do is to stay a certain colour on the last clicked item which is done via .sidebarmenu ul li a:target (please refer to reference 4) and a few other features i am trying to incooperate are not working. What am i doing wrong? As i am not sure what i have done wrong. If you look at the code itself you should be able to see what i am trying to do based on refrences etc i have supplied. If you want a detailed explanation just post back and ill explain what i want.

    Code:
    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited {
    background-color: #012D58; /*background of tabs (default state)*/
    }
    
    .sidebarmenu ul li a:active {
    background-color: #58002d;
    }
    
    .sidebarmenu ul li a:target {
    background-color: #58002d;
    }
    .sidebarmenu ul li a:target:hover {
    background-color: #250013;
    }
    
    .sidebarmenu ul li a:visited{
    color: white;
    }
    
    .sidebarmenu ul li a:hover{
    background-color: #2d5800;
    2. Where can i do error checking for my code?

    3. Is there free services to help neaten up html code? (have spaces instead of tabs etc vice versa (but do recommend me whats better), lining up code etc. Yes im aware html is a form of markup language so tabs or spaces dont matter. P.S. i use notepad ++ to do my code so if you know of good settings then please do say.

    P.S. I do apologise for the non-neatness of code and poor structuring and would welcome any recommendations for my learning and improvement of my project.
    Last edited by grayles; 05-12-2012 at 11:15 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello grayles,
    This is a good method for highlighting a menu item to show what page you're on.

    For checking code, see the links about validation in my signature line. The CSS validator will question the same thing I first noticed... a:target is a new one on me.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Oh sorry i icoded the wrong selector. Im meant to put active as the selector. I have updated the post to reflect this. You can check the reference as that is where i got from. I did this in notepad++ and it accepted the selector by giving it a colour. Also another thing i tried the sample code (for the active selector check the reference link) in w3schools sample generator and it worked. I will validate the html and css files soon, just right now i am in bed. thanks for the links. Anything else i can do in my code?

    Also your link is a nice idea, but theres not enough documentation for me to understand how it works so im at a bit of a loss here ><.

    EDIT:

    After further reading over here i found that active must be after hover.

    Further investigation on w3 tells me that i must give an ID per menu item for it to work i will give it a try and test it out.


    EDIT2:
    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>test</title>
        <style type="text/css">
          #menu {
            list-style:none;
          }
          #menu li a:visited, #menu li a:link{
            background-color:blue;
           }
          #menu li:hover {
            background-color:yellow;
          }
          #menu li:target {
            background-color:red;
          }
          #menu li:target:hover {
            background-color: orange;
          }
        </style>
      </head>
      <body>
        <p>Click on the links</p>
        <ul id="menu">
          <li id="a1"><a href="#a1">one</a></li>
          <li id="a2"><a href="#a2">two</a></li>
          <li id="a3"><a href="#a3">three</a></li>
             <ul>
          <li id="a4"><a href="#a4">one</a></li>
          <li id="a5"><a href="#a5">two</a></li>
          <li id="a6"><a href="#a6">three</a></li>
             </ul>
        </ul>
      </body>
    </html>
    Here is a test code on what i want to achieve. However the blue persists despite being turned red (it appears infront of the red). Now i used #menu li a:visited, #menu li a:link as this is what is required in the original html to colour the background. ive tried using #menu li a:visited:target, #menu li a:link:target but it doesnt seem to work. As of now, the index.html does everything BUT stay the original colour (i believe it is rendered behind it). So how do i bring it above it?)

    EDIT:
    From experimentation the value for href must equal to the id for the selector target to work on selecting the current selection
    EDIT2:
    z-index doesnt seem to affect the background colour stack order... In-edit: i must use positioning for this to work, however i cannot position in the table, so i am using this workaround. Is it possible to use that workaround and therefor z-index child elements?

    Here is a sample page im trying to use the workaround on http://myhome.pointto.us/Public/es/tax.html

    I read why tables are bad. So i think i shouldnt use them (just was taught to use them in UNI) so is it possible to set text or items to sit in a certain area in a webpge that scales and is centred?
    Last edited by grayles; 05-14-2012 at 12:34 PM.


  •  

    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
    •