Intro for a website 2

ofcalcul · Mar 4, 2005

I need to put a flash intro for a website. That for, I have to position that intro movie exactly in the center of the screen. I think that I can do that using a table like this:
<table width="100%" height="100%">
<tr valign="middle">
<td align="center">
.......................................
</td>
</tr>
</table>
but it doesn't work. Do you have any idea?

Thanks,
Cristian

ZmrAbdulla · Mar 4, 2005

Code:

<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
  <tr>
    [b]<td>
      <div align="center">

.................................................

     </div>
    </td>
[/b]  </tr>
</table>

Zameer Abdulla
_{Jack of Visual Basic Programming, Master in Dining & Sleeping}
Visit Me

Vragabond · Mar 4, 2005

You should move the valign to the <td>. Know that this will not work with a doctype though since height="100%" is not a valid value in that case.

oppcos · Mar 4, 2005

You could do something like this:

Code:

<!-- HTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
...
<div id="center">Movie goes here.</div>

Then use style sheets similar to these:

Code:

html {
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: auto;
}

body {
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: auto;
}
#center {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 550px; /* Assuming you have a fixed width movie. */
 height: 550px; /* Assuming you have a fixed height movie. */
 white-space: nowrap;
 margin: -175px 0  0 -275px;
 height: auto;
 background-color: #A242F0; /* Just so you can see for testing. */
 }

If you have relative height or width, then it is even easier. See an example of that here. Just made this up, so may have bugs, but seems to work in IE and FF.

oppcos · Mar 4, 2005

Hm, I'm thinking slow for a Friday. Two posts while I was typing.

CliveC · Mar 4, 2005

Hey Oppcos, Why don't you put up your centering solution as we discussed the other day and request that someone test it on other browsers. My recollection is that it does not work on apple browsers but I no longer have access to apple machines.

When you are satisfied that it works, perhaps you could make a FAQ out of it as this question gets asked many times.

It works in FF an IE6. Take a star for that.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

oppcos · Mar 4, 2005

Thanks. That solution was for a liquid centered object whereas I figured a movie would need fixed width and height. It is linked here. Also, here's another one that's similar but with a non-scrolling header and footer I was playing around with for someone else. That design ended up having a fixed height header and footer, but after I gave it to him I deleted it, so if you're interested in that, I'll have to figure out what I did again..

As usual the style sheet for each of those is named default.css and can be accessed at each link by typing default.css at the end of the url ( example:

http://www.dekunut.com/test/7/default.css

)

My site may never have real content, but it is quickly filling up with hacked up ideas!

CliveC · Mar 4, 2005

I would start a new thread, "Vertical Div Centering". Billy Ray is really helpful he seems to have access to a few browsers and was kind enough to test one of my ideas in them.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Intro for a website 2

ofcalcul

IS-IT--Management

ZmrAbdulla

Technical User

Vragabond

Programmer

oppcos

Programmer

oppcos

Programmer

CliveC

Programmer

oppcos

Programmer

CliveC

Programmer

Similar threads

Part and Inventory Search

Sponsor