471,570 Members | 932 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,570 software developers and data experts.

Simple Menu using UL/LI and A

karlectomy
Hello,

I want to make the whole <li> element a link and clickable. here is my code that I have:
Expand|Select|Wrap|Line Numbers
  1. #nav {
  2. background-color:#99CCFF;
  3. border-color:#000066;
  4. border-style:solid;
  5. border-width:.75px;
  6. width:150px;
  7. height:700px;
  8. }
  9.  
  10. #menu {
  11.     list-style-type:none;
  12.     padding-left:4px;
  13.     margin:0px;
  14. }
  15.  
  16. #menuitem {
  17.  width:140px;
  18.  border-style:solid;
  19.  border-color:#000000;
  20.  border-width:.75px;
  21.  padding-top:5px;
  22. }
  23.  
  24. #nav a, #nav a:visited {
  25. text-decoration:none;
  26. color:#000000;
  27.  
  28. }
  29.  
  30. #menuitem li:hover {
  31.   background-color:#CCCCCC;
  32. }
  33.  
  34. <div id="nav">
  35.     <ul id="menu">
  36.         <a href="index.htm" id="menulink"><li id="menuitem">Home</li></a>
  37.         <a href="bio.htm" id="menulink"><li id="menuitem">Bio</li></a>
  38.         <a href="articles.php" id="menulink"><li id="menuitem">Articles</li></a>
  39.         <a href="clients.php" id="menulink"><li id="menuitem">Clients</li></a>
  40.         <a href="links.htm" id="menulink"><li id="menuitem">Links</li></a>
  41.     </ul>
  42. </div>
  43.  
Does anyone have any suggestions?
Nov 7 '07 #1
10 1846
drhowarddrfine
7,435 Expert 4TB
'id' is a unique name which is given to one element only. If you must use the same style for multiple elements, use 'class'.

You are using :hover for the <li> element. This will only work in modern browsers and not IE6.
Nov 7 '07 #2
'id' is a unique name which is given to one element only. If you must use the same style for multiple elements, use 'class'.

You are using :hover for the <li> element. This will only work in modern browsers and not IE.
I know I know, i was trying to use the hover for style. But I want to make the whole <li> clickable. Do you know how to do this?
Nov 7 '07 #3
drhowarddrfine
7,435 Expert 4TB
You cannot have the <a> outside the <li> because <a> will be treated as another element, which would be illegal for an <ul>.

So, <li><a href.......

Then, in css, you need to make the <a> extend the width of the <li>. But <a> is inline while <li> is block level. So:
ul li a{display:block;width:200px}

Another way to do that is position it:
ul li a{float:left;width:200px;}

The float is necessary to position it but you can use any positioning method, I think. Don't recall if you also have to position the <li> to the same width as the <a>.
Nov 7 '07 #4
You cannot have the <a> outside the <li> because <a> will be treated as another element, which would be illegal for an <ul>.

So, <li><a href.......

Then, in css, you need to make the <a> extend the width of the <li>. But <a> is inline while <li> is block level. So:
ul li a{display:block;width:200px}

Another way to do that is position it:
ul li a{float:left;width:200px;}

The float is necessary to position it but you can use any positioning method, I think. Don't recall if you also have to position the <li> to the same width as the <a>.
Ok, I'm a little slow. I'm creating a Vertical Menu... Not horizontal for which the float left is necessary.

Do you know how this could work with a vertical menu?
Nov 7 '07 #5
drhowarddrfine
7,435 Expert 4TB
Perhaps you read my post before I edited it. Use the css for 'display:block'.
Nov 7 '07 #6
Have I ever told you, you're my hero.

Thanks for pointing me in the right direction. That really helped a lot.

Remember, you are the wind beneath my wings.
Nov 7 '07 #7
Markus
6,050 Expert 4TB
Javascript would make that so easy! No need to expand the <a> n such.

Expand|Select|Wrap|Line Numbers
  1.  <script type="text/javascript" language="javascript">
  2.   function goToLink(url){
  3.     window.location = "http://"+url+""
  4.     }
  5.  </script>
  6.  
Expand|Select|Wrap|Line Numbers
  1. <a onclick="goToLink('url_here')">go to</a>
  2.  
Sorry if i strayed from your question.
Nov 7 '07 #8
Javascript would make that so easy! No need to expand the <a> n such.

Expand|Select|Wrap|Line Numbers
  1.  <script type="text/javascript" language="javascript">
  2.   function goToLink(url){
  3.     window.location = "http://"+url+""
  4.     }
  5.  </script>
  6.  
Expand|Select|Wrap|Line Numbers
  1. <a onclick="goToLink('url_here')">go to</a>
  2.  
Sorry if i strayed from your question.
I try to stay away from javascript. We got into a drunken argument and we don't really talk anymorre
Nov 7 '07 #9
drhowarddrfine
7,435 Expert 4TB
Javascript would make that so easy! No need to expand the <a> n such.

Expand|Select|Wrap|Line Numbers
  1.  <script type="text/javascript" language="javascript">
  2.   function goToLink(url){
  3.     window.location = "http://"+url+""
  4.     }
  5.  </script>
  6.  
Expand|Select|Wrap|Line Numbers
  1. <a onclick="goToLink('url_here')">go to</a>
  2.  
Sorry if i strayed from your question.
I don't see how all that is simpler than:
ul li a{display:block;width:200px}

Plus it works even if js is disabled.
Nov 7 '07 #10
I don't see how all that is simpler than:
ul li a{display:block;width:200px}

Plus it works even if js is disabled.
I concur with your findings
Nov 8 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by dr. zoidberg | last post: by
1 post views Thread by Michael Champagne | last post: by
1 post views Thread by BenOne© | last post: by
3 posts views Thread by trialanderror | last post: by
6 posts views Thread by Sergio | last post: by
5 posts views Thread by Rob Somers | last post: by
22 posts views Thread by tricard | last post: by
6 posts views Thread by yefei | last post: by
4 posts views Thread by Timmah1980 | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.