Cascading style sheet

vampist · 06-04-2009, 02:19 PM

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>

setishock · 06-05-2009, 01:24 AM

> 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/ja...le.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.

Daeva · 06-05-2009, 07:35 AM

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.......

vampist · 06-05-2009, 10:50 AM

Quote:

Originally Posted by setishock

> 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/ja...le.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.

Quote:

Originally Posted by Daeva

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..

Daeva · 06-05-2009, 12:13 PM

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.

vampist · 06-05-2009, 04:36 PM

Quote:

Originally Posted by Daeva

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!

06-05-2009, 01:24 AM	#2
setishock Golden Master Join Date: Feb 2005 Location: usa Posts: 6,417	Re: Cascading style sheet > 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/ja...le.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. __________________ animeappeal.com is offline due to hosting issues. Hopefully I'll have it back up soon. Stay tuned...

06-05-2009, 12:13 PM	#5
Daeva In Runtime Join Date: Dec 2005 Posts: 407	Re: Cascading style sheet 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. __________________ **Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier. Edit = Best feature ever http://www.twitter.com/xDaevax

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

06-05-2009, 07:35 AM	#3
Daeva In Runtime Join Date: Dec 2005 Posts: 407	Re: Cascading style sheet 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....... __________________ **Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier. Edit = Best feature ever http://www.twitter.com/xDaevax