list items (li's) as links [Archive]

aj_nsc

02-24-2007, 12:17 PM

I have a list of links on an opening page. For a note, each li also has a line-height of 45px (to give the centering effect). I was just wondering how you can make the whole li act as a link instead of just the text that's in it?

So I want my link's to appear hovered when you move the mouse anywhere inside the specified li instead of just over the text....just trying to clarify what I want to know. Thanks.

aswebdesign

02-24-2007, 02:02 PM

li a {
display: block;
}

aj_nsc

02-24-2007, 03:03 PM

thanks

aj_nsc

02-24-2007, 10:29 PM

as per always, IE has to be different. Is there any way to do the same thing in IE, because this doesn't work? thanks.

Centauri

02-25-2007, 05:30 AM

As well as the block display on the <a> tag, also give the <a> height (45px ?).

Cheers
Graeme

WebJoel

02-25-2007, 10:55 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:12px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}

#myLinks {margin:25px;}
#myLinks ul {background-color:#ececec;}
#myLinks li {list-style-type:none; display:inline;width:75px; height:4px; }
#myLinks li a {text-align:center;padding:10px 15px 10px 15px; border:1px solid black; }
#myLinks li a:hover {background-color:#ef9cef;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<ul id="myLinks">
<li><a title="One" href="#">Link One</a></li>
<li><a title="Two" href="#">Link Two</a></li>
<li><a title="Three" href="#">Link Three</a></li>
<li><a title="Four" href="#">Link Four</a></li>
<li><a title="Five" href="#">Link Five</a></li>
<li><a title="Six" href="#">Link Six</a></li>
<ul>

</body>
</html> This seems to work for IE. Essentially, IE can't handle the psuedo-class "a:hover;" on anything except links. You are trying to 'light up' the <li> here. IE can't do that without some help.
There is an *htc fix for this, but you can also merely extend the padding of the link to encompass the <li> and acheive a reasonable simularlity.