Depends on how you have your site coded. You have a link to the site so we can look at the code?

hello friends..

well i have kind of the same problem so i'll post under this topic.

i have a photo gallery with css style. the photos displays when i hover different menu items.

the problem is the different positioning of the photo in a laptop screen and a pc screen.

now it is set to be correct in a laptop..

this is my site - www.blacksmith-yt.co.il

the photo gallery is in the landing page. just hover the navbar in the right side of the window.

thanks in advance.

I played around a little bit - http://www.aandbwebdesign.com/misc/dark.html - but haven't had enough time to figure out how to get the images to show up in the right spot.  I'm using the same image for each hover for the moment, to avoid the issue with the different size images, but it hasn't helped me yet.  I'll try to get back to this later, but cannot promise.

The link works - but I cannot get the positions right.  I don't think it's an issue between laptop and PC, but between different resolutions.  Mine now works for 1280 wide, but at anything less, and the position is off again.  Using % for left didn't help, either. 

However - I would think you'd be better off cleaning the code first and working from the top down.

Can someone else help with the positioning of these hover pics?

It is not a screen resolution issue, I tested your site in 3 different browsers Safari, Firefox and Opera, on a Mac laptop at 1440 x 900 and the photo gallery image shows in a different position in each. Same thing on a PC at 1440 x 900 in IE 7 and 8, Firefox and Chrome, none of the images showed in the same place either.

Clean up your code first as Andrea suggested. Also as she said your images need to be all the same size.

Just looked at your code and your problem stems from your positioning. The div#nav a:hover span  have position:absolute but the containing div#nav is  floated so the photos are not appearing in relation to the #nav tag but in relation to either the viewport or the site tag. The div#nav has to be position: relative so that the absolutely positioned span tag can place itself in relation to the div#nav.

The css should be like this:

div#nav a:hover span {
position: absolute;
visibility: visible;
top: 140px;
right: 470px;
}

The top and right place the span image in the same position relative to the #nav. You do not have to give each span tag a different id unless you want the image to appear in a different position. If that is the case you would need to change the top and right on the span tag with id to change the position.

I hope I am making myself clear. Here is an article, which will help you understand the whole concept of positioning.
http://www.barelyfitz.com/screencast/ht … sitioning/
and this one on absolute positioning within relative positioning
http://css-tricks.com/absolute-position … sitioning/

Nail is not a css or html term, it's the metal thing you hammer into 2 planks to hold them together.

You were not validating for other reasons, if you don't put the span within the <a></a> tags it won't have the hover element, so obviously your gallery won't work.
This is how you should write your li tags

<li> 
    <a href="חרש_ברזל.html" class="f"> <img src="http://www.blacksmith-yt.co.il/img/H1.jpg" alt="Image of a Hammer">          אודות <br />
    יובל תלם חרש ברזל בגליל והנפחיה 
    <span> <img src="http://www.blacksmith-yt.co.il/img/about.jpg" alt"You must put a description here to validate"> </span>    </a> 
    </li>

Note that the class which you had on the <p> tag is now on the <a> tag, and you were missing alt tags for all your images which will prevent validation.

Now to the positioning of your photo gallery. As I said in the previous post

If you make all your hover images the same size you do not need to give them an id, they will appear in the same place from any of the nav links.

hy andrea and virtual.

first of all i want to thank u very much for your time and effort. i think that i am on a verge of break through in my understending of css!

i changed a lot in my code and css.. i invite u to take a look on the new page - www.blacksmith-yt.co.il

i have one problem in FF and Chrome (im not sure about IE8...)-

when i set my hover images to be

top: -0.1%

those browsers makes them refer to div#site.. and not the div#nav..

why?

p.s.- i need the "top" set because without it the image will be set verticaly to each <li> tag..

p.s.2 - i use IE7 in my laptop..

OK

thats it.. every thing is in place.

a summery for all the young web developers like me-

problem= positioning is of set.. codes not validated.. CSS photo gallery ofset..

solution=

• Validate your code!

• get a good idea about the BoxModel (http://www.quirksmode.org/css/box.html)

• get a good idea about positioning and floats (http://www.w3schools.com/css/css_positioning.asp, http://www.w3schools.com/css/css_float.asp, also- http://www.quirksmode.org/css/contents.html)

• here is a very good exemple of a CSS photo gallery (http://www.webreference.com/programming … index.html)
  

and again thank u andrea and virtual...