SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: Hover question

  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover question

    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

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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">&#163;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...

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you are adding display block to a span, why not just use a div instead?

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by znebojsa View Post
    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.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS. Congrats on Member of the month! *clap*

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote 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.).

  14. #14
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote 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.

  16. #16
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  18. #18
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •