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 9 of 9
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    a: active background change problem on a dynamic CSS list

    Hi,

    This may require JS but because this is a pure CSS list I'm trying to keep to the philosophy if possible, which brings me to you

    I am using a pre-made pure CSS list wherein i have onmouseover the background changes and looks all purdEh-like I would like to add an onclick feature wherein when a link is active, the background is a different image.

    Does this in fact need javascript or have I just missed something?

    I got the code here: http://css.maxdesign.com.au/listamatic/vertical11.htm

    Thanks
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    What's the problem you're having? "a:active" should work okay; I use that technique on my personal site on the main navigation.

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i'll toss up my code, gimme 2 mins
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Testing</title>
    
    
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/rightNav.css" type="text/css">
    <script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/toggler.js"></script>
    
    </head>
    
    <body onload="zxcInitImages('logoC','links_BW')">
    <div id="pageContainer">
    	<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
    	<div id="logoC">
    		<img src="images/logoButtons/info_C.gif" >
    		<img src="images/logoButtons/YPP_C.gif" >
    		<img src="images/logoButtons/social_C.gif" >
    		<img src="images/logoButtons/med_C.gif" >
    		<img src="images/logoButtons/legal_C.gif" >
    		<img src="images/logoButtons/J2K_C.gif" >
    		<img src="images/logoButtons/street_C.gif" >
    	</div>
    	<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg">
    		<img src="images/logoButtons/YPP_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/animator', 'js/animator2.js');">
    		<img src="images/logoButtons/social_BW.jpg" >
    		<img src="images/logoButtons/med_BW.jpg" >
    		<img src="images/logoButtons/legal_BW.jpg" >
    		<img src="images/logoButtons/J2K_BW.jpg" >
    		<img src="images/logoButtons/street_BW.jpg" >
    	</div>
    	<div class="clear"></div>
    	<div id="navcontainer">
    		<ul id="navlist">
    			<li><a href="#" id="current" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css', 'js/animator', 'js/animator2.js');">About Us</a></li>
    			<li><a href="#">People:<br>Past and Present</a></li>
    			<li><a href="#">Media / Press</a></li>
    			<li><a href="#">Get Involved</a></li>
    			<li><a href="#">Donate</a></li>
    			<li><a href="#">Forums</a></li>
    		</ul>
    	</div>
    	<div id="contentarea"></div>
    </div>
    </body>
    </html>
    rightNav.css
    Code:
    #navcontainer ul
    {
    float: right;
    clear: left;
    margin-right: 30px;
    margin-top: 25px;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    
    }
    
    #navcontainer li { margin: 0 0 3px 0; }
    
    #navcontainer a
    {
    display: block;
    padding: 2px 2px 2px 24px;
    text-align: center;
    border: 1px solid #333;
    width: 120px;
    background-color: #999;
    background-image: url(../images/Picture1.jpg);
    }
    
    #navcontainer a:link, #navlist a:visited
    {
    color: #FFFFFF;
    text-decoration: none;
    }
    
    #navcontainer a:hover
    {
    border: 1px solid #333;
    background-color: #F60;
    background-image: url(../images/l1_over.gif);
    color: #333;
    }
    
    #active a:link, #active a:visited, #active a:hover
    {
    border: 1px solid #333;
    background-color: #FF6600;
    background-image: url(../images/l1_over.gif);
    color: #333;
    }
    #active a:active
    {
    border: 1px solid #333;
    background-color: #FF6600;
    background-image: url(../images/l1_down.gif);
    color: #333;
    }
    main.css
    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    * html #pageContainer {
    height:100%;
    }
    * img {
    border: 0 
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topText {
    position: relative;
    margin-top:75px;
    margin-left: 75px;
    }
    #logoC {
    margin-left: 175px
    }
    #bottomText {
    margin-left: 75px;
    margin-top: 67px
    }
    #linkHolder {
    margin-left: 35px;
    margin-top: 25px;
    width: 150px;
    height: 25px;
    border: 1px solid black
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    width: 70px;
    }
    #rightMenu {
    position: relative;
    display: inline;
    z-index: -2;
    width: 150;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #contentarea {
    position: relative;
    margin-left: 155px;
    margin-top: 27px;
    padding-right: 20px;
    width: 600px;
    }
    all viewable at www.enviromark.ca/head/index.htm

    While i have you, i also have a few questions
    • I was wondering how I could get that menu to stay where it is regardless of window size, because if you shrink the browser the menu moves
    • if you shrink the browser and hit 'refresh', the top navigation wraps and wont 'unwrap'... I would like it as well to stay in it's intended position regardless of browser size
    • Editalso, i just notice a difference in IE and FF with regard to the menu's position away from the right side... it is closer in one than the other (?)


    Thanks a lot, sorry for the rushed post but i am running out the door :/
    Last edited by canadianjameson; 07-21-2007 at 12:26 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I still can't figure out why a:active wont work
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    If you're talking about the navlist menu, your active item has an id="current", but in the css I don't see a definition for "current". Do you mean "active" maybe?

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thats what I don't get, the CSS provided via the first link (link to where i dl'd the script) is all i had -- is it incomplete?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by canadianjameson View Post
    I would like to add an onclick feature wherein when a link is active, the background is a different image.

    Does this in fact need javascript or have I just missed something?

    I got the code here: http://css.maxdesign.com.au/listamatic/vertical11.htm
    Use of the active pseudo‐class has been suggested, but Iím not sure if thatís what you were asking for. Go to http://www.jsgp.us/demos/CF114114.html* and hold down your mouse button over a blank area until you see a winking face; that should demonstrate what active does. If you want the button appearance to permanently change until a new button is selected, youíll want to use JavaScript/ECMAScript for that.

    * You need to use a browser other than Internet Explorer to see active in action when applied to the html element.

    Quote Originally Posted by canadianjameson View Post
    I still can't figure out why a:active wont work
    Your selector #active a:active wonít select anything since no elements in the document have an id attribute with a value of active.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Concise and well laid out, I understand.

    Thank you, I will go to the JS forums for the altered functionality.

    Thank you
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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