PDA

View Full Version : Vertically centering a website


Ricky55
09-12-2008, 11:39 PM
Not something I've had to do for a while this, I'm working on a flash based web site that I want to centre horizontally and vertically.

I once asked this before a few years back and NeonFlux gave me some code that works but it just seems a bit of a work around.

I've been looking around and there seems to be quite a few ways of doing this, can I just ask what's the best method?

The cleanest HTML & CSS and fully valid way that works in all browsers.

Thanks

Ricky55

For ref the code I have I used on this site
http://www.idahobeds.co.uk

neonfluxx
09-13-2008, 12:18 AM
PM me ricky I got just the thing you need

domedia
09-13-2008, 01:26 AM
The cleanest HTML & CSS and fully valid way that works in all browsers. Flash website so all content is going to reside in the flash movie. HTML/CSS does not matter at this point, it's just a holding container for your embedded object. ;)

Use a table with one cell 100% width and height. Old and stable method.

If anything else post it in the forum please. There's been comments before about having useful threads where the actual solution is not given in private. Kinda defeats the purpose of the forum.

Ricky55
09-15-2008, 10:59 PM
What do you think to this method, seems great.



CSS
#wrapper {
width: 974px;
height: 756px;
margin-top: -378px;
margin-left: -487px;
background: red;
position: absolute;
top: 50%;
left: 50%;
}

innerWrap {
width: 974px;
height: 756px;
position: relative;
}

HTML
<div id="wrapper">
<div id="innerWrap">
</div>
</div>

Ricky55
09-15-2008, 11:04 PM
its actually just


CSS
#wrapper {
width: 974px;
height: 756px;
margin-top: -378px;
margin-left: -487px;
background: red;
position: absolute;
top: 50%;
left: 50%;
}

HTML
<div id="wrapper">
</div>

Rob_Che
09-15-2008, 11:05 PM
Hey Ricky - can you explain that code... I can't get my head around it.
Not sure what the minus margins and percentages add up to?

Cheers
Rob

Ricky55
09-16-2008, 01:22 AM
I didn't write this but its a great way of centering content vertically.

The -margins are half of the wrapper size, if you remove the margins from the CSS and preview you'll see exactly what they are doing.

The top / left 50% positions the upper left corner of the Div in the center of the page as it would 50% of the div both in length and width, the negative margins then pull it back half of its self to make it center.

Its harder to explain than it is to just remove the margins and see what the code does without them.

Ricky55
09-16-2008, 01:32 AM
See attached example

Death Dream
09-16-2008, 03:45 PM
Flash website so all content is going to reside in the flash movie. HTML/CSS does not matter at this point, it's just a holding container for your embedded object. ;)

Use a table with one cell 100% width and height. Old and stable method.


Thats kind of what I was thinking...

~Death Dream~

Ricky55
09-16-2008, 04:22 PM
This can be used for any application Death Dream, somewhere for my Flash to reside is just one of them.

I think it does matter even with Flash though, if you embed your Flash movies with swfobject and use a method such as this you end up with a file that validates which is better in my opinion than loads of scruffy embed code and a table set to 100%.

domedia
09-16-2008, 05:46 PM
Table code is 100% valid, it's part of the HTML spec.
Validation does not guarantee that it looks good in the browser either, it just says that your code conforms to the specs.

Not to say that valid code is not nice to have of course.

Ricky55
09-16-2008, 05:51 PM
That's my point really mate, it just seems a better solution to my mind.

edbr
09-17-2008, 01:40 AM
if you embed your Flash movies with swfobject care to expand on that?
In a new thread maybe I tend to avoid flash like an ex mother-in-law but Im curious