Hello!
I'm fairly new to coding overall, let alone web design in itself but my problem is simple.
Apologies in advance for the horrible diagrams below!
The solution however, may not be so simple... But isn't that what it's all about? :lol:
I'm looking for help or direction towards help for this slight task

I have a page with tables containing images which in effect looks like this ---



I need to (highly preferably without altering the code inside the tables themselves) embed a video (think YouTube) over the top of all the action taking place there, dead in the center of the page like this ---



I know very well that this is possible as I'm sure I've seen this technique used many times before, but the question is how do I go about making it happen?

Any help would be MASSIVELY appreciated.
Thanks in advance.

I think you are looking for a lightbox. It can be done with javascript or css. You can find quite a lot of information by google-ing it.

Hmmm... I'm pretty sure there would have to be a much simpler solution. Lightbox is sorta heavy for what it is I'm trying to do.

I'm looking for something a lot more lightweight that will just *clunk* the embed where it needs to be over the other tables, in a matter of speaking. :P There don't need to be any fancy fading effects or a close button or whatnot... The embed will remain in the the dead center of the screen the whole time the page is viewed anyway.

First step - dump the tables, learn to use CSS for your layout.
Second step - try reading the stickies, there's an entire thread devoted to adding flash, video etc to a page.

Lightbox is likely your best bet and it's not that 'heavy' at all.

The tables are absolutely necessary as they house parts of a background image and hold the pieces together in the correct alignment to draw out the image itself... Some areas of the background image function as links to other pages so there's no way of getting rid of them and adding the embed code in to any particular table would either have to throw all the other tables out of alignment or the video wouldn't be visible beyond the video at all...
I'm pretty sure this can't be done with CSS, but if it can, please correct me. :P

And I know Lightbox isn't heavy, it's an impressive and fantastically put together script which is really good for its practical uses.. I'm just saying that for what I'm trying to do it's overkill and there must be a simpler way.
I'm looking through the Lightbox scripts now to try and work out how the particular function that I'm looking for works. Not sure if this will yield anything useful to me at all as I'm pretty braindead when it comes to JavaScript, heh.

It's easy, I dunno why nobody has helped you yet. You can keep everything the way you have it now including tables (which is appropriate if the data is tabular in nature). Just use css for the video positioning only. Try this:

<div style="position:absolute;top:0;left:0;width:100%;height:[height of table]px;text-align;center;z-align:9;">
you tube embed code here
</div>

Replace [height of table] with the height of the table you're covering.

Note that the css z-align property won't work for all elements. Your video may or may not cover certain special fields if they show up in the table like <SELECT> dropdowns. You can use javascript to temporarily disable them if there are any that the video won't cover. (document.getElementById("whatever").style.visibil ity="hidden";, then change it back when the video is hidden again if they close it.)

What you're talking is basically like an in-document popup window.

The tables are absolutely necessary as they house parts of a background image and hold the pieces together in the correct alignment to draw out the image itself.

I would have to disagree. I seriously doubt that tables are 'necessary' at all for what you're doing. You have FAR more flexibility with CSS than you'll EVER get with tables.

z-align property won't work for all elements

To my knowledge there is no such thing as "z-align" - z-INDEX yes, align - no.

I would agree that the best way is to use z-index properties or some kind of javascript like lightbox.

So you are saying that on this page, a video will be playing and that there is no need to close the video? So the tables would just be like a background image? Also, if this is what you are trying to do, how will people get from the video page to the other parts of your site?

I am asking because if you are using the table layout as a background, the z-index solution might be the easiest. However, if the video should go away after it is viewed, then the lightbox would be easiest.

Originally Posted by LadynRed

To my knowledge there is no such thing as "z-align"

I hope for a future of 3D.