CSS & TABLE 1+1=3???

[seccondbest]

OK.....
I will admit it again I am dutch! so please dis-regard my spelling ( i know my browser does)..


I wanted to have a page where browsers (the persons visiting my site) can see a few video's.
This is working now so lets make it more apealing, lets build a stage with curtains, speakers and so on.

I made a transparent gif file and my stage is done.

put the embedded player on a page the gif over it and there we go our own web site theater.

Now lets put it on our web page.

<table border="0" width="100%" height="395">
<tr>
<td width="20%" height="394" valign="top" align="center"></td>
<td width="60%" height="394" valign="middle" align="center">
<div id=layer1 style="position: absolute; top: 20; left: 20; width: 249; height: 245; z-index: 1">
<object id="Player" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" width="239" height="251">
<param name="ShowStatusBar" value="true">
<param name="autostart" value="true">
<param name="ShowAudioControls" value="false">
<param name="ShowDisplay" value="false">
<param name="ShowGotoBar" value="false">
<param name="ShowTracker" value="false">
<param name="ShowPositionControls" value="false">
<param name="CaptioningID" value="capText">
<param name="WindowlessVideo" value="0">
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showControls="0" width="100%" height="100%">
</object>
</div>
<div id=layer1 style="position: absolute; top: 20; left: 20; width: 563; height: 394; z-index: 2">
<IMG SRC="curtain.gif" BORDER=0 width="563" height="394">
</div>
</td>
<td width="20%" height="394" valign="top" align="center"></td>
</tr>
</table>



On the page there are several tables, these 3 are in the middle of my page
the first one holds the menu
the second one should hold the player and stage
the 3rd one hold the videos to choose from

My problem is the "possition= absolute"...........

Using the tables with a width=100% no mather what size screen a user has my table will be a 100% of that screen (page designed on 800/600 settings)
but the possition absolute stays the same so on a bigger screen setting my stage and player are outside the table

How can I keep them inside my table without losing the width=100% option

I know if i make the table, possition absolute it would work but thats too easy lol.

did I say easy???

help me my wife wants it ONLINE 2 weeks ago...

[curtiss]

Have you tried using position = relative for your div instead of absolute positioning?

[seccondbest]

I couldnt remember if I tried that, so I tried it again :::


<table border="0" width="100%" height="1">
<tr>
<td width="20%" height="1" valign="top" align="center"></td>
<td width="60%" height="1" valign="middle" align="center">
<div id=layer1 style="position: relative; top: 50; left: 0; z-index: 1">
<object id="Player" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" width="219" height="241" align="absmiddle">
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showControls="0" width="100%" height="100%">
</object>
</div>
<div id=layer1 style="position: relative; top: -242; left: 10; z-index: 2">
<IMG SRC="curtain.gif" BORDER=0 width="100%" height="394" align="absmiddle">
</div>
</td>
<td width="20%" height="1" valign="top" align="center"></td>
</tr>
</table>


Now I finaly have these two on top of eachother but the rest of the page that follows these two moved down 4 inches and any thing i try messes it al up.

so relative and absolute both give me troubles, and I have no idea what else to try..

thanks for this responce and I hope others will follow

[Leprakawn]

Instead of using a table like that, can you use DIV align for each element?

I did something like that for one site: www.uta.edu/student_orgs/billiardsteam/ (click the cueball, and view the next window's source).

The only drawback to that is that Netscape 8 screws everything up because the second page gets blown into a full tab's window, and everything gets out of place. I figured that was Netscape's (or really, AOL's) way of telling us to learn and use Flash.

[seccondbest]

I looked at that code like you sugested and saw a few things that might work,
I am trying them now.
If they dont help me i will be back lol




thanks so far.

[seccondbest]

Ok i have tried a few different sollutions and this one comes the closest to what i wanted.


http://www.kittennteddy.com


Yep i put it online so you can see my problem (a huge scroll bar on the right)

everything is about right, except for a scroll bar dang this turns out to be harder than i thought.

help me my wife wants a divorce !!!

[seccondbest]

Ok i found a solution, you guy's made me look beyond my screen and i found a BACKGROUND!!!


it was that simple, made one of my pictures the background of the table and placed another table on top of it in which i placed my object.

Not what i wanted but until i get my masters in web building, it will do.

thanks guys for taking the time to assist me in yet another hopelesly lost project.

[Leprakawn]

Originally Posted by seccondbest

help me my wife wants a divorce !!!

Hmm, can I meet her somewhere?

[seccondbest]

Dude for your sake, if you do meet my wife, you better be a master in webbuilding.

My wife has her standards high lol


naww i think i will hold on to her, shes kinda cute.

thanks for all the help here tho

[Leprakawn]

Oh yeah... if she's getting upset with the vertical scrollbar, why not adjust your resolution to something greater, and that should resolve the issue! (I know that would help you on your end by keeping your wife and all, but everyone else with 1024x768 will still see it.)