Ever seen on some site whole content area with images etc as just one link? Usually there’s some hover for the background and they are mostly on the sidebars left or right or let’s say on the footer. You can see live example on previous version of my portfolio here - those links on the right. This tutorial will show you how to do that with CSS, and tell you something more about display:block; option.
In this simple example I will go with <li> for it, because I think it’s used more
<ul> <li> <a href="#"><img src="someimage.gif" border="0" /> <strong>Some Headline</strong> <span>Some text will go here</span> … </a> </li> </ul>
So just put everything in <a> tag, and it will all be a link of course but there will be many blank spaces for mouse and it won’t show a link for that, so let’s apply some CSS to it.
ul { list-style:none; } li *{ display: block; } li a { background: #fff; height:100%; } li a:hover { background:#ccc; }
display: block;
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
And it works for: IE 6, IE 7, Firefox 2.0, Safari 3.0 Win, Opera 9.5b, iCab 3.0, Konqueror 3.5.7
UPDATE:
The code in this example was updated, h2 and p are replaced with strong and span to pass validation
Have some feedback? Leave a comment
Thanks for this tips but it is completely incorrect.
The <a> tag is an inline element and it cannot contain some block elements (like H2, P, DIV, etc.).
The :hover pseudo class is ignored in IE 6 for all elements except <a>. (IE7 can apply :hover class to all elements in standards-compliant mode.) A better way to use the :hover for the <li> element, and a little js to emulate :hover in IE6.
@ Laszlo
That’s correct, thanks for the note, I’ve forgotten to mention it in text
@ Country
Yes you are right it can’t pass validation this way, but it works. If you want it that way, you’ll have to make all elements
blokand place <a> inside all of them, but then you won’t have hover effect@Dejan
Breaking containment rules is an extremly bad habit, even if in cases like that it can be convenient.
I regulary have to fix some co-workers bugs caused by innapropriate tag nesting. In your example browser aren’t too strict, but try to nest a list inside a paragraph and look at the DOM output : your list is rejected from your tag.
There’s no guaranty that upoming versions of browser won’t do the same thing with your code (as this is the correct behaviour), therefore you shouldn’t do that.
A more correct method would be to write your file like that :
<ul>
<li>
<a href=”#”>
<img src=”someimage.gif” border=”0″ />
<strong>Some Headline</strong>
<span>Some text will go here</span>
</a>
</li>
</ul>
li *{
display: block;
}
It may be less specific from a semantic view, but it’s correct and there’s no risk for it to be broked in the future.
@ Ywg
Yes, of course you are right, so let’s respect containment rules and put allowed tags into <a> i will make a correction
I like this tip
I have been after something like this for a while and so thanks.
Interesting note, here is the another approach on the block hover effect at smileycat
Thanks
@YGW
As you said, replacing the and tags some semantic meaning is lost. The replaced tags degrade worse and are less accessible (specially strong vs h2), so it should be seriously considered.
If you don’t want to sacrifice the page meaning, use a behavioral specification (yeah, javascript
) to link the whole li and achieve any hover effect through the “:hover”:
<ul>
<li>
<h2><a href=”somehwere”>Some headline</a></h2>
<p>Some text…</p>
</li>
</ul>
Notice the missing . It think it should be specified throught CSS’s background-image property (it has no meaning!).
Sadly it doesn’t work with Firefox 3 (Beta 4)
Pingback: Beats Programming Timbaland Style Javascript Tutorial J2ee
Pingback: Ephedra
can you do thi for me, http://transworld.net/author/shemalesex Real shemale sex, 780,
Very interesting sites., shemale sex discount [url=http://intensedebate.com/people/shemalesex#1]shemale sex discount[/url], uwfyf,
%100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.
Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
perfect
i used it