SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollover/pseudo class?

    Do you know how to make the color disappear on the nav at the top once you click on one of the boxes? View link. http://www.cssplay.co.uk/

    Essentially, when you click on "Demos" or any other nav box the background color disappears. i thought this concept was simple, but I have been stuck for days.

    Thanks to anyone that can help

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The current nav item is styled differently on every page. There is no pseudo class in action here.

    On the current page the current menu item is styled with a white background.

    Code:
    <ul id="main_menu">
    	<li><a class="mm1"  accesskey="D" href="../menu/index.html"><b>DEMOS</b></a></li>
    	<li><a class='mm2' accesskey="M" href="../menus/index.html"><b>MENUS</b></a></li>
    	<li><a class='mm3' accesskey="Y" href='../layouts/index.html'><b>LAYOUTS</b></a></li>
    	<li><a accesskey="B" href="index.html" title="List"><em>BOXES</em></a></li>
    	<li><a class="mm5" accesskey="Z" href="../mozilla/index.html"><b>MOZILLA</b></a></li>
    	<li><a class="mm6" accesskey="E" href="../ie/index.html"><b>EXPLORER</b></a></li>
    	<li><a class="mm7" accesskey="O" href="../opacity/index.html"><b>OPACITY</b></a></li>
    </ul>
    <ul id="main_menu">
    	<li><a class="mm1"  accesskey="D" href="../menu/index.html"><b>DEMOS</b></a></li>
    	<li><a accesskey="M" href="index.html" title="List"><em>MENUS</em></a></li>
    	<li><a class='mm3' accesskey="Y" href='../layouts/index.html'><b>LAYOUTS</b></a></li>
    	<li><a class="mm4" accesskey="B" href="../boxes/index.html"><b>BOXES</b></a></li>
    	<li><a class="mm5" accesskey="Z" href="../mozilla/index.html"><b>MOZILLA</b></a></li>
    	<li><a class="mm6" accesskey="E" href="../ie/index.html"><b>EXPLORER</b></a></li>
    	<li><a class="mm7" accesskey="O" href="../opacity/index.html"><b>OPACITY</b></a></li>
    </ul>
    On each current page the usual class is omitted and the words are wrapped in an em and styled uniquely.

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    thanks for the speedy reply. I'm using similar boxes at the link below, but can not style to boxes to change color(or whatever action I decide to have them do) once selected so the users know which page they are on. The CSS is in the head section.

    I think that helps. Thanks so much. I will try when i get to work
    Last edited by cosmotini; Sep 23, 2006 at 19:50.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are missing the point The user clicks the link and then goes to the new page which is already styled as selected.

    You just hard code the class in the html on each page.

    If the more wealth page was the current page then you would add something like this.

    Code:
    ul#main_menu li.current a,
    ul#main_menu li.current {
    	background:#000;
    	border:none;
    	color:#fff;
    }
    
    -->
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="box"><!-- TemplateBeginEditable name="content" --> <!-- TemplateEndEditable --></div>
    	<div id="contact_nav"><!-- TemplateBeginEditable name="right corner" --> HOME | CONTACT<!-- TemplateEndEditable --></div>
    	<ul id="main_menu">
    		<li><a class="mm1" href="../who_we_are.html"><b>about <br />
    			US </b></a></li>
    		<li class="current"><a  href="../wealth.html"><b>more<br />
    			wealth</b></a></li>
    You just move the class = current to the appropriate link depending on what page you are on.

    So for the link before it would look like this in that page.
    Code:
    <body>
     <div id="container">
     	<div id="box"><!-- TemplateBeginEditable name="content" --> <!-- TemplateEndEditable --></div>
     	<div id="contact_nav"><!-- TemplateBeginEditable name="right corner" --> HOME | CONTACT<!-- TemplateEndEditable --></div>
     	<ul id="main_menu">
     		<li class="current"><a  href="../who_we_are.html"><b>about <br />
     			US </b></a></li>
     		<li><a class="mm2"  href="../wealth.html"><b>more<br />
     			wealth</b></a></li>
    You can't make a pseudo class affect something on another page.

    If you want to automate the process a bit you can use a class or id in the body that just changes on each page but you still have to add something to each page.

    http://www.pmob.co.uk/temp/nav-body3.htm

    The only fully automatic way is to script it.

    Hope that makes it clearer

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In theory you completely made sense. I don't know if I did it the correct way. I did have some difficulty, but I made it happen. Since I noticed that you are an expert of the year I will take my chances and ask one more question. I don't know if you are familiar with Dreamweaver, but if you are, do you know how to stylize a selected link within a library items that lets visitors know which page they are currently on and those they have visited. Thanks again!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not familiar with library items but I imagine they are like includes that get included on your page. If this is true then you won't be able to have it different for each page as the code must be the same for each.

    If this is the case then you would need to do something like I mentioned in my other post.


    http://www.pmob.co.uk/temp/nav-body3.htm


    With the example above the nav can have exactly the same code on each page. You then just add an id to the body tag on those pages to identify them. You still have to do this manually but it does allow the menu to be the same on all pages.

  7. #7
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul! I did it on my own finally. Yeah!!! Thanks!


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
  •