The only comment I would make is that you didn't take up my suggestion to remove the p tags and put the class on the a tags. You are adding extra unnecessary markup and the cleaner your code, the quicker it downloads and the easier it is to debug. Also your images take forever to download

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...

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..

1. what is nail? i didnt find it in W3school refernce...

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.

1. what is nail? i didnt find it in W3school refernce...

2. to validate ny code i had to take out every element within the <a> tag.. so now my photo gallery wont fire off.. u see now when i say-

div#nav a:hover span

nothing hapens... i thought mybe to put an ID to the <a> tag or to its parent (a <p> tag) but still nothing..

do u know how i can stay with a validate code and still can pull off this CSS photo gallery?

oops.. of course it wont fire of because the span is not inside the <a>... but what do i do if i want to make differen stayles to the <p>'s and i need this H2 for SEO... should i put a span inside each <a> that inside each <p>??

3. about my original Q we probebly wait untill Q #2 is answered..

thanks

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/

(BTW- if you are familiar with good resources exept www.quircksmode.com.. i will be more than happy to learn about/from them)

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

in the PC in the same settings- (1280 on 720) - the position is off..

the text size is the same (medium)

the PC and  LT have both IE7 but-

the virsion of the PC-7.0.5730.13
128 bits of encryption
                                                                } i don realy know if it makes any differnce
the LT virsion- 7.0.6001.18000
256 bits of encryption

///////////////////////////////////////////////////////////////

so- i think its have to be somthing with the width of the screen.. i dont know the actual term but like i watch videos in 16:9 in my LT

so its probebly somthing to do with this.... right????

p.s.- the cleaning of the code is right now in the top of my To Do List...

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?

and for now its the different positioning in pc screen VS laptop screen.       why?????????????????

p.s.
i cant get the link u posted... are u sure this is the right one?