Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Some CSS Help

Me1000

Me1000

macrumors 68000
Original poster
Jul 15, 2006
1,794
4
Hello,

ok let me describe my setup, I have a simple table,

The table has a background image set in the HTML, now I want to make it so that when the user moves the mouse over any of the cells in the table it have a hover effect,

The effect would (in theory) be a 1x1px image (white) and it would stretch to fill the whole cell automatically, but the image would also have to be about 75-90% transparent.

If im not mistaken this can be done with CSS, easily,
Im defiantly not a CSS expert, but i know enough to do some editing!



Thanks,
 
well starts out with... i'm pretty sure...
table:hover {

}

i'm not sure what the rest is, i have a really good refrence book for this sort of thing but i lost it...
 
td:hover{
background-image : <url>;
background-repeat : repeat;
background-attachment : fixed;
}

i think something like that should do it

:edit: oops forgot transperancy, isn't listed in my reference, but i think you could use a an image that was a GIF that was transperant already.
 
ok one more quicky, this is only for one set of cells, if i read it correctly, that would make it id for all the cells, on the page, how do I name it? :eek:
 
so you want only certain cells to have this effect when you put the mouse over it?

ummm, not sure how to do this
 
oh right, i was thinking for a sec that it would only be that one cell because the html code is

table
tr
td
text
/td
/tr
/table

so i thought it would only affect that one cell.
 
thinking about it again, there is really no need for an image, a simple background color, with a transparency would do...


here is what i have so far...
Code: 
.subnav td:hover{
background: #FFFFFF;
filter:alpha(opacity=50);   /* Internet Explorer       */
-moz-opacity:0.5;           /* Mozilla 1.6 and below   */
opacity: 0.5;               /* newer Mozilla and CSS-3 */

}

and this is part of the page

Code: 
<td id="subnav" class="subnav"><a href="http://www.link.com/"><b><div id="subnav">LINK 1</div></b></a></td>

and I am aware that some of my page's code is redundant, but I was going to mess with it until it worked, then get rid of the redundant stuff, but feel free to tell me,

What is the difference between ID, and class? lol
 
i think not realy sure though, that the difference between the class and id is so that you could have more than one set of css properties associated with it
 
It has to be translucent though, because it will show up over a multicolor background...
 
i'm sorry i don't know how to do the opacity... but looking at your code, does that work right

i'm using safari, and i can only get the stylesheet to work if i have something like

td.subnav:hover {
...
}
 
when i use this code it works for me in safari:

td.subnav:hover {
background-color : red;
opacity: 0.1;
}
 
ok, thanks

That got me around the first hump,

I hope I am able to fix the small bugs now!


Thanks for all your help!
 
ok now I have another question,

I have declared a class (subnav)
the links for this class need to be different than all the other links on the page

Here is what I have, but the syntax is wrong,

Code: 
.sub_nav {
	color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14;
	font-weight: bold;
}
a.sub_nav:link {
	color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
a.sub_nav:visited{
	color: #FFFFFF;
}
a.sub_nav:hover {
	color: #FF0000;
	background-color : white;
	opacity: 0.25;
}
a.sub_nav:active {
	color: #237cc4;
}
 
the class before was "subnav"
now it's "sub_nav" ??
what exactly is wrong with it... what isn't it doing?
the last set, a.sub_nav:active, the color code isn't the propper hexidecimal type
 
well its not doing anything, when I move over the link it stays the same as the normal state, (of the sub_nav class)

here is the HTML

Code: 
<a href="http://www.google.com/"><b><div class="sub_nav">LINK 1</div></b></a>

if I move the div tags outside the <a> tags then the links are treated like regular links,

for now, when i rollover the regular white text the textcolor should change to red, but it stays white!
 
No, lol ;)

I took them out, but it didnt change anything!
 
all the info for sub_nav is for if you have a link that is of the class sub_nav
so you have to have the link be of the sub_nav class and delete the div tags

OR

change all the css stuff to have div instead of a
ex
div.sub_nav:hover { ...
 
I figured it out...

not exactly what i want though,

to get the desired effect, I removed the Div tags,
and added the class inside the <a> tag

Code: 
<a class="subnav" href="http://www.google.com/">LINK 1</a>

now what I really would like to do, is set the dif tags outside all the links in the table

Code: 
<tr><div class="subnav" >
    <td><a href="index.php"><b>Home</b></a></td>
    <td><a href="index.php?page_id=2"><b>CONTACT US</b></a></td>
    <td><a href="index.php?page_id=49"><b>GUESTBOOK</b></a></td>
    <td><a href="index.php?page_id=3"><b>LINK TO US</b></a></td>
    <td><a href="index.php?page_id=5"><b>NEWS/UPDATES</b></a></td>
 </div> </tr>

Then I can set it so that if its not a link do something, if it is a link do what i have it set to...

ill keep playing, cuz i know there is a way,
but feel free to tell me how I will be checking back here as I get frustrated lol
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back