rollover highlight

[Joe.Morgan]

part two of what im trying to acheive on this page is the rollover ccs highlight as seen here:

http://www.smileycat.com/miaow/archi...lock-hover.php

again i have followed a tutorial to try and get it work but it fails to

i want it to work on the following page, so if they rollover the artist the lil area will turn a lighter grey and they will link to their page:

http://www.nineteen87.com/hype/artists.html

again i would really appreciate any guidance on this.

thanks

[Toon]

It's way too late on Friday to look and the England are playing, but I think you put the rollover effect to the whole div rather than just an element.

[Mack]

Well, its could have something to do with:

line 95 column 37 - Warning: missing </em> before <h3>
line 96 column 27 - Warning: inserting implicit <em>
line 97 column 21 - Warning: discarding unexpected </em>
line 98 column 23 - Error: <spam> is not recognized!
line 98 column 23 - Warning: discarding unexpected <spam>
line 98 column 40 - Warning: discarding unexpected </spam>
line 158 column 29 - Error: <spam> is not recognized!
line 158 column 29 - Warning: discarding unexpected <spam>
line 160 column 29 - Warning: discarding unexpected </spam>
line 219 column 41 - Warning: missing </em> before <h3>
line 220 column 31 - Warning: inserting implicit <em>
line 221 column 27 - Warning: discarding unexpected </em>
line 222 column 29 - Error: <spam> is not recognized!
line 222 column 29 - Warning: discarding unexpected <spam>
line 222 column 35 - Warning: discarding unexpected </spam>
line 283 column 29 - Error: <spam> is not recognized!
line 283 column 29 - Warning: discarding unexpected <spam>
line 283 column 35 - Warning: discarding unexpected </spam>
line 341 column 41 - Warning: missing </em> before <h3>
line 342 column 31 - Warning: inserting implicit <em>


I think you ment that to be <span> ?

It also doesnt look like you have a <a> links to highlight?

[Joe.Morgan]

haha yep, spam on the mind.. how do i use the <a> ?

[Mack]

Ok so here is his HTML, you can see inside the <li> is an <a href = for a hyperlink.

<div id="links"> 
    <ul> 
      <li><a href="http://www.smileycat.com/miaow/archives/000044.html" title="Visit this post">CSS Rounded Corners 'Roundup'
        <em>Quite a large collection of techniques for creating boxes and layouts with rounded corners using CSS.</em>

        <span>November 25, 2005</span></a></li> 
      <li><a href="http://www.smileycat.com/miaow/archives/000226.html" title="Visit this post">How to Write a Web Site Creative Brief
        <em>Writing a clear, well-structured creative brief will get your web project off to a good start and keep it on track. Here's how. Includes examples.</em>
        <span>February 26, 2006</span></a></li> 
      <li><a href="http://www.smileycat.com/miaow/archives/000102.html" title="Visit this post">Free Stock Photography Web Sites
        <em>My pick of the various free stock photography sites on the web. Updated regularly.</em>
        <span>October 4, 2004</span></a></li> 
    </ul>

With this CSS he using setting a color, and then an over color.

#links li a {
	color: #990000;
	display: block;
	font: bold 120% Arial, Helvetica, sans-serif;
	padding: 5px;
	text-decoration: none;
}

* html #links li a {
	width: 400px;
}

#links li a:hover {
	background: #ffffcc;
}

[Joe.Morgan]

i managed to create the effect using just:

<div id="links">
<ul>
<li><a href="http://www.smileycat.com/miaow/archives/000044.html" title="Visit this post">CSS Rounded Corners 'Roundup'
<em>Quite a large collection of techniques for creating boxes and layouts with rounded corners using CSS.</em>

<span>November 25, 2005</span></a></li>
<li><a href="http://www.smileycat.com/miaow/archives/000226.html" title="Visit this post">How to Write a Web Site Creative Brief
<em>Writing a clear, well-structured creative brief will get your web project off to a good start and keep it on track. Here's how. Includes examples.</em>
<span>February 26, 2006</span></a></li>
<li><a href="http://www.smileycat.com/miaow/archives/000102.html" title="Visit this post">Free Stock Photography Web Sites
<em>My pick of the various free stock photography sites on the web. Updated regularly.</em>
<span>October 4, 2004</span></a></li>
</ul>

but i cant get it work in the tables:

<td><table width="230" border="0">
<tr>
<td><img src="images/line.gif" width="230" height="10" /></td>
</tr>
<tr>
<td><table width="227" border="0">
<tr>
<a>
<td width="100"><img src="images/artists/grime/fury.gif" width="100" height="100" /></td>
<td width="117"><h3><em>Lady Fury </em></h3>
<span>
<p>Info</p>
</span>
<p>&nbsp;</p></td>
</a>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/line.gif" width="230" height="10" /></td>
</tr>
</table></td>

is there a better way of laying it out than using tables?

[Mack]

This will obviously need some tweaks...

<div id="container">
	<div class="artist">
		<a href="http://" title="more info"><img src="images/artists/grime/fury.gif" width="100" height="100" alt="artistImage"/>
		<h3>Lady Fury</h3>
		<span>Info</span>
		</a>
	</div>
	<div class="artist">
		<a href="http://" title="more info"><img src="images/artists/grime/ks.gif" width="100" height="100" alt="artistImage"/>
		<h3>K Sounds</h3>
		<span>Info</span>
		</a>
	</div>
</div>

.artist {
	border-top:2px;
	border-bottom:2px;
	width: 230px;
	height: 110px;
	color:#FFF;
	float:left;
	}
.artist h3 {
	color:#000;
}
.artist img {
	float:left;
	margin: 5px;
}
.artist a {
	color: #FFF;
	display: block;
	padding: 5px;
	text-decoration: none;
}

* html .artist a {
	width: 230px;
	height:110px;
}

.artist a:hover {
	background: #ffffcc;
}
.artist a span {
}

[tommylogic]

yep.. thats good advice there.
I would ditch the tables all together. Assign the <div> attributes and change your status links directly..

My site is riddled with that technique if you want feel free to pull out any of the CSS to use.