...

View Full Version : a: active background change problem on a dynamic CSS list



canadianjameson
07-20-2007, 08:03 PM
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 :D

I am using a pre-made pure CSS list wherein i have onmouseover the background changes and looks all purdEh-like :p 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 :)

rmedek
07-21-2007, 12:59 AM
What's the problem you're having? "a:active" should work okay; I use that technique on my personal site on the main navigation.

canadianjameson
07-21-2007, 01:03 AM
i'll toss up my code, gimme 2 mins :D

canadianjameson
07-21-2007, 01:22 AM
<!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

#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


/* 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 :/

canadianjameson
07-22-2007, 09:30 PM
I still can't figure out why a:active wont work :(

PappaJohn
07-22-2007, 10:29 PM
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?

canadianjameson
07-23-2007, 01:14 AM
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?

Arbitrator
07-23-2007, 04:09 PM
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.htmUse 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.


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.

canadianjameson
07-23-2007, 04:26 PM
Concise and well laid out, I understand.

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

Thank you :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum