thumbnails, target to iFrames, XHTML compliant?

hello webforumz members!

i am making a gallery page but i haven't uploaded yet so i'll try my best to describe it.

the thumbnails are in the upper portion of the page, and i have an iFrame below them where i want the photos to be displayed as opposed to opening a new window. so far its going great, but all the styling is in my markup including target, borders etc which isnt XHTML 1.0 compliant. i'd also like the photos to be center-aligned if possible.

how do i do this? maybe not using frames? what about the embed or object tags?

any help is appreciated!

XHTML 1.0 doesn't stop you from having embeded css but you are far better having your css into a seperate file. It makes the downloads lighter and quicker.

Why not try loading the images into a div whose position and visibility you could control through css.

my css is in a seperate file, but when i try to assign attributes to the iframe ex.

Code: Select all

iframe {border:0;frameborder:0;width:300px;height:300px;}

it's totally messed up in IE. so i put that in the markup

Code: Select all

<iframe border="0" frameborder="0" width="300" height="300">
</iframe>

and it doesnt validate. somebody mentioned php and javascript to me. i dont know what that does. can someone explain?

You would lose the iframe all together and replace it with a simple div on the page which held your photo, one div per photo.

With CSS, use absolute positioning to keep them all in the same place.

With javascript, use an 'onmouseclick' to make them appear, disappear.

I did it here: http://www.fuddruckersne.com/menu/

oh cool, that is exactly what i want. its just one page, not a whole collection of photos. does each photo have to be in its own div? can i use a scrolling div?

how did you do it? can you talk me through it please? that would be awesome!

(im actually excited now, haha! ive been perplexed by this gallery thing im doing for some time now.)

View the source of this page: http://www.fuddruckersne.com/menu/

And this one (javascript): http://www.fuddruckersne.com/scripts/menu-hide.js

And this one (CSS): http://www.fuddruckersne.com/styles/screen.css

Copy/paste the bits from those three files, do some experimenting, and teach yourself how.

Anything much more than that and I'd have to send you an invoice

cool, thanks!