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
, and putting border around the a href.
Take a look at the source here :
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>
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>