Sun, 2005-06-26 19:53
Apologies if someone may have covered this already..I ran a search but found no match..
I have a page which is created with style sheet, I have sized it to "safe area"
What I want to do is ensure it always appears in the centre of the browser window when page is opened..
Can anybody help??
Thanks
:roll:
Sun, 2005-06-26 19:57
#1
centre a web page in a browser
Hi Tim
You need to apply this to your container div:
#container {margin: 0 auto;}
That'll place it at the top of the page vertically, in the middle horizontally.
#container {margin: 1em auto;}
Places it 1em down from the top of the page vertically, in the middle horizontally etc etc.
Edit: sorry, forgot: to get the above to work I think you have to also have
body {margin:0; padding:0; text-align:center;}
And then obviously get the text-aligned properly futher on in the stylesheet.
If you have a smaller central div that you want centred vertically as well as horizontally then look here: http://www.wpdfd.com/editorial/thebox/deadcentre4.html (TM - Roytheboy tips Ltd)
Sun, 2005-06-26 20:18
#2
centre a web page in a browser
Thanks Hells Bells
Sorry..I am pretty thick ..
I have this in the css file
div#body {
position: absolute;
width: 760px;
height: 410px;
background:#CCCCCC
}
This contains everything to be displayed on the page?
Where should I place the code you have suggested...sorry...I messed with it and it did strange things to the page layout
Sun, 2005-06-26 20:37
#3
centre a web page in a browser
No need to apologise Tim.
Firstly you need to put a container around your actual content so that you can position it within your page body - so you'd have:
<body> <div id="container"> Your stuff goes here </div> </body>
Then how you style that container depends on what you want to end up with.
If you want it just centred horizontally in the window you'd do:
body
{
background-color: whatever;
margin:0;
padding:0;
text-align:center;
}
#container
{
margin: 0 auto;
width: 760px;
height: 410px;
background-color:#CCCCCC
}
If you want it centred horizontally and vertically (which is traditionally harder to do with CSS) then you need to use the technique from that page linked above - have a look at the source code.
Sun, 2005-06-26 20:52
#4
centre a web page in a browser
The reason you couldn't find anything with the search is your incorrect way of spelling center 
j/k.
Do you have a link to your page - it looks like you're going to more problems than just the centering. Why did you absolutely position the body?
Sun, 2005-06-26 21:01
#5
centre a web page in a browser
Just quickly mention that you must have browsers rendering in Standards mode i.e with a full DTD in order for auto margins to work in IE6. The text-align:center; on the body is to center the main container in IE5 which doesn't understand margin:auto; but you need to re-align the text left on the first child of the body element.
Be careful with the negative positioning trick for centering vertically as it has problems inherent in the negative positioning if the browser is smaller than the centred element and will not scroll any hidden portion of it, otherwise it's a good trick, and before Gary dives in we should mention his preferred method of using a single celled table to contain the layout and which is itself centred vertically with the ease that tables can be.
Hugo.
Sun, 2005-06-26 21:02
#6
centre a web page in a browser
Huh, nice to see it spelled correctly for a change 
Sun, 2005-06-26 21:31
#7
centre a web page in a browser
:oops:
Hi Guys..
Sorry...me and my english spelling
well I have centered horizontally (thanks hellbells) having a bit of a nightmare with css ..only just started with this.
wolfcry..thanks also...page going up at
http://www.film-media-resources.co.uk/test.htm
I tahnk you ll for your help with this
Sun, 2005-06-26 22:00
#8
centre a web page in a browser
Don't listen to them Tim - you spelt it correctly. Dreadful American spelling is only allowed within code!! 
Trying to offer advice at the same time as watching the final ep of 24 doesn't work too well!
Sun, 2005-06-26 22:05
#9
centre a web page in a browser
hells bells...have they shot that useless daughter of his yet ??
woops I've just stumbled into another psychotic terrorist...I'm just a sucker for hitch hiking ..I mean come on gurl.....get it together
:twisted:
Sun, 2005-06-26 23:08
#10
centre a web page in a browser
Hey less of the "Them" I'm English I'll jolly well have you know, and was defending the correct spelling with it's proper and vital 'U' for correct enunciation (er hang on we weren't talking about 'Colour' were we :oops:), rounded on by my own kinsmen I don't know I'm really hurt now 
Mon, 2005-06-27 00:32
#11
centre a web page in a browser
TIM SATCHWELL wrote:
Don't you mean centreed? :? well I have centered horizontally...
Mon, 2005-06-27 00:34
#12
centre a web page in a browser
I don't understand why Brits would defend and support French spelling 'centre' and 'theatre' over real English 'center' and 'theater'.
Sheesh, they try to control Charles until Parliament usurp the throne, and later, install Mary and her hubby William of Orange. Then, in what, 1740?, they support another Charles Stuart in civil war to oust George. And, you fight'em in the colonies (thus training American patriot officers, thank you very much ).
You fight the Napoleons, giving the world beef Wellington and a comfy boot.
You pull their butts out of the fire in WW the first and second; not that they appreciate it.
Yet you still support the French spelling.
Man, you Brits are weird.
cheers,
gary
Mon, 2005-06-27 01:45
#13
centre a web page in a browser
Uh oh, what have I started :roll:
Tim, lets review your source code. Complete doctype - good. A bit of javascript (to each his own) - that's fine. A linked stylesheet and some internal styling - all fine. Then the body starts, a container div - well and good, this will be a fixed width, centered (centred?) page.
Then the top_menu comes
<div id="top_menu"> <div align="center"><span class="style2">FILM - MEDIA - RESOURCES </span></div> <div align="center"></div> </div
Too much going on here. All you need is this:
<div id="top_menu"> <p>Film - Media - Resources</p> </div>
Note that the <p> could be a <hx> tag as well, I can't really guess as there's no content here. Anyway, you'd style it like this:
#top_menu {
text-align: center;
height: 50px;
margin: 0 0 0 150px;
background: #000;
}
#top_menu p { /* or replace p with hx tag - see above */
font: 2.5em bold small-caps Verdana, Arial, Helvetica, sans-serif;
color: #fc0;
}
Let that sink in before we move on to the next div (ACK 
Table!).
Mon, 2005-06-27 10:03
#14
centre a web page in a browser
kk5st wrote:
I don't understand why Brits would defend and support French spelling 'centre' and 'theatre' over real English 'center' and 'theater'.
Sheesh, they try to control Charles until Parliament usurp the throne, and later, install Mary and her hubby William of Orange. Then, in what, 1740?, they support another Charles Stuart in civil war to oust George. And, you fight'em in the colonies (thus training American patriot officers, thank you very much
You fight the Napoleons, giving the world beef Wellington and a comfy boot.
You pull their butts out of the fire in WW the first and second; not that they appreciate it.
Yet you still support the French spelling.
Man, you Brits are weird.
cheers,
gary
Gary:
Our view of the French is pretty much the same as yours - but you have to remember that British English is a immigrant language developed over 2000 years and more - often simplifying the origins (believe it or not) from Latin, Germanic languages, Scandinavian languages, French and god knows how many others. So French is in there with everything else (1066 and all that).
English is a "bastardised" language and therefore much more flexible than French - which of course is why the French get so hysterical about it! English can take changes in spelling without the meaning of the words being lost - French can't.
Who knows why we keep some words intact and change others in British English. Anyway, it's you chaps that use the term Résumé rather than Curriculum Vitae.
Hugo: You, obviously weren't included in the "them"!!
Tim: Thankfully she wasn't in this series.
Wolfcry: Don't know how you "see" table layouts - I can't work them out anymore, I get lost! God they're complicated!
Mon, 2005-06-27 16:02
#15
centre a web page in a browser
HellsBells: I was being facetious. I was also taking the opportunity to jerk Hugo's chain, as is my wont
cheers,
gary
Mon, 2005-06-27 16:32
#16
centre a web page in a browser
Actually, you know why I decided to bore you all to death with a sensible explanation? It's because I'm p****d off that I can't spell properly anymore - I actually have to think about spelling centre and colour - too much code.
Mon, 2005-06-27 16:43
#17
centre a web page in a browser
Not to interrupt but canadian english is a lot like brit english... In fact I don't know whether it's different or not but when I set up my computer I have the choice of either can eng, uk eng, or usa eng.
Mon, 2005-06-27 18:04
#18
centre a web page in a browser
Does it spell about "aboot"?
Mon, 2005-06-27 18:14
#19
centre a web page in a browser
HellsBells wrote:
Does it spell about "aboot"?
Watcha talkin' aboot!?
Mon, 2005-06-27 18:36
#20
centre a web page in a browser
canadian, eh?
Mon, 2005-06-27 19:50
#21
centre a web page in a browser
Gary, attempting to get a rise from Hugo wrote:
I was also taking the opportunity to jerk Hugo's chain, as is my wont
And I was deliberately not rising to the bait.
I'm far too Cool and aloof for those sorts of games
