Printable View
If I wanted to use CSS to create a menu similar to the popup menus on VBF that change the backcolor when you mouseover then and not just the link portion?
I dont need it to popup, only look and when mouseovered act the same.
I went through the css code but I cant get it to work at all.
Here is an example.
Thanks
make ur links a list and in css for the link hover property do ul: alink hover thingy and pick the color cause the ul is the background while the li are the links
But that only changes the background color of the text in the link and not the entire cell.
style the li:hover to be the same as your a:hover......
Here's what I have on my site:
the #pages is the ID of a ul list where pages for the site are...Code:#pages li {list-style-type: square;}
#pages .page_item:hover {list-style-type: square; color: #800000; }
#pages .page_item:hover ul {list-style-type: circle; color: #ffffff; }
#pages li .page_item{list-style-type: circle; margin-left: 5px; list-style-position: inside; border: 0px; border-bottom: 1px solid #800000; border-left: 1px solid #800000;}
#pages li .page_item a {text-decoration: none;}
#pages li .page_item:hover{list-style-type: disc; color: #800000;}
Each li item is classed with "page_item" so in the CSS I used #pages .page_item:hover to get a rollover effect. The key is the first two items. I don't change the background color in mine, but if you do, you may want to make the background-color of your a tags transparent in the list. It's easier that way. Then you can change the background-color of the li tag w/o needing to also do the a tag.
-tg
You need to use the onmouseover and onmouseout events and change the className atrribute of the element. This is quite simple:
Example here: http://adam.codedv.com/examples/div_highlight.htmlCode:<html>
<head>
<title>Highlight a Div</title>
<style type="text/css">
.highlight {
background-color: gray;
}
.borderDiv {
border: 5px solid black;
}
</style>
<script type="text/javascript">
<!--
function toggleHighlight(element)
{
if (element.className.search(/highlight/) != -1) // check if the highlight style has already been applied
{
element.className = element.className.replace(/highlight/, ''); // if it has, remove it
}
else // if it hasn't add it
{
if (element.className.length > 0)
{
element.className = element.className + ' highlight'; // add it to the original class name
}
else
{
element.className = 'hightlight';
}
}
}
//-->
</script>
</head>
<body>
<div class="borderDiv" onmouseover="toggleHighlight(this);" onmouseout="toggleHighlight(this);">
<a href="http://www.vbforums.com/">A Link To VBForums</a>
</div>
</body>
</html>
Yes, like that Adam but its using JS. Isnt that bad in case some users dont have JS enabled? I thought it could be done completely without using JS?
It took me time to reply :) - most CSS browser have JS enabled. But the user can disable it. In which case the CSS only one which tg shows is the better option as it accomodates the lowest common denominator.
I've modified the example so it uses tg's suggestion too. You may want to fiddle the CSS to get rid of the bullet point though.
Like this?
Code:<html>
<head>
<title></title>
<style type="text/css">
td
{
font-size: 16px;
width:130px;
border:1px solid blue
}
td a
{
text-decoration: none;
color:blue;
background-color: white;
display:block;
}
td a:hover
{
background-color: blue;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="">Link</a>
</td>
</tr>
<tr>
<td>
<a href="">Link</a>
</td>
</tr>
<tr>
<td>
<a href="">Link</a>
</td>
</tr>
<tr>
<td>
<a href="">Link</a>
</td>
</tr>
<tr>
<td>
<a href="">Link</a>
</td>
</tr>
</table>
</body>
</html>
yak - that's only going to change the a tag.... not the cell as the user hovers over it.
the td:hover also needs to be styled... and if it's the same as the a: hover.... you can do it like this:
-tgCode:td:hover, td a:hover
{
background-color: blue;
color: white;
}
is this wat ur trying to do?
www.ninjanutz.t35.com -> my link buttons
I get a 404 error.
@TG, the "td:hover" is a hover event for the table data tag or is it just missing the a tag in there?
Well maybe I misunderstood, I thought he wanted to change the entire background color of the cell, that the link is in? Like this:
yak -yeees.... which is why you have to add :hover to the td cell.... otherwise, if you only :hove the a tag, and it doesn't span the entire width of the cell..... you get a partialy filled in cell....
@RD - yes, it's the hover for the table cell... as I was just telling yak, the width of the a tag is going to vary according to it's contents, so unless the a tag spans the entire width of the table cell, you'll get a partial fill in the cell..... Alternatively I think you can set the width:100% for the a tag in a td cell in your menu.... then you shouldn't need the td:hover.
-tg
Hmmmmm mine seems to be coloring the entire cell, only tested in FF though...
Thanks guys, hopefully I can get some time to complete the menu by tomorrow. I am glad to hear that I can have an all css menu with rollover effects just like the quick links popup menu without the popup.
So as long as I place the custom links and tds before the general ones they should get applied correctly.
I'll be back when I can to give an update and ask any other questions I may have implementing this.
http://ninjanutz.t35.com/templates/index.php sorry my link was wrong
Yes, like that. I see you dont use any tables, only DIVs. Are tables outdated now? Should I switch to DIVs and ordered lists for this?
i tried tables...got tired of em divs seem to be easier
But DIVs are newer and should I be using them?
Also, using tgs example, how do I get different styles for different TDs and if I switch to DIVs then what do I do?
Code:td:hover, td a:hover
{
background-color: blue;
color: white;
}
I only used tables because I remember a thread back, and thought you were using tables. :blush: Although divs are better than tables, in some situations. Some people will think they are doing well, by changing their tables to divs, then they have 30 divs instead of 30 tables, in that case, divs are not better. But back to topic, with a menu, i'd use a list..I believe techgnome's css is assumed using a list.
Good luck;
@RD... Take a look at my site ( http://tannagh.com ) is the menu on the left there what you are looking for? (the rollover is sublte, but noticable.).... You may want to use ul/li tags (that's what mine is made of)... after all that's what a menu is -- a list of options.
As for using tables, with CSS gaining, it's become the conventional wisdom that tables should be used for showing tablular data, not controling layout.
I've found the following resources helpful:
http://www.positioniseverything.net/
http://www.csszengarden.com/
http://www.alistapart.com/
and the webdeveloper extention for Firefox...
-tg
Just set display:block for the "a" elements. Makes them fill out the entire available space.