Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Writing the .css page

Status
Not open for further replies.
IronKitten

IronKitten

Technical User
Aug 9, 2001
28
US
I have an html code for EXACTLY what I want to do with a table. The problem is, I don't have the style sheet for it. I am on a time table and I don't have time to sift through all the CSS tuts out there for this one!

Here's the code....


<table style="cursor:pointer; background-color:#B9D4E6">
<tr>
<td onMouseOver="this.style.backgroundColor='#eeeee0';" onMouseOut=this.style.backgroundColor="#B9D4E6" onclick="bucks.htm'">Bucks</td>
<td onMouseOver="this.style.backgroundColor='#eeeee0';" onMouseOut=this.style.backgroundColor="#B9D4E6" onclick="does.htm'">Does</td>
<td onMouseOver="this.style.backgroundColor='#eeeee0';" onMouseOut=this.style.backgroundColor="#B9D4E6" onclick="kids.htm'">Kids</td>
<td onMouseOver="this.style.backgroundColor='#eeeee0';" onMouseOut=this.style.backgroundColor="#B9D4E6" onclick="guest%20book.htm'">Guest Book</td>
<td onMouseOver="this.style.backgroundColor='#eeeee0';" onMouseOut=this.style.backgroundColor="#B9D4E6" onclick="newsletter.htm'">Newsletter</td>
</tr>
</table>

I need to figure out how to write the .css page. It is in the <head> portion of my page for other styles.. I just can't figure out how to write this one.

Thanks in advance!
Jodi

 
Sort by date Sort by votes

You can't replicate onmouseover and onmouseout in CSS repliably. While you can certainly move the table css to a style section, thus:

Code: 
table {
	cursor: pointer;
	background-color: #B9D4E6;
}

The only way you'll get the mouse events is to use the "hover" pseudo-class. And in IE, this only works for A tags. If you put A tags inside your TDs, you could use it, but then you'd have links to deal with.

Hope this helps,
Dan
 
Upvote 0 Downvote
What is it that you want to do?

Your code is for a table that seems to be using javascript to change the colours of the cells.

Are you looking for a way to emulate the javascript behaviour using just CSS?

BTW, your site menus don't work in Opera.
 
Upvote 0 Downvote
Dan,

I got this code from a guy in another forum. He wrote:

"Very simple. When you move your mouse over each of the above 2 cells, there is an immediate color change, unlike my "fading" color change effect (indicated in the next example below). There is no special scripting needed for the above. All that is needed are onMouseOver and onMouseOut functions called for in each table cell, along with css styling for the cursor and background color change."

I don't know much about CSS, I've been using SSI for so long, and I've gotten lazy. I've just ended up writing a script for it... (been up all night!) but I'd rather learn to use style sheets.

Foam, I've not tested it in Opera.... thanks for letting me know... I hate that stupid menu anyway. Just gives me an excuse to get off my butt and change it... Thanks.

 
Upvote 0 Downvote
That original bit of code you posted works ok in IE6, Opera and Mozilla under windows. Not tested on a mac or linux etc.

What is it you need?
Do you want to redo that effect using CSS?

I don't quite understand what you mean when you say
The problem is, I don't have the style sheet for it
Click to expand...
Unless of course, you mean that you are trying to do the same thing but with CSS.
As was stated IE doesn't properly support the :hover psuedoclass for anything other than <a> tags. Consequently you can "cheat it" by using something like:
Code: 
td a:hover, td:hover {
	background-color: #ff0000;
}

This will change the table cell colour in browsers that support it, and just the text background for those that don't. It won't change the background colour of links that aren't in table cells. You might be better off setting up a class specifically for your nav bar links.

Hope that is of some help.

Do you mean you wish to style the text and cells etc using CSS? In which case it would be hard to tell you how to do it as we don't know what you actually want it to look like!
 
Upvote 0 Downvote
If you want to change that table into a more modern design, you might consider completely rewriting it:
Code: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Menu</title>
    <style type="text/css">
div.menu {
	top: 5px; /* define the position of the menu */
	left: 5px; /* define the position of the menu */
	width: 100px;
	margin: 0;
	padding: 0;
	background: #B9D4E6;
}

div.menu a {
	display: block;
	background: transparent;
	font: normal 0.8em Tahoma, Arial, sans-serif;
	text-decoration: none;
	width: 90px;
	padding: 1px 5px 1px 5px;
}

div.menu a:hover {
	background: #eeeee0;
}
    </style>
  </head>
  <body>
    <div class="menu">
      <a href="bucks.htm">Bucks</a>
      <a href="does.htm">Does</a>
      <a href="kids.htm">Kids</a>
      <a href="guest%20book.htm">Guest Book</a>
      <a href="newsletter.htm">NewsLetter</a>
    </div>
  </body>
</html>
With box model being fixed in IE, this works perfect in IE6, Mozilla 1.5 and Opera 7.23.
 
Upvote 0 Downvote
Foam, what I mean to say is that I don't have an external (?) file, a .css file with the style in it... because I don't know how to write it...

and vragabond, I had NO idea you could write it right into the page like that.. I am remembering now why I didn't learn CSS when I first heard of it... it's like a whole new language.

Out of curiosity, why, realistically, if I can get all the free javascripts in the world, and easily learn to manipulate it to work for me, and use SSI to make quick easy changes site wide, why would I want to take the time to learn CSS? what would make me want to invest my time to do it? From a practical standpoint.... I LOVE learning new coding techniques, but I don't have a lot of "leisure time" if you know what I mean....

Thanks a LOT for all your help ! This place always rocks.

 
Upvote 0 Downvote
There is no real reason for you to learn CSS - as long as you're content with writing lots and lots and lots of repititious html formatting code. But, if you're like most programmers who don't really enjoy typing the same thing, line after line, then CSS is by far the better method for formatting your content while using HTML as a delivery method.

You can continue to write lots of redundant code and continue to not "have a lot of leisure time", or take a few hours and have a lot more leisure time - the choice, of course, is entirely yours.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
CSS will also allow you to make future proof, standard compliant websites that are much easier to maintain and *can* perform more effectively in search engines etc.

CSS is pretty simple to get the hang of. I would say it's alot easier to learn than JavaScript.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
698
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
366
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
289
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
320
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top