Proper positioning of an enlarged image

[clearwater]

I am having problems with positioning the enlarged image in the proper spot when I hover over the thumbnail image on the web page. I want the enlarged image to show immedialtly adjacent to the thumbnail image on the right hand side using CSS styles and html codes.

I would appreciate a resolution to this problem.

[TheJoshMan]

Please post a link to the page on your site that contains the problematic script so we can check it out.

or at the VERY least...

Please post ALL relevant code so we can have a look...

[clearwater]

Thanks for the quick response.

I have included the CSS code in the following site www.williamsgoldrefining.com. The CSS code is applied on the first image in the Home Page.

The other problem I have is to do with the caption. If the caption includes more than one word, the words seem to be cacading towards the bottom.

Your help will be most appreciated.

[TheJoshMan]

find this section in your css and replace with my version.



.thumbnail:hover span {
left:5px;
top:0;
visibility:visible;
}

[clearwater]

Thanks for your instructions. Yes it works as intended.

Another question if you don't mind.

In the caption area of the enlarged picture the text (more than one word) appear vertically. How can you make it appear horizontally?

[jimbob79]

I don't see any caption?

[jimbob79]

are you talking about the image with yellow background? If so, I don't see a caption there.

[clearwater]

I did not include a caption in the published version. However, when I include one made of more than one word, the words stack on each other vertically. But if I write the words without spaces the caption shows it as one horizontal word. How can you make the words appear horizontally with spaces in between?

Thanks

[clearwater]

Yes I am. However, I did not publish the version which inclued the caption. However, when I include text consisting one word or more, the words stack on each other vertically. But if I write the words without spaces the caption shows it as one horizontal word. How can you make the words appear horizontally with spaces in between?

[TheJoshMan]

i'll take a quick peek at it when i get off work this afternoon if you haven't found a solution by then

[TheJoshMan]

here's what I got when I inserted a caption using FireBug...

http://www.eight7teen.com/images/caption.jpg

and here's the code I used to do it...



<span>
<img height="230" width="330" src="Images/Jpeg%20Images/Shop2.JPG"/>
<br/>
<p> Hello, this is called a caption. This is a caption which runs horizontal until it runs out of room, then it inserts an automatic page break and continues on the next line. </p>
</span>

[TheJoshMan]

also, just thought i'd point this out to you because these are two mistakes that will hurt your site tremendously if used all throughout the site over and over...



<img height="230" width="330" src="Images/Jpeg%20Images/Shop2.JPG"/>


Ok, so here's the breakdown of all those highlighted things...

1. It is considered "bad practice" to use capitalization in file and/or directory names. This is due to the diff in Windows and Unix servers and how they interpret that data.

2. Also, an even BIGGER no no is to use whitespace in direct/relative paths. In other words, this:
Images/Jpeg%20Images/Shop2.JPG

Should be this:
Images/JpegImages/Shop2.JPG

Or if you don't like the looks of it ran together, simply use a hyphen to separate the two words like this:
Images/Jpeg-Images/Shop2.JPG

3. Using uppercase file extensions can also cause trouble. I'd recommend using all lowercase file extensions (html, css, jpg, gif, png, swf, xml, js, etc...)

So, with all I just pointed out... Here's how the above SHOULD look...


<img height="230" width="330" src="images/jpeg-images/shop2.jpg"/>

[TheJoshMan]

you should also work on correcting all coding errors and making the site validate...

Here are your results so far:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.williamsgoldrefining.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

The majority of those errors could be eliminated by using the correct "DOCTYPE" tag. There is no reason for that site to be set as XHTML Transitional.