16 replies [Last post]
Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Hello all

This is my first post as I'm a total newbie as far as css goes. I've attempted the following roll overs in CSS:

http://www.nores.org.uk/misc/Untitled-3.htm

The roll overs seem to work aside from the fact that the complete TD is not being filled - only that area covered by the text. Is this possible or do I simple need to use images in layers?

Note: I would like the solution - if it exists - to be as browser friendly as possible.

Cheers!
Steiner

P.S. The CSS style looks like this:

a.effect1:link {color: ;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
background-color: transparent;
}
a.effect1:active {color: ;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
background-color: #666666;
display: block;
background: repeat;
}
a.effect1:visited {color: ;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-style: normal;
background-color: transparent;
}
a.effect1:hover {color: ;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #FFFFFF;
display: block;
background-color: #666666;
}

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to change 'complete' TD background on hover??

To answer your immediate question first. Try putting:

.effect1 a,
.style9 a {line-height:2em;}

at the end of your CSS. What this is doing is expanding the line height to fill the td.

Having said this, I think you are going about your menus all wrong. Table based menus are passé in the CSS world. The current practice in CSS is to create list based menus. (Check out Listamatic for complete details on how it can be done and numerous code examples. If you were to use this method you would reduce your code to perhaps a 1/4 of what you are using now.

For your menus with the colored boxes adjacent. You can create the boxes with a left border. If you are using ems for line-height then you simply make the left border the same width as you are using for line-height and it will make a square colored box. E.g.:

a:link,
a:visited {
display:block;
line-height:1.5em;
border-left:1.5em solid #0f0;
padding-left:.5em;
}
a:hover,
a:active {
background-color:#0f0;
}

I'm happy to help you - but not if you continue with this type of design :roll:

BTW - declare your font-family once in the body tag - not in every declaration block if the font doesn't change.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 33 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

How to change 'complete' TD background on hover??

As DCE pointed out, you really should consider changing the way your are doing this layout....

"very simple" code for rollover effect on td

td {
background-color: #666;
text-align:center;
}
.steiner a {
width:100%;
display:block;
text-decoration: none;
color:#fff;
}
.steiner a:hover {
background-color: #36c;
}

<table class="steiner" width="50%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#">Link 1</a></td>
</tr>
<tr>
<td><a href="#">Link 2</a></td>
</tr>
<tr>
<td><a href="#">Link 3</a></td>
</tr>
</table>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

How to change 'complete' TD background on hover??

Well heck! Since I started this before dinner, I'll post it anyway.

To be blunt, I'm surprised you did as well as you did. Table layouts are without a doubt the worst way you could go. I only used one marker image, but using contextual selectors would allow you to override the marker image and bg color for each link.

Like David, I won't assist in a table layout. If you're willing to get right with the html/css gods, though, let's get it. Smile

Here is a partial rendering of your page, done right. My marker image is attached.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" 
      xmlns="http://www.w3.org/1999/xhtml" 
      lang="en"> 
<head> 
  <meta name="generator" 
        content=" 
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" /> 
         
  <meta name="editor" 
        content="Emacs 21" /> 
  <meta name="author" 
        content="Gary Turner" /> 
  <meta http-equiv="content-type" 
        content="text/html; charset=us-ascii" /> 
 
  <title></title> 
<style type="text/css"> 
/*<![CDATA[*/ 
 
html, body { 
    margin: 0; 
    padding: 0; 
    } 
 
body { 
    color: black; 
    background-color: white; 
    font: 83% sans-serif; 
    } 
 
p { 
    font-size: 1em; 
    } 
 
h1, h2, h3 { 
    margin: 0; 
    font-size: 1em; 
    font-weight: normal; 
    } 
 
h1 { 
    letter-spacing: .2em; 
    color: #cdd; 
    background-color: #033; 
    line-height: 58px; 
    text-align: right; 
    padding-right: 10px; 
    } 
 
h2 { 
    color: white; 
    background-color: black; 
    padding: 0 5px; 
    } 
 
li h3 { 
    padding-left: 25px; 
    } 
 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    color: white; 
    } 
 
ul li { 
    background-color: #666; 
    border-top: 1px solid #999; 
    } 
 
li a { 
    display: block; 
    line-height: 20px; 
    text-decoration: none; 
    color: white; 
    background: #666 url(maroon-bullet.png) top left no-repeat; 
    padding-left: 25px; 
    } 
 
li a:hover { 
    background-color: maroon; 
    } 
 
/*IE list whitespace fix \*/ 
* html li a { 
    height: 1px; 
    } 
/* */ 
 
#wrapper { 
    position: relative; 
    width: 600px; 
    margin: 10px auto; 
    border: 1px solid black; 
    } 
 
#list-col { 
    width: 240px; 
    float: right; 
    margin: 15px; 
    display: inline; /* fixes yet another IE bug */ 
    }     
 
/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*** end clearing hack ***/ 
 
/*]]>*/ 
</style> 
 
</head> 
 
<body> 
  <div id="wrapper" 
       class="clearing"> 
    <h1>Free Lance Design and Development</h1> 
 
    <div id="list-col"> 
      <h2>Portfolio</h2> 
 
      <ul> 
 
        <li> 
          <h3>About Us</h3> 
 
          <ul> 
            <li><a href="#">Virtual Reality Photography</a></li> 
 
            <li><a href="#">Presentations</a></li> 
 
            <li><a href="#">E-Learning</a></li> 
 
            <li><a href="#">Web Design</a></li> 
 
            <li><a href="#">Print, etc.</a></li> 
          </ul> 
        </li> 
      </ul> 
    </div><!-- end list-col --> 
  </div><!-- end wrapper --> 
 
</body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

How to change 'complete' TD background on hover??

Thanks fellas. It looks like I've got a major learning curve ahead of me. I've historically designed for the front end and whenever I did anything with the backend it was with DreamWeaver and tables.

CSS looks great but it's not going to be easy learning this on my own (just attempting to go freelance). Anyway, thanks again.

Steiner

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to change 'complete' TD background on hover??

I see Gary and I are gonna play a little bit of "whose yo daddy, whose yo daddy" Tongue

li a {
    display: block;
    line-height: 1.5em;
    text-decoration: none;
    color: white;
    padding-left: 25px;
    border-left:1.5em solid maroon;
    }
 
li a:hover {
    background-color: maroon;
    border-color:#666;
    }

Is an alternative way to get the effect I was discussing earlier. It looks the same but doesn't need an image which is preferable IMHO.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

How to change 'complete' TD background on hover??

DCElliott wrote:
I see Gary and I are gonna play a little bit of "whose yo daddy, whose yo daddy" Tongue ...
DE
Heh heh.

Of course, yours is an excellent solution in this specific case. Mine, on the other hand, allows for a variety of symbols, shapes, or what not as images. Certainly more useful in the general case. Tongue back at ya.

cheers,

gary

ps. I will bow to the elegance of using the border property for this example. --gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

How to change 'complete' TD background on hover??

Gary and David, you both clearly know your stuff. Could you therefore point me to any online tutorials for CSS beginners that you recommend? That, or css books for beginners?

Much appreciated
Steiner

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

How to change 'complete' TD background on hover??

Google is your friend. Search 'css tutorial'; any of the top picks should be OK.

Get O'Reilly's Dynamic HTML by Danny Goodman. It's about $60 U.S. Seems like a lot for a book, but you'll soon think it's a bargain of the century.

To really get it, work out problems without looking at the answers on forums like this. You'll see a greater variety of designs and problems than you could bump into on your own.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to change 'complete' TD background on hover??

Check out the tutorial at Westciv . If you just did that and worked throught their examples you would get a thorough grounding to the point that you could do a lot of experimenting on your own and ask really good questions when you got stuck.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

How to change 'complete' TD background on hover??

OK thanks fellas - I'll certainly give these a go. Looks like it's well worth the investment of time.

Dave, I have DreamWeaverMX - would it be worth purchasing StyleMAster or is DreamWeaver enough?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to change 'complete' TD background on hover??

I do all my CSS from my head and using tools like the Web Developers extension (which allows real-time CSS editing) to Firefox. I used the original TopStyle for a while but outgrew it rapidly. For HTML I use HTMLkit - not because I particularly like it, but its ability to seamlessly edit webpages on a server is a plus and I don't use much in the way of coding widgets anyhow since I pretty well handcode everything. For me the only plus is being able to save templates.

So I can't really advise you. Its not that I am some coding hardass - I just have some free tools that I am comfortable with and don't need something industrial.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

How to change 'complete' TD background on hover??

No worries David...being a mainly front end person myself I totally understand where you're coming from.

Thanks again for your assistance
Steiner

Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

How to change 'complete' TD background on hover??

Hi fellas, one last question on this string. I notice you use 'em' as a measurement unit and #666 (or any other 3 digit number group) for colors.

I've never come across these. Is there a reason for using these over pixels and Hex codes? And if there is, is there a utility to use which shows the conversions (like a color picker)?

Cheers

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

How to change 'complete' TD background on hover??

ems and ens are typesetting measurements corresponding to the widths of the `m' and `n' letters respectively. The important factor in their use in layout is flexibility - something sized in ems will grow/shrink with font-size changes, retaining proportionality. It doesn't work in all situations but when it does, its a charm.

As for hex color codes. If I have a color #ffffcc which is really red-ff, green-ff, blue-cc, I can abbreviate the doubled hex digits to f-f-c and code the CSS color as #ffc. It saves three stinking keystrokes which have now been wasted for the next year just by explaining what I am doing. LOL!

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How to change 'complete' TD background on hover??

DCElliott wrote:

As for hex color codes. If I have a color #ffffcc which is really red-ff, green-ff, blue-cc, I can abbreviate the doubled hex digits to f-f-c and code the CSS color as #ffc. It saves three stinking keystrokes which have have now been wasted for the next year just by explaining what I am doing. LOL!

DE

Laughing out loud

Steiner
Offline
Regular
Last seen: 16 years 50 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

How to change 'complete' TD background on hover??

Ah, I never realised hex abbreviation was possible. Sorry to have forced you to spend that years worth of savings! Smile