modifing existing CSS code - any ideas plaese!

Hi, I like the hoverbox code by sonspring, where thumbnail images can be rolled over in a gallery using purely CSS, but I am having problems trying to adjust the code to when i roll over a thumnail (any) the enlarged picture shows in the same place on the right hand side of the page, I've looked at relative and absolute images, but any changes i make just break the page or do nothing - has anyone any ideas - thanks for reading!

DAE

 

the page I am refering to is here:
http://sonspring.com/journal/hoverbox-image-gallery
there is a link to download files a third down the page.

 

IIRC you just have to adjust the left top values to move it around on the page.

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

Code (markup):

if you put top: 33px; and left: 45px; it will move it to the right(I think). Those are the only values you have to alter to change its location. Unless you are trying to make it show in a specific location? If so there are better code examples for that type of behaviour.

 

Hi Shallowlink,

Thanks for your comments.
I tried what you said, but the rollover image hasnt moved, it stays in the same place. I'd like the pop up/rollover to stay in the same place on the right dide of the screen what ever image I run the cursor over...

I thought this would be a simple fix - but its proving quite difficult...!

 

Ok, before I delve into this any further. Do you mean the same fixed location or relative to the current image?

 

It looks like he wants it in the same position relative to the page. In which case, he could use Eric Meyer's idea.
http://meyerweb.com/eric/css/edge/popups/demo.html

 

Hi guys, thanks for replying,

shallowink, I tried changing those dimensions (worked in firefox, not in IE)
but I want the actual image to be displayed in the same location on rollover on right hand side as stomme mentions.

I tried to use the code from you link, is there a simplier way to do it, as I had trouble putting it into the CSS - maybe because its an image, and the code works for text only...? i'm not sure.

Damian.

 

Ah, I just reread the article. he states it has to have negative values on left and top. And I think this is closer to what you want:

http://www.cssplay.co.uk/menu/photo_simple

 

Nah, Eric did it with images too: http://meyerweb.com/eric/css/edge/popups/demo2.html

The thing is, Eric's example is very simple. In order to set absolutely positioned things somewhere, the thing in which you want them positioned relatively too must be described as so. So, Eric sets "position: relative" on the body element. The absolutes only know where the body is. This is the only instance where a positioned element is aware of something else on the page (and the relatively-positioned thing has to be a parent of some kind, never a sibling or a child).

If your coords are working in FF and not IE, I'd say it's possibly a haslayout thing. As Shallowink said, we'd need to see some code to know what all is going on on the page before we can say what these images are children of and are positioned in relation to.

 

Ah, Shallow-- it must be because he's using the original thumbs as the relatively-positioned parents. But, if he'd used the div or whatever is around the whole area (including large image and thumbs), he could use normal (positive) values. Wouldn't work if pos-rel was needed on any of the thumbs tho.

*Edit and as an extra, it's probably safer to have the large image positioned a gazillion pixels left and top and then moved back into place unpon :hover, since otherwise IE can have a fit about going from display: none to display: block. You usually have to specifically trigger haslayout or display by either setting something else like visibility: visible on the :hover, or changing a colour, or something like that. Meanwhile, shifting stuff around without actually changing the display settings (position:absolute makes things "block" anyway) makes the need for IE-specific extras either go away or reduced.

 

cheers guys,

I think i am a bit out of my depth on this one...

as I kind of understand a few points your making, but any changes to code eith do nothing, or totally break page!!

i can manage to replace images etc, and to get the images bigger - no problem, but not what to do with the code so its both FF and IE friendly.

I have attached the file inc graphics just to illustrate what I'm working on...

thanks,

D.

 

Don't feel bad man, the moment Stomme uttered haslayout, my eyes glazed over Kinda busy right now, but I'll look over this first chance I get and see what's up with it.

 

hahaha - okay well any help shadowink would be very much appreciated - its gets so frustrating when you get so near but so far...



thanks!

 

I haven't a clue why this works or doesn't. But I took Stu's example from cssplay. If I used position: absolute; right: 50px; top: 50px; it gave me two different results in FF and IE6. But if I switch it to left:150px; , it almost works the same. I said Almost. I attached the file. It's Stu's code with the above mod, set to work from the same directory as the page you posted.

 

Well, your first problem is no doctype - kiss off ANY version of IE ever behaving like the rest of world since it's in 'quirks mode'. (and some other browsers like opera may go into their own 'world' of quirks mode too)

