The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
Using CSS with TD tags
Discuss Using CSS with TD tags in the CSS Help forum on Dev Shed.
Using CSS with TD tags Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
March 25th, 2003, 03:55 PM
|
|
Contributing User
|
|
Join Date: Feb 2002
Location: San Ramon, CA
Posts: 72
Time spent in forums: 4 h 42 m 9 sec
Reputation Power: 12
|
|
|
Using CSS with TD tags
I am discovering the abilities of CSS and it is very interesting
I do have a question though
Cann CSS be used to do two different sets of things at once
A: allows you to manipulate text in an anchor tag in some desired way
A:hover modifesit when the mouse is over the anchor tag
TD will let you set different parameters
I would like to set a background image or color in TD tag which I think is very easy but I want to change to another image or color it when I move the mouse over the tag
almost like a
TD:hover
<STYLE>
TD {
background-color : #FFFF00;
}
TD.HOVER {
background-color : #FF00AA;
}
</STYLE>
I know this does not work but it may describe what I am trying to do in a better way
Thanks for your time
Last edited by jjanes : March 25th, 2003 at 03:57 PM.
|
March 25th, 2003, 05:45 PM
|
 |
|<.+#f@#+.&.|
|
|
Join Date: Mar 2002
Location: norway
|
|
hover on td elements
works fine in css-capable browsers
like mozilla or opera7,
though if you are stuck with ie, then you must find some workaround 
|
March 25th, 2003, 06:30 PM
|
 |
Wiser? Not exactly.
|
|
Join Date: May 2001
Location: Bonita Springs, FL
|
|
You could use some combination of CSS and JS. Something like so:
At the top of the page:
Code:
<style type="text/css">
TD {
background-color: #fff;
color: #000;
}
TD:hover {
background-color: #000;
color: #fff;
}
</style>
<script type="text/javascript">
var IE=(navigator.appName.indexOf('Microsoft') != -1);
</script>
Then on your <td> tags, use this onmouseover script.
Code:
<td onmouseover="if (IE){ this.style.backgroundColor='#000'; this.style.color='#fff'; }">....</td>
Give that a shot.
|
March 26th, 2003, 12:50 PM
|
|
Contributing User
|
|
Join Date: Feb 2002
Location: San Ramon, CA
Posts: 72
Time spent in forums: 4 h 42 m 9 sec
Reputation Power: 12
|
|
|
I am stuck in IE so I tried the scripts and AND BAM IT WORKED
THANKS ALOT
that script worked GREAT I added a mouse out to turn it back to the orignal and it is working great
Damn now I have to go change all my websites to incorporate that script
Jeff
|
March 26th, 2003, 08:19 PM
|
|
Contributing User
|
|
Join Date: Feb 2002
Location: San Ramon, CA
Posts: 72
Time spent in forums: 4 h 42 m 9 sec
Reputation Power: 12
|
|
|
I guess the person who wrote the last post missed my sarcasm.
I won't be sarcastic in this post.
I just implied I have a lot of sites I am planning on using this in.
I thank you again for your help it does work great. It will make my menu coding snippits much easier to use
Thank you again Akh and kicken
|
March 27th, 2003, 01:13 PM
|
|
Junior Member
|
|
Join Date: May 2002
Location: The Rock
Posts: 5
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
you can just specify a seperate class and use javascript to switch between them on whatever event you want. For example:
Code:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.BUTTONTABLE {
BORDER:black solid 1px;
}
.BUTTON{
BACKGROUND:red;
COLOR:white;
TEXT-ALIGN:center;
}
.BUTTONOVER {
BACKGROUND:blue;
COLOR:white;
CURSOR:pointer;
TEXT-ALIGN:center;
}
-->
</style>
</head>
<body>
<table width="300" border="0" cellspacing="0" cellpadding="4" class="buttontable">
<tr>
<td class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';">Button 1</td>
<td class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';">Button 2</td>
<td class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';">Button 3</td>
</tr>
</table>
</body>
</html>
This page makes a simple horizontal nav bar (simply add <tr>s to create a vertical one) with 3 buttons on it that respond to the onmouseover and onmouseout events to create a nice simple rollover effect. There's nothing stopping you from using images for the background, different border colors, text effects, or anything else CSS supports in the definition either. You can also, of course, put the style definitions in a seperate linked .css document rather than in the <head> of the current document and it will still work.
It works with all the browsers I've tested it on too. You can even extend it further by specifying an "onclick" event in the TD to send you to your location of choice, rather than putting in normal <a href="... links (which would then have to be styled) within the <td>s.
|
March 27th, 2003, 03:44 PM
|
|
Contributing User
|
|
Join Date: Feb 2002
Location: San Ramon, CA
Posts: 72
Time spent in forums: 4 h 42 m 9 sec
Reputation Power: 12
|
|
|
another great idea I knew I came to the right place
thanks again
never even thought about the onclick aspect thanks for that too
Jeff
|
March 27th, 2003, 03:55 PM
|
|
Contributing User
|
|
Join Date: Feb 2002
Location: San Ramon, CA
Posts: 72
Time spent in forums: 4 h 42 m 9 sec
Reputation Power: 12
|
|
One question is it possible to makes changes to a 'parent tag'
such as
<table>
<tr>
<td class=abc> <---- this changes when anchor is rolledover
<a onmouseover=parenttd.className='class1' >xyx</a>
</td>
</tr>
</table>
when doing a mouseover of the anchor tag changes the class of the td tag that contains it
forgive my syntax but I think you understand what I am asking
|
March 27th, 2003, 06:58 PM
|
|
Wiser? Not exactly.
|
|
Join Date: May 2001
Location: Bonita Springs, FL
|
|
Yes, different forms though. in IE you would use this.parentElement and in Gecko(Mozilla, NS, etc) you would use this.parentNode
So if you reuse that IE detect script from before, something like this should do it:
Code:
<table>
<tr>
<td class=abc>
<a onmouseover="if (IE){
this.parentElement.className='class1';
} else {
this.parentNode.className='class1';
}">xyx</a>
</td>
</tr>
</table>
|
March 27th, 2003, 07:22 PM
|
|
Contributing User
|
|
Join Date: Feb 2002
Location: San Ramon, CA
Posts: 72
Time spent in forums: 4 h 42 m 9 sec
Reputation Power: 12
|
|
|
OK thanks for ALL the help. I look forward to seemy web pages works as smoothly as I expect them to with the help of this information
Jeff
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
