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> 13  2749 
Casimir Pohjanraito wrote:
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;
}
li a:hover img {
position: relative;
height: 80px;
width: 80px;
left: 250px;
border: 1px black solid;
add visibility: visible;
}
Untested. HTH.
--
John
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
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.
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:
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.
--
dorayme
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
Casimir Pohjanraito wrote:
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;
change to height: 80px;
width: 0;
change to width: 80px;
border-width: 0;
add visibility: hidden;
}
li a:hover img {
position: relative;
height: 80px;
width: 80px;
left: 250px;
border: 1px black solid;
add visibility: visible;
}
Untested. HTH.
Interesting thoughts, but gives a ghastly result and solves not
the gap problem.
--
dorayme
On Sat, 26 May 2007 15:00:06 +1000, dorayme wrote:
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
>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)
Casimir Pohjanraito wrote:
>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
--
/dox/csmr-sig.txt
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
On Sat, 26 May 2007 15:00:06 +1000, dorayme wrote:
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
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)
Casimir Pohjanraito wrote:
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
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.
--
dorayme
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.
--
Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/
On 2007-05-26, dorayme <do************@optusnet.com.auwrote:
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
>Casimir Pohjanraito wrote:
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;
change to height: 80px;
width: 0;
change to width: 80px;
border-width: 0;
add visibility: hidden;
}
li a:hover img {
position: relative;
height: 80px;
width: 80px;
left: 250px;
border: 1px black solid;
add visibility: visible;
}
Untested. HTH.
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 <ulwider. 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 <ulso 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>
On 2007-05-26, Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
On Sat, 26 May 2007 15:00:06 +1000, dorayme wrote:
>In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
>>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 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?
>>Casimir Pohjanraito wrote:
>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]
On Sat, 26 May 2007 02:44:26 -0500, Ben C wrote:
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
--
Casimir Pohjanraito
Art Portfolio: http://csmr.dreamhosters.com
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
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
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.
--
dorayme
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
>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
On Mon, 28 May 2007 08:39:17 +1000, dorayme wrote:
OK, you have solved to your satisfaction now. May I make some comments?
To quote myself, ie. the article you replied to:
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
>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
--
Casimir Pohjanraito
Art Portfolio: http://csmr.dreamhosters.com
In article <f3**********@nyytiset.pp.htv.fi>,
Casimir Pohjanraito <pi************@welNOSPMAMho.comwrote:
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.
--
dorayme
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.
--
Jukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ This discussion thread is closed Replies have been disabled for this discussion. Similar topics
3 posts
views
Thread by Steve |
last post: by
|
22 posts
views
Thread by Jonathan Snook |
last post: by
|
reply
views
Thread by Mike |
last post: by
|
54 posts
views
Thread by Max Quordlepleen |
last post: by
|
reply
views
Thread by Earl Teigrob |
last post: by
|
4 posts
views
Thread by RE Kochanski |
last post: by
|
2 posts
views
Thread by sieg1974 |
last post: by
| | | | | | | | | | | | | | | | | | | | | | | |
