21 replies [Last post]
TIM SATCHWELL
Offline
newbie
Last seen: 9 years 17 weeks ago
Joined: 2005-06-26
Posts: 4
Points: 0

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:

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

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)

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

TIM SATCHWELL
Offline
newbie
Last seen: 9 years 17 weeks ago
Joined: 2005-06-26
Posts: 4
Points: 0

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

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

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.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 33 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

centre a web page in a browser

The reason you couldn't find anything with the search is your incorrect way of spelling center Cool Laughing out loud 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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 2 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 2 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

centre a web page in a browser

Huh, nice to see it spelled correctly for a change Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

TIM SATCHWELL
Offline
newbie
Last seen: 9 years 17 weeks ago
Joined: 2005-06-26
Posts: 4
Points: 0

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

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

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!! Wink

Trying to offer advice at the same time as watching the final ep of 24 doesn't work too well!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

TIM SATCHWELL
Offline
newbie
Last seen: 9 years 17 weeks ago
Joined: 2005-06-26
Posts: 4
Points: 0

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:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 2 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

centre a web page in a browser

TIM SATCHWELL wrote:
well I have centered horizontally...
Don't you mean centreed? :? Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 40 min 35 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

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 Smile).

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 33 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

centre a web page in a browser

Uh oh, what have I started :roll: Wink

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 Shock Table!).

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

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 Smile).

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. Wink

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!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 40 min 36 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

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 Smile

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

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.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

sanch3x
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

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.

Seb

"Don't worry about Blank let me worry about Blank"

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 6 years 25 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

centre a web page in a browser

Does it spell about "aboot"?

Wink

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

sanch3x
Offline
Enthusiast
Last seen: 5 years 3 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

centre a web page in a browser

HellsBells wrote:
Does it spell about "aboot"?

Wink

Watcha talkin' aboot!?

Seb

"Don't worry about Blank let me worry about Blank"

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 33 weeks 6 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

centre a web page in a browser

canadian, eh?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 2 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me