Cascading style sheet

vampist

Fully Optimized
Messages
2,404
Location
USA
Alright Let me upload this.. ok Link.

As you can see I have a simple banner with a link menu.
What I am having trouble with.. because I have usually used images..
is..
Links. and li's.
I want the whole thing to be like a link not just the words "home". As you can see you can hover the mouse over the li and the :hover changes it. But if you click.. Nothing happens.

I have tried
Code:
<button></button>
, and putting border around the a href.


Take a look at the source here :
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>title</title>
<style type="text/css">
body { width:100%; margin:0px 0px; padding: 0px 0px; }

div.banner {
width: 600px; height:100px; margin: -1px 0px -1px 0px; padding: 0px 0px 0px 0px;
background-color:transparent; border: 1px solid #000; }

div.menu {
width: 600px; height:21px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
background-color:transparent; border: 1px solid #000;}

div.menu li {
float: left; width:auto; height:100%; margin: -1px 0px -1px -1px; padding: 0px 10px 0px 10px;
background-color:transparent; border: 1px solid #000;
list-style-type: none;}

div.menu li:hover {
float: left; width:auto; height:100%; margin: -1px 0px -1px -1px; padding: 0px 10px 0px 10px;
background-color:#33F; border: 1px solid #000; opacity:0.8; filter:alpha(opacity=80)
list-style-type: none;}

div.menu li.right {
float: right; width:auto; height:100%; margin: -1px -1px 0px 0px; padding: 0px 10px 0px 10px;
background-color:transparent; border: 1px solid #000;
list-style-type: none;}

div.menu li.right:hover {
float: right; width:auto; height:100%; margin: -1px -1px 0px 0px; padding: 0px 10px 0px 10px;
background-color:#33F; border: 1px solid #000; opacity:0.8; filter:alpha(opacity=80)
list-style-type: none;}

div.menu li a { 
font-family:"Sans-serif",Georgia,Serif; font-size: 12px; font-style:oblique;
text-decoration:none; text-transform:uppercase;
font-weight:lighter; color:#000;}

div.menu li a:hover {
font-family: "Sans-serif",Georgia,Serif; font-size: 12px; font-style:oblique;
text-decoration:none; text-transform:uppercase;
font-weight:lighter; color:#FFF;}
</style>
</head>
<body>
<div align="center">
    <div class="banner"></div>
    <div class="menu">
        <li><a href="javascript:(void)">home</a></li>
        <li><a href="javascript:(void)">page</a></li>
        <li><a href="javascript:(void)">forum</a></li>
        <li class="right"><a href="javascript:(void)">logout</a></li>
        <li class="right"><a href="javascript:(void)">forum</a></li>
    </div>
</div>
</body>
</html>
 
I believe what you are looking for in css is a:active.

That should handle a color change on your click.
Code:
...css...mmmmmm....toasty....
a:hover {
  background-color: #7878ab;
}
a:active {
  background-color: #78ab78;
}
a:link {
  background-color: #787878;
}
....css.......
 
> On click < is the next step from hover or onmouseover.
I've spent a lot of time at this one trying things out. Used a few at my anime site.
http://www.htmlgoodies.com/beyond/javascript/article.php/3470771

Check over at www.dynamicdrive.com. They have all kinds of prefabed goodies for tabs. If you click on the > Need help < tab at AnimeAppeal, you'll see one of the scripts I got from there.

I think I might have an idea on how to do it. I found out you can do a
Code:
<a href "javascript:(void)"><span>Link</span></a>
Dynamicdrive.com has helped me with a lot thanks.

I believe what you are looking for in css is a:active.

That should handle a color change on your click.
Code:
...css...mmmmmm....toasty....
a:hover {
  background-color: #7878ab;
}
a:active {
  background-color: #78ab78;
}
a:link {
  background-color: #787878;
}
....css.......

No dude.. That is not what I am talking about at all..
 
Sorry about that, not exactly sure what I was I thought I read ;). I always try and avoid using javascript whenever possible (at least for display elements). Set and attribute of display: block for the a element and you'll be golden.
a, by default inherits a display: inline; attribute, which wraps the container of the text (see visual model and box models). By setting display: block, you give it block level attributes, and can therefore allow the entire li box to be clickable.
Span elements also inherit display: inline;.
I recently finished a site where we used this for our navigation.
http://www.tetoncapitalgroup.com/
The main navigation is a list. In order for the entire background-image to display on the link, it had to have display block, otherwise part of the background-image would be hidden. It is the same concept as what you are describing.
 
Sorry about that, not exactly sure what I was I thought I read ;). I always try and avoid using javascript whenever possible (at least for display elements). Set and attribute of display: block for the a element and you'll be golden.
a, by default inherits a display: inline; attribute, which wraps the container of the text (see visual model and box models). By setting display: block, you give it block level attributes, and can therefore allow the entire li box to be clickable.
Span elements also inherit display: inline;.
I recently finished a site where we used this for our navigation.
http://www.tetoncapitalgroup.com/
The main navigation is a list. In order for the entire background-image to display on the link, it had to have display block, otherwise part of the background-image would be hidden. It is the same concept as what you are describing.

ah ha! That is what I am lookin for! You da man!
 
Back
Top Bottom