Hover question

**chris_stfc** · Oct 10, 2007 02:58

Hi Guys,

I have a links div and I want a colour change on it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
/* jobs box and Items */
   .jobs_box{
	background: #FFFFFF url(heading.png) no-repeat;
	width:184px;
	height:307px;
             margin-left: 3px;
	border-right: 1px solid #CC3333;
	border-bottom: 1px solid #CC3333;
	border-left: 1px solid #CC3333;
   }
   
 .top_grey_dashed {
 width: auto;
 border-top: 1px dashed #c0c0c0;
 height: 1px;
 margin-top: 60px;
 margin-bottom: 4px;
 overflow: hidden 
 }
 
 .job_title {
    font-family: Verdana, sans-serif;
    color: #333333;
    font-weight:bold;
    font-size: 11px;
    margin-left:4px;
}

 .job_salary {
    color: #666666;
    font-family: Verdana, sans-serif;
    font-weight:bold;
    font-size: 11px;
    margin-left:4px;
}

 .job_more {
    color: #0063AC;
    font-family: Verdana, sans-serif;
    font-weight:bold;
    font-size: 11px;
    margin-left:4px;
}

 .bottom_grey_dashed {
 width: auto;
 border-top: 1px dashed #c0c0c0;
 height: 1px;
 margin-top: 8px;
 overflow: hidden 
 }

</style>
<head>
<title>Hover needed</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div class="jobs_box">
<div class="top_grey_dashed"></div>
<div class="links">
<span class="job_title">Website Developer</span><br />
<span class="job_salary">&#163;50,000</span><br />
<span class="job_more"><img src="down_arrow.png"> Further Details</span><br />
</div> 
<div class="bottom_grey_dashed"></div>
</div>
</body>
</html>

But from what I have read this can't be done. I want the hover to occur between the dotted lines, but it only seems to be able to be done on an a: tag?

Can anyone help?

Thanks

**DaveWoods** · Oct 10, 2007 03:28

I'm not sure if this is exactly what you're after:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hover needed</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
    padding: 0;
    margin: 0;    
}
body {
    color: #333;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:     77&#37;;
    padding: 10px;
}
a img {
    border: 0;    
}
.job {
    font-size: 100%;
    color: #333;    
}
.links a, .links a:link {
    display: block;
    padding: 5px;
    text-decoration: none;
}
.links a:hover {
    background-color: #C33;    
}
#jobsbox{
    background: #FFFFFF url(heading.png) no-repeat;
    width: 184px;
    height: 307px;
    margin-left: 3px;
    border-right: 1px solid #C33;
    border-bottom: 1px solid #C33;
    border-left: 1px solid #C33;
}
.links {
    border-top: 1px dashed #c0c0c0;
    border-bottom: 1px dashed #c0c0c0;
}
.links span {
    display: block;
    color: #666;
    font-weight: bold;    
}
.links .job {
    color: #333;    
}
.links .details {
    color: #0063AC;    
}
</style>
</head>
<body>
<div id="jobsbox">
    <div class="links">
        <a href="#">
            <span class="job">Website Developer</span>
            <span>&#163;50,000</span>
            <span class="details"><img src="down_arrow.png" alt="" /> Further Details</span>
        </a>
    </div> 
</div>
</body>
</html>

**chris_stfc** · Oct 10, 2007 03:36

Thank you.

**Dr John** · Oct 10, 2007 05:15

Or just this

.links a {text-decoration:none; display:block; width 180px}
.links a:hover {background-color:red; display:block; text-decoration:none}

and
<div class="links"><a href=#>
<span class="job_title">Website Developer</span><br />
<span class="job_salary">£50,000</span><br />
<span class="job_more"><img src="down_arrow.png"> Further Details</span><br />
</a>
</div>

Oops - Much the same thing really.
Should have read the reply before posting...

**DaveWoods** · Oct 10, 2007 05:41

Yeah, pretty much the same thing although if you apply display: block; to the <span> then you can do without the <br>

Might be useful to have anyway for users that aren't using styles though so I'd be tempted to use the <br> method, having seen them both.