Because you have floats, I'd not be putting the comment about closing #info after it. Move it before to avoid IE render bugs, and theres no reason to say 'end of' or 'closing' - that's what </div> means... again though, probably not your problem. You are declaring width and heights on your LI which are set to inline - when set to inline those two parameters by the standards shouldn't be doing ANYTHING, nor would the bottom margin on it have any effect... NO idea what that white-space normal is there to accomplish... I'm CERTAIN a universal reset wouldn't hurt... Though in general I'm not even certain I follow what it is you are trying to do...

This is a wild guess:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
	xmlns="http://www.w3.org/1999/xhtml" 
	lang="en" 
	xml:lang="en"
><head>

<meta 
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1" 
/>

<link 
	type="text/css" 
	rel="stylesheet" 
	href="screen.css" 
	media="screen,projection" 
/>

<title>
	Hover me
</title>

</head><body>

<div id="showcase">
	
	<div id="info">

		<h2>Simplest photograph gallery</h2>
		<h3>15th April 2007</h3>

		<div id="gallery">
			<ul>
				<li><a href="#"><img src="img/photo01.jpg" title="" alt="" /></a></li>
				<li><a href="#"><img src="img/photo02.jpg" title="" alt="" /></a></li>
				<li><a href="#"><img src="img/photo03.jpg" title="" alt="" /></a></li>
				<li><a href="#"><img src="img/photo04.jpg" title="" alt="" /></a></li>
				<li><a href="#"><img src="img/photo05.jpg" title="" alt="" /></a></li>
			</ul>

		<!-- #gallery --></div>

	<!-- #info --></div>

	<div id="infoRight">
	<!-- #infoRight --></div>

<!-- #showcase --></div>

</body></html>

Code (markup):

with the following screen.css

* {
	margin:0;
	padding:0;
}

#gallery {
	width:750px;
}

#gallery ul {
	float:left;
	position:relative;
	list-style:none;
	width:180px;
}

#gallery li {
	display:inline; 
}

#gallery a {
	float:left;
	display:inline; /* prevent double margin bug */
	width:52px;
	height:52px;
	margin:0 0 5px 5px;
	text-decoration:none;
	border:1px solid #000;
}

#gallery a img {
	display:block;
	width:50px;
	height:50px;
	border:none;
}

#gallery a:active,
#gallery a:hover {
	border-color:#ddd;
}

#gallery a:active img,
#gallery a:hover img {
	position:absolute;
	left:200px; 
	top:200px; 
	width:auto; 
	height:auto; 
	border:1px solid #000;
}

Code (markup):

Though without seeing the 'live page' I cannot guess as to what's unneccessary code and what's not - My gut is telling me you've got more div's than you need. Validates XHTML 1.0 Strict, tested working in Opera 8.5, 9.26, 9.5 x64 beta, IE 5.5, 6 & 7, FF 2 and FF3 beta, and Safari 3.04 beta windows... So the bases are covered. The float on the UL is to make it wrap floats inside it - the rest of the page should plan accordingly... I did this to yank the stupid clearing break.

NOT that I would EVER actually deploy this thing on a live website - thumbnails usually exist as a separate, much smaller file for a reason, not the least of which is speedy pageloads when the user first hits the page, another being to save bandwidth since it is highly unlikely in most galleries for every visitor to open every image.

 

Hey most of those comments sound like they are toward my example. Direct 'em toward the OP's file. Did you read the thread? Your comments are appreciated but outside of lacking a doctype (my oversight since I was in hurry up mode) are misdirected since I stated its Stu's code from cssplay. I have 0 interest in doing hover on any of my websites. Those files are all, there's nothing else to clutter it up.
And to the OP, just add a doctype and right: x; should work like Deathshadows says. Course screwy part is that right: doesn't work in quirks mode but left: does.

 

thanks for taking a look at this shallowink and deathshadow.

Its tricky getting this code to be all things to all browsers... but I think between the 2 of you I have achieved what I wanted to, so thanks very much.

I take it now I just need to position my DIV, so I can have it appearing where I want on the page, and then fit this DIV between the rest of my content.

DS, the reason I chose this type of layout is that the rollovers are great way to show gallery images in a professional, quick, slick manner without having to open a new page to see the next image.

I will post my final version when completed, as a matter of interest.

Incidentally, I have several projects in the pipeline for which I will need help with (tweeking my CSS and making sure it works in the main browsers), and would be happy to pay a nominal fee per CSS fix, so please let me know if thats something you may be interested in...

cheers guys,

DAE