PDA

View Full Version : Vertical centering


Ricky55
09-21-2007, 07:59 AM
I feel like I shouldn't need to ask this but I just can't get the result i want.

I just want to centre some flash content both horizontally and vertically.

What the best method of doing this? I can centre horizontally no problem its the vertical centre I can't get to work.

Would I be best putting the flash content in a table or doing this with CSS?

Thanks

Ricky55

Ricky55
09-21-2007, 11:29 AM
Got this working now in a table cell but had to remove this code from the top of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This prevented the content from centering vertically.

Is this to do with the W3 standards?

Ricky55

domedia
09-21-2007, 02:44 PM
It has everything to do with web standards. You need a doctype on top of the document to make it valid :)

And using a table cell for layout ain't very 'web standards' either.

How about showing some code or url? I guarantee you it will increase the response rate.

Ricky55
09-22-2007, 12:18 AM
Thanks mate.

This what i have

http://www.qwerty-design.co.uk/hello.html

This is will be a full flash site obviously this was just a test and the site won't look anything like this but will be this size.

This is exactly working how I want but is there a more standards friendly way of achieving this?

I've tested this in a major browsers and it works just fine so should be worried about removing that doc type?

I would like to know if there is a better method though.

I have used the overflow:auto; to stop the scroll bars appearing until they are needed this is also the look i want.

Thanks

Ricky55

neonfluxx
09-22-2007, 06:18 AM
Do not remove the doctype thats a really bad idea.

Heres a code and it really works

Html-----------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="800" border="0" cellpadding="0" cellspacing="0" id="wrapper">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width="800" border="0" cellpadding="0" cellspacing="0" id="center">
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

css--------------------------------------------------------------------------------

@charset "UTF-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
border: 0px;
}
html, body {
height: 100%;
width: 100%;
}
#wrapper {
height: 100%;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#center {
background-color: #666666;
height: 600px;
width: 800px;
}
--------------------------------


This will work and no need to remove doctype

Ricky55
09-22-2007, 07:54 PM
thanks i'll try the code

why is removing the doc type such a bad idea? what harm can this do?

Ricky55
09-22-2007, 08:12 PM
code works cheers just need to drop my flash content into that table cell.

when you use

* {

}

what does this selector do? is it like using body {}

thanks ricky55

neonfluxx
09-23-2007, 01:12 AM
I'm glad the code worked for you.

Answer one:

The doctype is what tells tells the browser how to render the page. So it's a really bad idea to not have one.

Answer Two:

The * is a browser reset it helps all browsers reset to recognize css properly. Very important. Some people try to say it's similar to a body tag, but that is incorrect. It is a browser reset.

d a v e
09-23-2007, 01:15 PM
"It is a browser reset." well that's what it *does* what it *is* is a universal selector, and is therefore similar to the body tag (with the html tag thrown in ;) except it selects everything directly without relying on inheritance

domedia
09-23-2007, 03:06 PM
For more advanced CSS resets, check out Eric Meyers (I like that one), and the one from the Yahoo UI Library. Both can be found through Google :)

d a v e you're a code **** just like me.. not a good idea hehe
neon is that avatar from the online game from that Icelandic company? forgot the name but tried it once..

d a v e
09-23-2007, 03:54 PM
dom. (no pun intended ;) i guess i am although a little knowledge can be a dangerous thing :)

neonfluxx
09-23-2007, 11:31 PM
it is not a body tag, and it is not similar. The body tag will not reset a brower the * does.

d a v e
09-24-2007, 07:28 AM
ffs ;)

i *didn't* say it was a body tag.

using margin:0; padding:0 on the body will zero the margins in most browsers (if i remember rightly it was probably IE5 and 5.5 that treat html as the root of the document tree, not body: more here http://www.w3.org/TR/CSS21/conform.html#doctree ) so using

body {margin:0;padding:0;}

will zero all elements' padding and margins (in most modern browsers) and so in effect 'reset' the browser

using the universal selector AND the same declaration

*{margin:0;padding:0;}
will achieve the same thing in all - well afaik - browsers.

in what way would you say that they are not similar?

can you show me that the using the above on the body tag *won't* reset the browser??

( http://www.w3.org/TR/CSS21/selector.html#universal-selector )

Ricky55
09-24-2007, 08:01 AM
Thanks for the info.

Trying to learn CSS at the moment but I still only really know the basics.

domedia
09-24-2007, 11:56 AM
body {margin:0;padding:0;}
will zero all elements' padding and margins (in most modern browsers) and so in effect 'reset' the browser Hey dave, did you test this? I don't think IE6, IE7 and FF acts like this. The reason I think they don't act like that is because margin and padding is not inheritable, like let's say font-size.:confused:

d a v e
09-24-2007, 12:06 PM
maybe i better had test this then just to make sure i'm not wrong!! ... i'll bash something together tonight and post it later... ;)

d a v e
09-24-2007, 06:50 PM
well i have to say that i was wrong

- sorry neonfluxx :(

looking at this http://pp.kpnet.fi/prescott/stuff/universal.html it's not enough to set it only on the body... using it for the * universal selector, does of course work!

eric meyer has his take on it too (using almost everything but the * )

so i guess it's similar but not similar enough.

i'd always used just the body tag to level the playing field (or should that be padding/margin field) between browsers and it's been fine for me so far ;)

so thanks Dom for picking up on that
<blushes>

domedia
09-24-2007, 07:21 PM
I'm going to use Eric Meyers version on my next project, whatever he says always helped me. From using local styles to hide banner ads to creating my first print stylesheets.

neonfluxx
09-25-2007, 03:05 AM
Not to say I told you so, Just kidding. One thing you will learn about me is I only speak about what i know. If I don't know I don't comment. But thanks for the apology.

d a v e
09-25-2007, 05:21 AM
:) i *hate* saying i'm sorry but if i'm wrong then i'm glad to ;)

ranjan
09-25-2007, 05:36 AM
remember the dos command:

copy *.* a:

What that did was copy ALL files from the folder you are in to a:

* has always been used in computer industry as a UNIVERSAL selector. Universal means ALL / Everything.

so when you say:

*{margin:0;padding:0;}

You are telling the browser:

Hello browser please set margin as 0 and padding as 0 for ALL html elements in the document you are in.

certain tags like h1 to h6 and p, fieldset, etc are pre-styled by the browser by what is called the built-in style sheet(search for html.css in your firefox installation folder). These tags do not inherit style set to html or body, so * has to be used to "RESET" them.

chriskq
09-27-2007, 10:03 AM
the answer i was looking forward to reading wasnt on the last page - lol.

Neon, dom asked u this:
neon is that avatar from the online game from that Icelandic company? forgot the name but tried it once..

well explained too ranjan :)

domedia
09-27-2007, 01:05 PM
Chris, it's called Eve Online. Don't tell me I didn't warn you; don't try it. Like many online games, it's extremely addicting.

neonfluxx
09-29-2007, 12:12 AM
no it's the show i work on. I am a professional editior.