CSS Forum

**kkg** · 03-27-2009, 03:29 PM

Hopefully the title doesn't sound retarded. Anywho, when i roll over a link in my navigation i want the image to switch so they know they're on it. Then once linked to the page i want the link to stay lit on whatever page they're on.

www.blackcoffeevisuals.com/kris this is my home page right now. when i scroll over a menu link on the left side i want the image to change, something like this:

to this:

someone help me out! hopefully my explination made sense.

I can provide original HTML/CSS code so you can show me where to add it as well. just let me know.

**angele803** · 03-27-2009, 04:36 PM

This should be pretty easy. You just need to switch the background on a:hover. You can also create a class to keep the link "lit" when the user is on that page.
If you post the HTML and CSS, we can help you out more specifically.

**kkg** · 03:12 PM

here's the HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Aim Shot</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div id="wrapper">
<div id="left">
<img src="http://www.webmaster-talk.com/images/AImshot-Website_03.gif" />
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_06.gif" border="0" /></a>
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_07.gif" border="0" /></a>
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_08.gif" border="0" /></a>

<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_09.gif" border="0" /></a>
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_10.gif" border="0" /></a>
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_11.gif" border="0" /></a>
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_12.gif" border="0" /></a>
<a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_14.gif" border="0" /></a></div>
<div id="right">
  <a href="content.html"><img src="http://www.webmaster-talk.com/images/AImshot-Website_04.jpg" border="0" /></a></div>

<div id="footer">

<ul>
<li><img src="http://www.webmaster-talk.com/images/flag.gif" width="32" height="22" /></li>
<li><font size="3" face="arial bold"><b> MILITARY</li>
 <li>  |  </li>
<li>    LAW ENFORCEMENT  </li>
<li>     |  </li>

    <li>  FIND A DEALER  </li>
    <li>  |  </li>
    <li> SUPPORT  </li>
    <li>   |  </li>
    <li>   CONTACT US  </b> </font></li>
</ul>
</div>

<div id="copyright" align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p>Copyright © AimShot 1998 - 2009. All rights reserved. </p>




</div>


</body>
</html>



here's the CSS:

/* CSS Document */


a{
    outline:none;
    text-decoration:none;
    color:#aedff8;
}

a img{
    border:none;
}



body {
   margin: 0 auto;
padding: 0;
    background-color:#000000;
    
    background-repeat:repeat-y;
    color:#FFFFFF;
    border-top: solid 5px #990000;
    
}
#wrapper{
width:1028px;
margin:0 auto;
position:relative;
text-align:left;
border-left:solid 5px #ffffff;
border-right:solid 5px #ffffff;
}

#left{
clear:left;
float:left;
width:220px;
}

   }

.nav {
    padding:0;
    margin:0;
}

.nav  li{
    float:left;
    padding:0;
    margin:0;
    text-align:left;
    text-decoration:none;
}

.nav  li a{
    margin:0;
    float:left;
    width:190px;
    color:#FFFFFF;
}



#finda{
clear:left;
float:left;
background-color:#000000;
width:238px;

}
#finda h2{
color:#FFFFFF;
font-size:16px;
text-align:left;
padding-left:20%;
}



#logo{
float:left;
}
#title{
float:right;
width:790px;
height:50px;
background-color:#000000;
}
#title h2{
color:#FFFFFF;
font-size:16px;
text-align:left;
padding:15px;
}

#right{
clear:right;
float:right;
width:790px;

background-color:#000000;
padding:0;
}
#content{

float:right;
width:790px;
background-image: url(images/AImshot-Website_15.gif);

background-repeat:;

background-position:;

padding-top:; 


padding:0;
}


#content p{
font-size:15px;
padding:15px;
line-height:20px;
}
#content h2{
color:#FFFFFF;
font-size:18px;
text-align:left;
}
.specs {
font-size:14px;
padding:2px;

}

.specs p{
padding:2px;
}
.specs h2{
padding-left:15px;
}
#right2{
clear:right;
float:right;
background-color:#000000;

width:790px;
float:right;
}
.images{
padding:40px;
}

#footer{
clear:both;
background-color:#990000;
background:url(../images/AImshot-Website_15.gif) repeat-x;
height:50px;
width:1028px;

}
#footer ul{
margin-left:80px;
padding-top:15px;
}
#footer li {
display:inline;

padding-left:20px;
}
#copyright{
min-height:300px;
background-color:#505050;
}
#copyright p {
padding-left:10%;
}

.thumbnail{
    padding: 3px 3px 3px 3px;
    background-color: #222;
    border: 1px solid #2a2a2a;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }    
    
/* CSS Document */


a{
    outline:none;
    text-decoration:none;
    color:#aedff8;
}

a img{
    border:none;
}



body {
   margin: 0 auto;
padding: 0;
    background-color:#000000;
    
    background-repeat:repeat-y;
    color:#FFFFFF;
    border-top: solid 5px #990000;
    
}
#wrapper{
width:1028px;
margin:0 auto;
position:relative;
text-align:left;
border-left:solid 5px #ffffff;
border-right:solid 5px #ffffff;
}

#left{
clear:left;
float:left;
width:220px;
}
.nav {
    padding:0;
    margin:0;
}

.nav  li{
    float:left;
    padding:0;
    margin:0;
    text-align:left;
    text-decoration:none;
}

.nav  li a{
    margin:0;
    float:left;
    width:190px;
    color:#FFFFFF;
}



#finda{
clear:left;
float:left;
background-image: url(images/flag.gif);
width:238px;

}
#finda h2{
color:#FFFFFF;
font-size:16px;
text-align:left;
padding-left:20%;
}



