Mousover link thumbnail breaks list up

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Casimir Pohjanraito - 26 May 2007 03:57 GMT

I have a list of links, with a thumbnail image hidden(resized) next to
the link. Complete html&css at end of this post.

CSS for the link resizes the image on a:hover. All is good,
except the list resizes to accomodate the image, thus "tearing up" the
list. In some browsers the thumbnail and resize effect goes back and forth
real fast (try mouseovering the "another page" link).

I tried constraining the list item height, but that doesnt work when you
need multiple lines of text on the list item, as often happens.

I also experimented with several combinations of position and display but
couldnt solve this.

Any ideas on how to present the thumbnail so that the list wont be
resized, but that the thumbnail still shows up, relative to the list? I
dont. BTW, no javascript, only CSS.

HTML EXAMPLE:

<html><head>
<style type="text/css">
ul { width: 250px; }

li a img {
    height: 0;
    width: 0;
    border-width: 0;
}

li a:hover img {
    position: relative;
    height: 80px;
    width: 80px;
    left: 250px;
    border: 1px black solid;
}
</style>
</head>

<body>
<h4>List Menu Thing</h4>
<ul>
<li><a href="page1.html">Front Page With Lots Of Text In Link<img
src="img/page1-icon.jpg" alt="icon"></a></li>
<li><a href="page2.html">Another page<img src="img/page2-icon.jpg"
alt="icon"></a></li>
<li><a href="page3.html">Yet Another Page With A Link That Must Be
Wrapped<img src="img/page3-icon.jpg" alt="icon"></a></li>
</ul>
</body></html>

Reply to this Message

John Hosking - 26 May 2007 05:54 GMT

> I have a list of links, with a thumbnail image hidden(resized) next to
> the link. Complete html&css at end of this post.

Doesn't look _that_ complete. A URL is usually better.

> CSS for the link resizes the image on a:hover. All is good,
> except the list resizes to accomodate the image, thus "tearing up" the
> list. In some browsers the thumbnail and resize effect goes back and forth
> real fast (try mouseovering the "another page" link).

A URL helps any mouseovering we may want to try. In my newsreader
nothing happens. ;-)

> li a img {
> height: 0;

change to height: 80px;

> width: 0;

change to width: 80px;

> border-width: 0;

add visibility: hidden;

> }
>
[quoted text clipped - 4 lines]
> left: 250px;
> border: 1px black solid;

add visibility: visible;

> }

Untested. HTH.

Signature

John

Reply to this Message

dorayme - 26 May 2007 06:45 GMT

> > I have a list of links, with a thumbnail image hidden(resized) next to
> > the link. Complete html&css at end of this post.

> > CSS for the link resizes the image on a:hover. All is good,
> > except the list resizes to accomodate the image, thus "tearing up" the
> > list. In some browsers the thumbnail and resize effect goes back and forth
> > real fast (try mouseovering the "another page" link).

