Forum Moderators: not2easy
I am trying to understand how to use block items as links and using the hover/active attributes.
Here is the code of how I think it should work... :
#news-menu ul li {
display: block;
float: left;
margin-right: 11px;
color: #fff;
}#news-menu ul li a{
color: #fff;
}
#news-menu ul li a:hover{
color: #0ff;
}
<div class="news-menu">
<ul>
<a href="#"><li>anchor</li></a>
</ul>
</div>
The intent here is to make the block the link and have the attributes of the box change (text color) when the mouse hovers over it.
Thanks
Kevin
While at it: a little slimming down of divititis (the over-use of divs that are not needed) can;t hurt either.
Let's start with valid html:
<ul class="news-menu">
<li><a href="#">anchor</a></li>
</ul>
now a class="news-menu" matches up with .class-menu in CSS, not with #class-menu, that is for an element with id="class-menu".
A reset of the default margin and/or padding on lists implemented by the browsers bey default is also needed.
Anyway, try the following, in anything but IE6 (never design in IE, it will only set you on the wrong foot):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
.news-menu {
float: left;
background-color: black;
list-style:none;
padding: 0;
margin:0 11px 0 0;
}
.news-menu a{
display:block;
text-decoration:none;
color: #fff;
}
.news-menu a:hover{
color: #0ff;
}
</style>
</head>
<body>
<p>text</p>
<ul class="news-menu">
<li><a href="#">anchorlong</a></li>
<li><a href="#">anchor2</a></li>
<li><a href="#">anchor3</a></li>
</ul>
<p>more text</p>
</body>
</html>
The <a> inside the <ul>: display:block to cause it to be as wide as it's parent (a collapsed li (a block element itself by default that gets its width from the <ul>, which is floated).
it would all be done if it weren't for the stupid bugs in IE6.
It insists on rendering the white space between the <li>'s in the html and cause a double spaced look.
One solution is to rewrite the html to have it all on one line (something seen often on websites out there, even with comment sin the source code to not break the very long line). But I didn't want to change the html for IE6's sake that much.
After adding a bit of background on things to see which element goes where, it's apparent it's trick as as soon as the <li> gains hasLayout it'll expand to 100% width and not shrink the float, so that rules out setting a height.
Often floating the <li> away in IE helps, but not in this case as that collpases the <li> in width to the content it has (and the lines have differnt length rending the purpose of having display:block on the <a> elements useless.
After a bit I found that it would respond to line-height on the li without other adverse effects (as long as you undo the damage on the <a>, so that yielded:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
.news-menu {
float: left;
background-color: black;
list-style:none;
padding: 0;
margin:0 11px 0 0;
}
.news-menu a{
display:block;
text-decoration:none;
color: #fff;
}
.news-menu a:hover{
color: #0ff;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.news-menu li{
line-height: 1%;
}
.news-menu a{
line-height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<p>text</p>
<ul class="news-menu">
<li><a href="#">anchorlong</a></li>
<li><a href="#">anchor2</a></li>
<li><a href="#">anchor3</a></li>
</ul>
<p>more text</p>
</body>
</html>
All in all it took a while to find a workaround for the IE6 bug, the rest was nearly instant. I've never really looked into this deeply, but this "rending of the whitespace" might be related to the 3px jog bug (something that this code might well exhibit as well, untested).
Welcome to webmasterworld! ;)
I'm not sure what you want to achieve, but hopefully this will help clarify:
Changing the attributes of the "box"
ie doesn't accept :hover on anything but an <a>, so I'm guessing you mean a "box" created by padding the <a> to make it "bigger" than the text alone. First, resolve the following in the code:
The second chapter of the CSS Crash course [webmasterworld.com] covers selectors, and Chapter 4 deals with coding the pseudo classes link/hover/active.
Using Block items as links
Many techniques set display:block on the <a> to expand the <a> the full extent of the <li>, but that's not always necessary.
Creating the "box"
The float:left suggests a horizontal menu. If so, the most intuitive way would be to set display:inline-block, but unfortunately that is not well-supported. A simple and common technique was reiterated in the second post by SuzyUK [webmasterworld.com]. I've modified it to reflect your naming scheme, and commented some options. It works as designed in Op9.2, Op9.6, FF2, FF3, ie6, ie7, winSafari. (Adjust the dimensions as required, plus consider using ems and removing the containg div and styling the <ul> directly.)
body {background-color:silver}/*for testing*/
#news-menu ul {
width: 500px; /* menu width - set as required for the number of links */
margin: 0 auto; /* center the menu*/
padding:0;
list-style: none;
text-align: center;
border:1px solid blue; /* for testing*/
}#news-menu ul li {display:inline;}
#news-menu a {
float:left;
margin:0 10px; /* create space between each link */
/*width:100px; give each link a width if you wish to use line-height for height*/
line-height: 32px; /* center the text vertically*/
padding: 5px 10px; /* use padding to create space between the link text the edge of the link*/
font-size:14px;
color:#fff;
text-decoration:none; /*remove underline*/
border:1px solid red; /* for testing */
}#news-menu a:hover {
background-color: #fff;
color:#000;
}
A less common option uses display:table. It has the advantage of automatically centering the menu plus each of the "link boxes". This is a very common requirement and something other methods have trouble with. (Works in the browsers above, plus for fun, Op7 and ie5.5)
/*generic reset*/
* {
padding:0;
margin:0;
border:none;
}
body {background-color:silver}#news-menu ul {
width: 800px; /*menu width - set if required,otherwise use auto*/
margin: 0 auto; /* center the menu horizontally*/
text-align: center; /*distribute the li */
border:1px solid blue; /* for testing*/
}#news-menu ul li {
display:inline;
margin:0 10px; /* create horizontal space between each link. */
}#news-menu a {
/*width:100px; width, not required to achieve equal horizontal distribution */
line-height: 32px; /* center the text vertically*/
padding: 5px 10px; /* create the "box" */
font-size:14px;
color:#fff;
text-decoration:none; /*remove underline*/
border:1px solid red; /* for testing */
}#news-menu a:hover {
background-color: #fff;
color:#000;
}
Easily modify the above to create a vertical menu that floats left of the other elements on the page:
/*generic reset*/
*{
margin:0;
padding:0;
border:none}#news-menu ul {
float:left; /* menu will float left of next element in the html */
margin-right:20px;/*push the following element away */
width: 150px;
border:1px solid blue; /* for testing*/
}#news-menu ul li {
margin:10px 0;/* create horizontal space between each link "box"*/
list-style-type:none; /*remove default bullets*/
border:1px solid red; /*for testing*/
}#news-menu a {
display:block; /*notice block being used here */
height:100%; /* expand full height of the li*/
padding: 5px 0 5px 10px; /* create the "box" */
color:#fff;
background-color:#000; /* for testing */
text-decoration:none; /*remove underline*/
border:1px solid red; /* for testing */
}#news-menu a:hover{
background-color:aqua;
color:#000;
border:1px solid red; /* for testing */
}
There are so many ways to do this, and display:table is interesting, but suppport depends on a strict doctype. The example posted is a less common option because it removes the float applied to the <a> in the previous example based on suzyUK's.
I hope this hasn't caused too much confusion.
