CSS image display query 2

[DarrenPower]

Hi,

I'm having an issue getting a rollover image to sit relative to the top of the page, rather than the browser window.

http://michaellydon.co.uk/redesign/

If you rollover the thumbnails then this overlays the image on the right, but if you scroll down the page then these are now offset from the right-hand image.

Any assistance would be greatly appreciated.

Kind regards,

Darren.

 

[Vragabond]

I am not quite sure what you are trying to achieve. If you're trying to cover up the image on the right of the text with other thumbnails, this is already not happening -- I can see about 30px offset from it. Also, I am not sure if you want to position the larger images relative to the page (use absolute positioning then) or relative to the browser window or viewport (use fixed positioning then but know that it does not work in IE6).

Please explain in more detail which browser does it not work in and how does it not work (what is the expected result and how is it differing from it).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DarrenPower]

Hi,

I appreciate your response and apologise for the lack of clarification.

I wish to position the images relative to the page, and covering up the image on the right, but still allow for a certain degree of differentiation between user's resolutions.

The rollovers cover up the image on my resolution (1440x900 on IE7), but I have since noticed that it's quite off on others.

I used fixed positioning as absolute positioning for some reason created a large amount of whitespace below the footer of the page. Also, absolute positioning still only seems to position it relative to the thumbnails; could this be because the container it sits in is positioned relatively?

When I positioned the rollover as relative this is then affected by the text paragraphs.

Am I trying to push a square peg through a round hole?

The CSS is:

.gallerycontainer{
position: relative;

/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.gallerycontainer a{
cursor:default;
}
.gallerycontainer anclick{
cursor:default;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;

}

.thumbnail:hover{
background-color: transparent;

}

.thumbnail:hover img{
border: 1px solid #a9a9a9;


}

.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top:9em;
left:59em;
/*
top: -23em;
left: 36em; /*position where enlarged image should offset horizontally */
z-index: 50;
}
/* GALLERY END */

 

[DarrenPower]

And the HTML is:

<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="images/residential/moss_lane/outside_main.png" width="100px" height="100px" border="0" /><span><img src="images/residential/moss_lane/outside_main.png" /><br /> Outside</span></a>
<a class="thumbnail" href="#thumb"><img src="images/residential/moss_lane/living_main.png" width="100px" height="100px" border="0" /><span><img src="images/residential/moss_lane/living_main.png" /><br />
Living Room</span></a>
<a class="thumbnail" href="#thumb"><img src="images/residential/moss_lane/kitchen_main.png" width="100px" height="100px" border="0" /><span><img src="images/residential/moss_lane/kitchen_main.png" /><br />
Kitchen</span></a>
<a class="thumbnail" href="#thumb"><img src="images/residential/moss_lane/bathroom_main.png" width="100px" height="100px" border="0" /><span><img src="images/residential/moss_lane/bathroom_main.png" /><br />
Bathroom</span></a></div>

 

[Vragabond]

There's 4 positioning you can use:

1. Static is the default position and it will make the element appear exactly where it exists in the code. You can't use that.
2. Relative positioning is much the same expect that it creates a reference point for absolute positioning and you can displace the relatively positioned element by adding the left/right/top/bottom properties. Displaced element will appear elsewhere in the page but still occupy its existing space.
3. Absolute positioned elements are taken out of the flow of the document and appear on top of the document, similar to a post-it note appears on a book page or printed text. Absolutely positioned elements do not interact with other elements on the page (they don't push the content around, they simply float over [or under] the content). Absolutely positioned elements are positioned according to the first positioned (relatively or absolutely) parent. If such parent does not exist, they are positioned according to the viewport.
4. Elements with fixed positioning are taken out of the flow (and behave much like the absolutely positioned ones), except they are always positioned only according to the viewport. This further means that when the viewport is scrolled, the elements do not scroll off the page, but remain in view -- because they are not fixed onto the webpage (which is being scrolled) but on the browser window (which is always pinned down). A similar thing to fixed positioning would be a post-it note on a glass cover of a book. You can flip through pages, but the post-it will still remain visible.

Given all these explanations, you need to go with absolute positioning. Furthermore, you need:

1. To make sure the first parent of the absolutely positioned element (span) will be the appropriate element which will allow precise positioning of the photo over the previous one. The best one seems to be #mainContent, although #container could work as well. This will require you to remove relative positioning from the .gallerycontainer (and any other parent on the way to mainContainer).
2. Adjust left/right/bottom/top properties to match the ones of the photo on the right. Remember that you're not limited to positioning from the top-left corner of the element -- you can do it in the top-right, which seems more appropriate for you. In addition to that, note that you can use negative values to place the element outside the parent container.

This should allow you to precision place the image where you want it -- and the image will stay there regardless of the window size. Also note that given the proper use of absolute positioning, there should be no additional gaps at the bottom.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[johnwm]

For disjointed rollovers I usually use display:none and position:absolute for the span element and display:block for the span hover.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[johnwm]

Sorry vrag I was typing while you posted!

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[DarrenPower]

Ah I see now. Much appreciated to the both of you.

A couple of things have emerged from this though

When I rollover the thumbnails all seems in order and inline, but on Mouseout the shadow border of the right-hand image is now offset to the left. If I then rollover one of the 'recent projects' links the image on the right now jumps over to the left, making the thumbnails out of kilter again.

Also, the space at the bottom of the screen has now gone, but there'es a fair bit of space now on the right and causes a horizontal scrollbar.

Thanks again.

 

[Vragabond]

I can't know if this will work, but I would suggest the following:

1. Don't switch between display: none and display: block;. Instead display it as block and give it top/right values right away (even when it is not hovered over).
2. Switch between showing the photo and not showing the photo by switching its right value (from -10000em to the real value -21px).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DarrenPower]

Hi Vragabond,

Alas removing the switch between displays again gives me the whitespace below the footer that I had previously, but the image problem remains...

 

[DarrenPower]

Righto, I seem to have fixed that issue (was owing to lack of four explicit margins in the left hand subnavigation) but now cannot scroll to the bottom of the page as it keeps jumping back up.

The extra space to the right, resulting in a horizontal scrollbar is also still there.

 

[DarrenPower]

I have just noticed though that upon refresh the image is over to the left, before correcting itself...

 

[DarrenPower]

Right, I've now managed to sort out all of these issues.
The image jumping appeared to be something to do with the mainContent div having a relative position (I've changed it to the Container div) and scrolling to the bottom and jumping back up had something to do with an equal column JavaScript file issue which I'll post on the other board.

I still have the extra space to the right though if you've any ideas?

Apologies for being a bit dense...

 

[Vragabond]

Sorry, I made a mistake in my last post. Could you try 10000em instead of -10000em. 10000em from right will put your element off screen to the left (should be no scrollbar), while -10000em puts it further to the right (resulting in a scrollbar).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DarrenPower]

Hi Vragabond,

It doesn't seem to make a difference either way. Even removing the right positioning completely still has the extra scroll.

 

[Vragabond]

You're right. It makes no difference, because none of the elements in the gallery, thumbnails or big pictures are the cause of the gap.

What I tend to do in situations like these, I strip down the code (html and css) until the error disappears. With your code, I found out that the culprit was the image, with the margins that are causing the scrollbar. In fact, it is the two negative margins that are causing the scrollbar (-6px).

Why is this happening, I don't know. IE is funny sometimes. I tried to trace the source to a size of the image or something similar, but found nothing.

If you remove the two negative margins, your shadow looks a little less nice, but the scrollbar is gone.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DarrenPower]

Vrag you're an absolute star!

Your help has been very much appreciated.

Thanks again.

 

[Vragabond]

It was a pleasure. I like the design of your page and you have a very professional attitude. It is always nice to help other professionals.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]