> > li a img {
> > height: 0;
[quoted text clipped - 23 lines]
>
> Untested. HTH.

Interesting thoughts, but gives a ghastly result and solves not
the gap problem.

Signature

dorayme

Reply to this Message

Ben C - 26 May 2007 08:44 GMT

>> > I have a list of links, with a thumbnail image hidden(resized) next to
>> > the link. Complete html&css at end of this post.
[quoted text clipped - 34 lines]
> Interesting thoughts, but gives a ghastly result and solves not
> the gap problem.

The gap problem can be solved by making the image a float, since that
way it doesn't affect line height. I also used display: none/block
rather than visibility: hidden since this prevents the floats stacking
against one another horizontally since only one of them is not
display:none at any one time.

This also involves moving the <img>s before the text to be sure they
appear on the same line.

I don't see the value of position: relative here, it just means the text
wraps around where the images aren't in an unintuitive and confusing
way. So I just made the <ul> wider. This means that if the text wraps,
you will get some reflow, but I don't think it looks too bad, and the
text won't be covered up.

So here is one way of doing it, but keep reading because there is an
alternative below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>
<style type="text/css">
ul { width: 500px; }

li a img {
height: 80px;
width: 80px;
border: 1px black solid;
float: right;
display: none;
}

li a:hover img {
display: block;
}
</style>
</head>

<body>
<h4>List Menu Thing</h4>
<ul>
<li><a href="page1.html"><img src="flowers-100.png" alt="icon">Front Page With Lots Of Text In Link</a></li>
<li><a href="page2.html"><img src="flowers-100.png" alt="icon">Another page</a></li>
<li><a href="page3.html"><img src="flowers-100.png" alt="icon">Yet Another Page With A Link That Must Be Wrapped</a></li>
</ul>
</body></html>

Alternatively, you can just as well use position: absolute as dorayme
suggested originally. This way you can use visibility: hidden/visible
since the absolutely positioned images don't affect the layout of any of
the normal flow stuff outside them at all. To do this, we rely on the
auto value for top which the spec defines as something like "roughly
where the box would have gone if it had been normal flow".

In this one I've positioned the images relative to a new div, which is
always wider than the <ul> so that the text will never be obscured by
the images (necessary, because it isn't going to reflow around them in
this case-- they aren't floats). The new div is position: relative just
so it becomes the containing block for the absolutely positioned images.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>
<style type="text/css">
ul { width: 250px; }

li a img {
position: absolute;
right: 0;
height: 80px;
width: 80px;
border: 1px black solid;
visibility: hidden;
}

li a:hover img {
visibility: visible;
}
</style>
</head>

<body>
<h4>List Menu Thing</h4>
<div style="position: relative; width: 500px">
<ul>
<li><a href="page1.html"><img src="flowers-100.png" alt="icon">Front Page With Lots Of Text In Link</a></li>
<li><a href="page2.html"><img src="flowers-100.png" alt="icon">Another page</a></li>
<li><a href="page3.html"><img src="flowers-100.png" alt="icon">Yet Another Page With A Link That Must Be Wrapped</a></li>
</ul>
</div>
</body></html>

Reply to this Message

dorayme - 26 May 2007 06:00 GMT

> I have a list of links, with a thumbnail image hidden(resized) next to
> the link. Complete html&css at end of this post.

...

> I also experimented with several combinations of position and display but
> couldnt solve this.
[quoted text clipped - 4 lines]
>
> HTML EXAMPLE:

I would not do this. Life is sweeter without this gimmickery. But
you will get rid of an ugliness with the underlining by adding
display: block; to your li a img

And you might as well try instead of relative positioning,
something like:

li a:hover img {
position: absolute;
height: 80px;
width: 80px;
left: 350px;
top: 50px;
border: 1px black solid;
}

This gets rid of the expansion of the list items problem.

Signature

dorayme

Reply to this Message

Casimir Pohjanraito - 26 May 2007 07:43 GMT

>> Any ideas on how to present the thumbnail so that the list wont be
>> resized, but that the thumbnail still shows up, relative to the list?
>
> And you might as well try instead of relative positioning,
> something like: [del]
> position: absolute;

> This gets rid of the expansion of the list items problem.

Can you see my original post quoted above, including the words "relative
to the list". Absolute positioning doesnt work with centered layout. Good
try but thats not what I was asking for.

(never mind the underlining ugliness at this point)

>> I have a list of links, with a thumbnail image hidden(resized) next to
>> the link. Complete html&css at end of this post.

On Sat, 26 May 2007 06:54:54 +0200, John Hosking wrote:

> Doesn't look _that_ complete. A URL is usually better.

It is entirely complete for the purposes of this post. If you cannot
copypaste that to a html file, you are not qualified for this post.

> change to height: 80px; etc

Would you please next time bother to read the post before replying.

Csmr

Signature

/dox/csmr-sig.txt

Reply to this Message

dorayme - 26 May 2007 08:07 GMT

> >> Any ideas on how to present the thumbnail so that the list wont be
> >> resized, but that the thumbnail still shows up, relative to the list?
[quoted text clipped - 24 lines]
>
> Csmr

John's point was very good about a url. Especially in this case.
If you provided a url with roughly the whole idea you are aiming
for (including this business of centered layout you now mention)
someone might suggest something that appeals to you. Go on, be a
devil and let us have a look and make some suggestions as to what
might be best.

Signature

dorayme

Reply to this Message

Jukka K. Korpela - 26 May 2007 08:26 GMT

Scripsit Casimir Pohjanraito:

> If you cannot
> copypaste that to a html file, you are not qualified for this post.

If you haven't learned how to post to this group and apparently haven't read
much of the comp.infosystems.www.authoring groups (we repeatedly tell why a
URL is much superior to fragments of code and you can see examples of that
every week), you are not qualified to understand any expert advice you might
get here.

You also keep pointlessly posting in UTF-8, despite my mentioning this
repeatedly in another group. If you can't fix this in your current
newsreader, get a new one.

> Would you please next time bother to read the post before replying.

Your problem might have been interesting, but I just lost my interest, due
to your arrogance.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Ben C - 26 May 2007 09:02 GMT

>>> Any ideas on how to present the thumbnail so that the list wont be
>>> resized, but that the thumbnail still shows up, relative to the list?
[quoted text clipped - 7 lines]
> Can you see my original post quoted above, including the words "relative
> to the list".

Absolute positioning does position things relative to the list (provided
you make the list their containing block, which is easily done).
Relative positioning does not position the images relative to the list,
but relative to their normal flow positions within the list items. So it
was difficult to know what you were talking about even if one did bother
to read your post.

> Absolute positioning doesnt work with centered layout. Good try but
> thats not what I was asking for.

The example you posted wasn't centered. Position: absolute does get rid
of the expansion problem, is likely to be part of the eventual solution,
and is as good a suggestion as anyone can make with the information
you've provided.

[...]

>> Doesn't look _that_ complete. A URL is usually better.
> It is entirely complete for the purposes of this post.

Evidently not since now you tell us the whole thing needs to be
centered. This is still possible with position: absolute, depending on
what you mean by "centered". Is each list item centered? Or is the whole
list centered? How are we supposed to know?

Reply to this Message

Casimir Pohjanraito - 27 May 2007 23:11 GMT

>>> > I have a list of links, with a thumbnail image hidden(resized) next to
>>> > the link. Complete html&css at end of this post.
>>
>>> > CSS for the link resizes the image on a:hover. All is good,
>>> > except the list resizes to accomodate the image, thus "tearing up" the
>>> > list. [deleted lots]

> The gap problem can be solved by making the image a float, since that
> way it doesn't affect line height. I also used display: none/block
> rather than visibility: hidden since this prevents the floats stacking
> against one another horizontally since only one of them is not
> display:none at any one time.

Thanks for taking the time with this, Ben C. Thanks also to Dorayme
and John for comments. Jukka has left the thread so no use thanking him.

I played around with the different solutions, and almost posted a "try
again" post, but finally got a hybrid of John H's and Ben C's idea working
on my pages.

My solution is slightly clunky, and sometimes the thumbnails 'stick
around', but at least its CSS. Tested on firefox 2 and opera 9.20.

See my version in action here (Please remember reload!):
http://csmr.dreamhosters.com/sivu1.html

Here is the CSS for the list item thumbnails

li > a img {
height: 80px;
width: 80px;
border: 1px black solid;
margin: 13px;
display: none;
}

li > a:hover img {
position: absolute;
display: block;
z-index: 99;
}

Any further suggestions, are welcome, especially concerning my orignal idea
of presenting the thumbnail on the left side of the table (overlapping the
large image). Also any apologies for what may originally have been a too
simple code example.

Casimir

Signature

Casimir Pohjanraito
Art Portfolio: http://csmr.dreamhosters.com

Reply to this Message

dorayme - 27 May 2007 23:39 GMT

> Thanks for taking the time with this, Ben C. Thanks also to Dorayme
> and John for comments. Jukka has left the thread so no use thanking him.
[quoted text clipped - 10 lines]
>
> Here is the CSS for the list item thumbnails

OK, you have solved to your satisfaction now. May I make some
comments? Personally I find it disconcerting for the rollover
image to blot out the menu items I am looking at. Better for them
to blot out a section one is _not_ focussing on, like the main on
the left. Second, your main pic is a bit big for many real life
browser situations, it is irritating to have to scroll right to
get the menu as a result. And third, if you make the big pics
links to the next image, perhaps you might put a "title" in the
link code to let people know to what they are going to if they
click.

Signature

dorayme

Reply to this Message

Casimir Pohjanraito - 28 May 2007 00:22 GMT

>> I played around with the different solutions, and almost posted a "try
>> again" post, but finally got a hybrid of John H's and Ben C's idea
[quoted text clipped - 5 lines]
>> See my version in action here (Please remember reload!):
>> http://csmr.dreamhosters.com/sivu1.html

> OK, you have solved to your satisfaction now. May I make some comments?

To quote myself, ie. the article you replied to:

>> Any further suggestions, are welcome, especially concerning my orignal
>> idea of presenting the thumbnail on the left side of the table
>> (overlapping the large image).

> Personally I find it disconcerting for the rollover
> image to blot out the menu items I am looking at. Better for them to
> blot out a section one is _not_ focussing on, like the main on the left.

See the quote above.

> Second, your main pic is a bit big for many real life browser
> situations, it is irritating to have to scroll right to get the menu as
> a result.

It does (almost) fit horizontally in 1024x768 so that you can see the menu
list. So I am not sure why you were scrolling to the right.

Maybe try fullscreen-mode of your browser (usually F11-key), or close any
panels for max screen estate?

This site is totally intended for people with desktop res *1280x1024* and
*higher*, optimal being 1600x1200. This is minimum resolution for most of
the optical effects in the 'pics', imo.

> And third, if you make the big pics links to the next image,
> perhaps you might put a "title" in the link code to let people know to
> what they are going to if they click.

Yes, title attributes are on my TODO-list since last monday, thanks
very much for noticing that though.

Casimir

Signature

Casimir Pohjanraito
Art Portfolio: http://csmr.dreamhosters.com

Reply to this Message

dorayme - 28 May 2007 03:04 GMT

> It does (almost) fit horizontally in 1024x768 so that you can see the menu
> list. So I am not sure why you were scrolling to the right.

I guess because I did not have the browser big enough for your
site.

> This site is totally intended for people with desktop res *1280x1024* and
> *higher*, optimal being 1600x1200.

Ah, well, in that case, for the intended only and given that
their preference for smaller browser window size comes second to
their interest in your pages, they will be happy enough.

> This is minimum resolution for most of the optical effects in the
> 'pics', imo.

I was wondering about this. If you are right, and you wanted to
please those with smaller browser window prefs, then the only
other suggestion to be considered is no side menu, organise it at
top or bottom or both, horizontally.

Signature

dorayme

Reply to this Message

Jukka K. Korpela - 28 May 2007 08:12 GMT

Scripsit dorayme:

> you make the big pics
> links to the next image, perhaps you might put a "title" in the
> link code to let people know to what they are going to if they
> click.

If a link needs a title attribute, the link (and quite possibly the page)
needs a redesign.

Relying on the tiny tooltip for anything essential is bad usability,
especially since the drawbacks of the tooltip (small size, short duration)
cannot be fixed in CSS. (The small size can be fixed, but only by a user,
through system settings, and few users know this.)

If you have something relevant to say, say it loud and clear, not hidden in
a "tooltip". This is one of the reasons why text links are superior to image
links - even when the content is essentially a set of images.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

Mousover link thumbnail breaks list up