**znebojsa** · Oct 10, 2007 06:17

if you are adding display block to a span, why not just use a div instead?

**DaveWoods** · Oct 10, 2007 06:34

Originally Posted by znebojsa

if you are adding display block to a span, why not just use a div instead?

Because <div> is a block level element which cannot be placed within an inline element, i.e. <a>

Ideally in this situation, I'd like to use heading's and paragraph's for the content but they would have the same problem in that it is invalid code to place these block level elements inside an inline element.

**znebojsa** · Oct 10, 2007 06:49

oh ok, sorry didnt notice that. But if you needed a few block level elements, which werent acually a division on the page, just a small part of the layout, would you use div's or span's and make them block?

**znebojsa** · Oct 10, 2007 06:50

PS. Congrats on Member of the month! *clap*

**DaveWoods** · Oct 10, 2007 07:13

It would depend on the situation. In most cases I'd try and style an element directly but for divisions on the page where I need extra markup to be able to create the correct style then I'd always use a <div> unless it needed to be contained within an inline element.

As we discovered above, for this situation, I'd tend to use a <span>

Hope that's what you were asking?

Off Topic:

PS. Congrats on Member of the month! *clap*

Thanks

**znebojsa** · Oct 10, 2007 07:16

yeh, because if i need a div (or a block span) both will work, i was wondering which you would use, because people say that divs should only be used for page sections. But using a span (other than when it needs to be inside inline elements) and making it inline, is kind of pointless.

**DaveWoods** · Oct 10, 2007 07:35

I'm sure that different people have their own opinions on this but neither have semantic meaning and therefore I wouldn't have a problem with using either so it's probably more down to personal preference than anything.

Usually I'd tend to use <span> for applying simple text effects or if I need to style something within an inline element whereas most other occasions I'd opt for a <div>.

If I'm dealing with a complex layout then I may be tempted to use <span class="topheader"></span> instead of a <div> but this would be on very rare occasions when a <div> and it's nested elements don't provide enough flexibility for styling.

I'd usually be more inclined to use something like the following for example...

Code:

<div id="container">
  <div id="maincolumn">
    <div id="subcolumn">...

But it really depends on the situation and the complexity of the page I'm dealing with and I'm sure if you asked someone else then they'd tell you something completely different (and wouldn't be wrong).

**Paul O'B** · Oct 10, 2007 08:02

Originally Posted by csswiz

I'm sure that different people have their own opinions on this but neither have semantic meaning

I know what you mean but thats not quite true as both define a generic structure of a document in that a div is a division of the document and is block level whereas a span is an inline level element and would be used in inline situations. Both have no presentational connotations other than their default behavior and suggest no other semantics to the document apart from the fact that they can group things together.

From the structure of the document it will mostly be easy to say whether the element to be used is a span or a div (assuming no other alternate elements fit the bill).

e.g.
<p>This <span>must be a span</span></p>

But the following would not make structural sense:

<div><p>Some text</p></div>
<span>anonymous box</span>
<p>more text</p>