#logo{
float:left;
}
#title{
float:right;
width:790px;
height:50px;
background-color:#000000;
}
#title h2{
color:#FFFFFF;
font-size:16px;
text-align:left;
padding:15px;
}

#right{
clear:right;
float:right;
width:790px;

background-color:#000000;
padding:0;
}
#content{

float:right;
width:790px;

background-color:#000000;

padding:0;
}


#content p{
font-size:15px;
padding:15px;
line-height:20px;
}
#content h2{
color:#FFFFFF;
font-size:18px;
text-align:left;
}
.specs {
font-size:14px;
padding:2px;

}

.specs p{
padding:2px;
}
.specs h2{
padding-left:15px;
}
#right2{
clear:right;
float:right;
background-color:#000000;

width:790px;
float:right;
}
.images{
padding:40px;
}

#footer{
clear:both;
background-color:#990000;
background:url(../images/AImshot-Website_15.gif) repeat-x;
height:50px;
width:1028px;

}
#footer ul{
margin-left:80px;
padding-top:15px;
}
#footer li {
display:inline;

padding-left:20px;
}
#copyright{
min-height:300px;
background-color:#000000;
}
#copyright p {
padding-left:20%;
}

.thumbnail{
    padding: 3px 3px 3px 3px;
    background-color: #222;
    border: 1px solid #2a2a2a;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }    

http://blackcoffeevisuals.com/kris/css/lightbox.css

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

**kkg** · 03-30-2009, 11:42 AM

help anyone

?

**TripleMoons** · 03:07 PM

You're code's a mess so I didn't bother looking at it, but you want something like this:

HTML:

Code:

<ul id="lasersights"> 
        <li><a href="#">Precision Green Laser Sights</a></li>
</ul>

CSS:

Code:

ul#lasersights li a:link, ul#lasersights li a:visited, ul#lasersights li a:active {
    display: block;
    width: 237px;
    height: 49px;
    background-image: url(images/lasersights-up.gif);
    text-indent: -9999px;
}

ul#lasersights a:hover  {
    background-image: url(images/lasersights-down.gif);
}

**kkg** · 03-31-2009, 12:18 PM

I tried that, but im not sure how to place it? I tried a few different way s but i can't seem to keep the nav aligned left or the image to show up in the nav.. :\

**TripleMoons** · 03-31-2009, 12:30 PM

Please provide a link to the website.

**kkg** · 03-31-2009, 06:20 PM

the site is down, i have it hosted locally here is a link to the rar file:

http://www.mediafire.com/?sharekey=3...4e75f6e8ebb871

Thanks for the help

**TripleMoons** · 03-31-2009, 06:28 PM

Sorry, but that is not helpful in helping you (at least with me). I personally need to see the active site to review the code and how it is interacting with a user.

**kkg** · 04-01-2009, 12:24 PM

you can. download the .rar and place the folder on your desktop. double click index.html and it will open up in firefox/ie whatever your browser is and show the full running website.

**TripleMoons** · 04-01-2009, 12:27 PM

The point is, I do not want to download anything.

At that, I'm on a Mac and I don't even know if that would work.

**kkg** · 04-01-2009, 01:25 PM

I understand. It's a very small file. rar file is essentially a zip file. You would open the rar file and put the "coding" file onto your desktop. When you click index.html it will open up in firefox or safari (mac) and run like a website. It will definitely work.

**TripleMoons** · 04-01-2009, 01:34 PM

Thanks for the information on the rar file. Learn something new everyday.

**LadynRed** · 04-01-2009, 01:40 PM

Except that you need a program like WinRar or 7Zip in order to OPEN a RAR file - Winzip won't natively unpack a RAR file.

**TripleMoons** · 01:48 PM

Ah-ha!

Well I have the Mac program Stuff-It, not a Windows program anyway.

**kkg** · 04-01-2009, 02:00 PM

Ladyn, mac has a program that will open rar files no problem

. if he had a windows machine i would have instructed him to download winrar

**TripleMoons** · 04-01-2009, 02:07 PM

Do you understand the problem?

Few people are going to download a program, to download a file just to help you correct your code. Upload the code to a host so it can be viewed. It's a lot easier for everyone else and you're more likely to get help.

**kkg** · 04-01-2009, 04:04 PM

Triple. You dont have to download a program. It will unzip just fine on your mac as long as you have OS X. Just download the rar and put the file on your desktop. ALSO in order to make sure the code they give me works they'd have to test it on my website. meaning they'll need the code anyways, meaning the rar file im providing is more useful than just posting a website link.

**TripleMoons** · 04-01-2009, 05:05 PM

You're not getting it. No one should have to download anything to view the website and help you. No one has to download anything to view the XHTML code (try View -> Page Source in your browser) or the CSS (FireFox has a lovely Web Developer tool that provides access to a website's CSS and you can even edit a live website CSS in it!) on anything posted online. I'm sure if you had just posted the link in the first place you would have a solution by now...At least I would have provided a solution by now.

Either way, good luck figuring out the problem.

**NewBreed** · 05:24 PM

Quote:

Originally Posted by TripleMoons

You're not getting it. No one should have to download anything to view the website and help you. No one has to download anything to view the XHTML code (try View -> Page Source in your browser) or the CSS (FireFox has a lovely Web Developer tool that provides access to a website's CSS and you can even edit a live website CSS in it!) on anything posted online. I'm sure if you had just posted the link in the first place you would have a solution by now...At least I would have provided a solution by now.

Either way, good luck figuring out the problem.

Proving TripeMoons point to end this painful conversation. I have not attempted to help because it was not online. First of all I don't trust any files being downloaded and don't want to take the time to check the files for any infections neither download them. I'm not trying to be discriminate, but I promise you'll get help if you just upload to a free server in the future.