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.htm l">Front Page With Lots Of Text In Link<img
src="img/page1-icon.jpg" alt="icon"></a></li>
<li><a href="page2.htm l">Another page<img src="img/page2-icon.jpg"
alt="icon"></a></li>
<li><a href="page3.htm l">Yet Another Page With A Link That Must Be
Wrapped<img src="img/page3-icon.jpg" alt="icon"></a></li>
</ul>
</body></html> 13  2850 
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**********@n yytiset.pp.htv. fi>,
Casimir Pohjanraito <pi************ @welNOSPMAMho.c omwrote:
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**********@n ews.bluewin.ch> ,
John Hosking <Jo**@DELETE.Ho sking.name.INVA LIDwrote:
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**********@n yytiset.pp.htv. fi>,
Casimir Pohjanraito <pi************ @welNOSPMAMho.c omwrote:
>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**********@n yytiset.pp.htv. fi>,
Casimir Pohjanraito <pi************ @welNOSPMAMho.c omwrote:
On Sat, 26 May 2007 15:00:06 +1000, dorayme wrote:
In article <f3**********@n yytiset.pp.htv. fi>,
Casimir Pohjanraito <pi************ @welNOSPMAMho.c omwrote:
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.infosystem s. 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.a uwrote:
In article <46**********@n ews.bluewin.ch> ,
John Hosking <Jo**@DELETE.Ho sking.name.INVA LIDwrote:
>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.htm l"><img src="flowers-100.png" alt="icon">Fron t Page With Lots Of Text In Link</a></li>
<li><a href="page2.htm l"><img src="flowers-100.png" alt="icon">Anot her page</a></li>
<li><a href="page3.htm l"><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.htm l"><img src="flowers-100.png" alt="icon">Fron t Page With Lots Of Text In Link</a></li>
<li><a href="page2.htm l"><img src="flowers-100.png" alt="icon">Anot her page</a></li>
<li><a href="page3.htm l"><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.c omwrote:
On Sat, 26 May 2007 15:00:06 +1000, dorayme wrote:
>In article <f3**********@n yytiset.pp.htv. fi>,
Casimir Pohjanraito <pi************ @welNOSPMAMho.c omwrote:
>>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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Steve |
last post by:
Hi, I have a nice little script that works well displaying images on
my website. It's a script where if you clik a thumbnail image a pop
up window opens that contains a larger version of the same image. What
I would like to create is a link that can be clicked on to close the
window that contains the larger image. This would make it easier for
the users to close the window. I have posted the script that I use.
Any help would be much...
|
by: Jonathan Snook |
last post by:
I've been contemplating what the recommended usage of a "top of page" link
should be?
Should there only ever be one at the bottom of the page?
Should they be sprinkled at various points on the page?
Or should they be used at all?
Lately, I've been leaning towards the last option because my thought is that
most browsers have a method to make it back to the top of the page (home
button, scroll bar, whatever). It seems I never use the...
|
by: Mike |
last post by:
Sites using thumbnail preview for world wide web file navigation and
searching.
Below are list of sites that are either researching or providing thumbnail
preview images for online web documents. Thumbnail previews are useful for
web site navigation particularly in search engines and directories such as
Google, Altavista and Yahoo. The preview images provide a portion of the
content of the electronic file to aid in navigation.
|
by: Max Quordlepleen |
last post by:
Apologies for the crossposting, I wasn't sure which of these groups to
ask this in.
I have been lurking in these groups for a week or so, trying to glean
what I need to design a simple, clean set of pages that get the w3c
tick for XHTML 1.0 Strict, and CSS2. So far, I have succeeded, thanks
to the great information in these groups.
Now, however, I'm having trouble. A few days ago, I read a thread that
dealt with this issue of...
|
by: Earl Teigrob |
last post by:
This is an odd one. When I first display a thumbnail page and the user
clicks one of the image links, the user goes to the correct page. If the
user uses my application back button, (called "Thumbnail View") to return
the the thumbnail view, everything works great. However, if the user uses
the Browser Back Button to return to the thumbnail view, any thumbnail that
is pressed will return the user to the previous image page that was viewed....
| | |
by: RE Kochanski |
last post by:
I have attempted to use the CSS techniques from two or three sites to
create a CSS only image gallery. I am muddling the affair by placing
the thumbnails in one float, the page text in another float, then
using absolute positioning (and z-index) to display the image over the
second float.
The CSS for the thumbnails is from "Web Accessibility At C-net.us" by
K Chayka (http://accessat.c-net.us/test/gallery2.html). The CSS to
display the...
|
by: sieg1974 |
last post by:
Hi,
I have a linked list with 705 nodes, and the functions getContact and
listContact to deal with it. listContact works properly, and prints all
some debug information about each node. On the other hand, getContact
breaks when it reaches the 580th node although it's almost identical to
listContact .
Does anyone have any idea about what is wrong?
Thanks,
|
by: karsting |
last post by:
I am using this css. I have a link from the thumbnail to another page, but need to go to the same link on the pop-up image.
IN STYLES
}
.thumbnail{
position: relative;
z-index: 0;
|
by: GloStix |
last post by:
WARNING VIDEO TAKES A WHILE TO LOAD
http://screencast.com/t/BWQ6DNtsM
I really don't know how to fix this other than putting another div. But I dont'
exactly want to do that for every page. random div's everywhere
Is there any other way?
Also I'm trying to get a scaled thumbnail of the orginal picture WHILE maintaining the size of the css box.. Is that possible? Or do I have to scale it in Photoshop and make a separate image =\
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