In the above case a div would seem the correct choice and not a span (assuming it wasn't a paragraph of course).

If the element is in an inline situation then it should be a span but for all other situations it should be a div (assuming no other suitable elements are available.).

**DaveWoods** · Oct 10, 2007 08:24

Both have no presentational connotations other than their default behavior and suggest no other semantics to the document apart from the fact that they can group things together.

This was pretty much what I was trying to say

<div><p>Some text</p><div>
<span>anonymous box</span>
<p>more text</p>

(Assuming the second div is a typo and would be closed) this also wouldn't be valid as the second row of text would need to be enclosed in some kind of block level element anyway

But yeah, I grasp what you're saying but found it difficult to put into words.... I suppose if it's being used to define part of the page then I'd generally use a <div> whereas just styling part of a some text or something similar then I'd tend to use a <span>

Paul, just wondering what your take is on the problem above. Obviously the occasion does arise sometimes when it would make semantic sense for a block of text to be heading's and paragraph's but if you want to convert this block into a link it poses the problem that surrounding this group will invalidate the code.

Is this maybe an oversight in the HTML specs as the only solution seems to be converting these semantic headings and paragraphs into spans.

**Paul O'B** · Oct 10, 2007 09:28

Originally Posted by dave

(Assuming the second div is a typo and would be closed) this also wouldn't be valid a

Sorry about the typo

It would be valid if it were in a construct like this but still makes no sense as an inline element.

Code:

<div id="outer">
    <div>
        <p>Some text</p>
    </div>
    <span>anonymous box</span>
    <p>more text</p>
</div>

Is this maybe an oversight in the HTML specs as the only solution seems to be converting these semantic headings and paragraphs into spans.

I think the problem is that you are misinterpreting what ie6 does in some way relates to the specs

. In the first post I don't see an href destination so I'm guessing that there is no href and in fact the anchor shouldn't be used at all. It looks as though all that was wanted was a box that when hovered changes colour and firefox and ie7 will do that with no problems.

The anchor, as far as I can see is just there to get the same effect for ie6.

I also see that there is a down arrow.png on the text that says further details and I am again guessing that this will open some more details via javascript. Therefore the solution would be to style it semantically with the correct elements (dl perhaps) and apply the hover for IE6 via JS.

Of course we all mis-use anchors in this way just to get the effect in IE without needing JS.

**DaveWoods** · Oct 10, 2007 11:06

I think it was more a case that I may have misinterpreted what the original posted was after. I presumed that a <div> with an ID of links was needed to be a link and that the hover effect on the whole area was going to be clikable as well.

I just presumed that the original poster had tried applying an <a> but found that it only affected the text and this was the problem that they were referring to?

The reason the link doesn't go anywhere (i.e. <a href="#">) was for them to replace with their own link.

Sorry if I misunderstood. I wouldn't encourage using an anchor unless it was for a link as this would obviously have bad implications for accessibility (screenreaders and users without CSS) so JavaScript would certainly be my suggestion for supporting IE if this isn't actually a link.

As for my question about the oversight on the specs. This was more of a general question really in that there are times when we may have an entire block of text or it makes semantic sense to have headings and paragraphs in a section which we may want to be links but it's impossible to do so because of <a> being an inline element.

I'm not suggesting that <a> should be a block element but it does appear to be strange that only inline elements can be links.

Obviously you could have <h1><a href="#">Heading<a/></h1> but for complete blocks which combine block elements, this obviously isn't a possibility.

**Paul O'B** · Oct 10, 2007 12:21

I think the main point is that a link only has one destination and therefore it makes no sense to have 3 lines of content saying different things but all having the same destination.

I suppose in some cases you could simply style the elements correctly then just place an anchor on top to cover them (assuming heights and widths are specified).

It seems to me though that the whole exercise is more a decoration effect than about the actual content and in most cases anchors shouldn't be used. However we all do it and some of the boxes on my home page are anchors styled with spans to look like headings so I'm guilty of this also

**DaveWoods** · Oct 10, 2007 12:47

Yeah that kind of makes sense. Although an example might be where you have a news summary with an image, heading and summary all in a box and you want the containing <div> to link to the actual article.

Obviously a solution could be to make each element a link, choose one of the elements (maybe the header) or have a read more link (possibly an accessibility issue).

I like the anchor on top idea although may be a problem for things like textresizing.

To behonest though I'd probably just go for the <span> instead of the semantic heading and paragraph if it was an absolute requirement from a client.

**Paul O'B** · Oct 10, 2007 13:14

Yeah that kind of makes sense. Although an example might be where you have a news summary with an image, heading and summary all in a box and you want the containing <div> to link to the actual article.

Well that should all be possible using an appropriate heading tag for the content and then having all three content elements within the anchor and perhaps using an em or strong for the internal heading instead of a span.

However, if you think about it then all three are the same subject and should all carry the same weight so a span is probably the right tag for the job. It's only from a visual aspect that it becomes a heading and text content. I think I'm going around in circles now

User Tag List

Thread: Hover question

Thread Tools

Display

Hover question

Bookmarks

Bookmarks

Posting Permissions