Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 06-04-2009, 03:19 PM   #1
Fully Optimized
 
vampist's Avatar
 
Join Date: Oct 2008
Location: USA
Posts: 2,404
Default Cascading style sheet

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

__________________
Everyone's Favorite Turd xD
ET: "Phone home!"
Geek: "ping 127.0.0.1"

"If that guy knew half the $h*t that I know, his fuzzy little head would explode. " - Matthew Farrell
vampist is offline   Reply With Quote
Old 06-05-2009, 02:24 AM   #2
Wizard of Wires
 
setishock's Avatar
 
Join Date: Feb 2005
Location: Not sure
Posts: 10,030
Default 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.
__________________

setishock is offline   Reply With Quote
Old 06-05-2009, 08:35 AM   #3
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default 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
Daeva is offline   Reply With Quote
Old 06-05-2009, 11:50 AM   #4
Fully Optimized
 
vampist's Avatar
 
Join Date: Oct 2008
Location: USA
Posts: 2,404
Default Re: Cascading style sheet

Quote:
Originally Posted by setishock View Post
> 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 View Post
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..
__________________
Everyone's Favorite Turd xD
ET: "Phone home!"
Geek: "ping 127.0.0.1"

"If that guy knew half the $h*t that I know, his fuzzy little head would explode. " - Matthew Farrell
vampist is offline   Reply With Quote
Old 06-05-2009, 01:13 PM   #5
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default 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
Daeva is offline   Reply With Quote
Old 06-05-2009, 05:36 PM   #6
Fully Optimized
 
vampist's Avatar
 
Join Date: Oct 2008
Location: USA
Posts: 2,404
Default Re: Cascading style sheet

Quote:
Originally Posted by Daeva View Post
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!
__________________

__________________
Everyone's Favorite Turd xD
ET: "Phone home!"
Geek: "ping 127.0.0.1"

"If that guy knew half the $h*t that I know, his fuzzy little head would explode. " - Matthew Farrell
vampist is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 08:00 AM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0