469,271 Members | 1,481 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

[CSS] Centralizing

How can I centralize all page elements with CSS? Like the equivalent of
wrapping the body in <center>..</center>?
Jul 23 '05 #1
19 8881
On Sat, 18 Dec 2004 04:08:44 +0000, Cool Guy <co*****@abc.xyz> wrote:
How can I centralize all page elements with CSS? Like the equivalent of
wrapping the body in <center>..</center>?

text-align: center

Read any CSS tutorial, it will reveal wonders.
Jul 23 '05 #2
Were you thinking of having all the paragraphs centered, like centered
text, or do you mean all the elements centered in the browser window
like on my site (http://bigorangesign.com/)

If its the latter, the short answer is to start with:
html, body {
width: 800px; /* insert your width there */
margin: 0 auto;
}

It took me a few hours of messing around to nail it down, but the
effort was worth it.

Jul 23 '05 #3
Were you thinking of having all the paragraphs centered, like centered
text, or do you mean all the elements centered in the browser window
like on my site (http://bigorangesign.com/)

If its the latter, the short answer is to start with:
html, body {
width: 800px; /* insert your width there */
margin: 0 auto;
}

It took me a few hours of messing around to nail it down, but the
effort was worth it.

Jul 23 '05 #4
Cool Guy <co*****@abc.xyz> wrote:
How can I centralize all page elements with CSS? Like the equivalent of
wrapping the body in <center>..</center>?


The center element is only allowed *inside* the body element, so you
can't "wrap" the body element inside a center element.

There is no drop in css replacement for the html center element because
css treats inline and block level content differently.

Have a look at http://dorward.me.uk/www/centre/

Btw, css queries should go to c.i.w.a.stylesheets

--
Spartanicus
Jul 23 '05 #5
Cool Guy wrote:
How can I centralize all page elements with CSS? Like the equivalent of
wrapping the body in <center>..</center>?


http://dorward.me.uk/www/centre/

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 23 '05 #6
Michael Carvin wrote:
like on my site (http://bigorangesign.com/)


Doesn't work. I get a horizontal scrollbar in my 800px window. All
your pages are this way. I also don't see the need for a contact form
on *every* page. Move that to a Contact Us page.

BTW, you have too many <h1>. Your current <h1>'s should be <h2> and
your <h2> should be <h3>. Then make one main heading as the <h1>. The
<hx> is not about font size, if that's what you were thinking.

<h1>Page Main Heading</h1> <- similar to <title>
<h2>Sub-heading</h2>
<h3>Sub-sub-heading</h3>
<h3>Sub-sub-heading</h3>
<h2>Sub-heading</h2>
<h3>Sub-sub-heading</h3>
<h4>Sub-sub-sub-heading, if necessary</h4>
<h3>Sub-sub-heading</h3>

--
-bts
-This space intentionally left blank.
Jul 23 '05 #7
"Neal" <ne*****@yahoo.com> wrote in message
news:op**************@news.individual.net...
On Sat, 18 Dec 2004 04:08:44 +0000, Cool Guy <co*****@abc.xyz> wrote:
How can I centralize all page elements with CSS? Like the equivalent of
wrapping the body in <center>..</center>?

text-align: center

Read any CSS tutorial, it will reveal wonders.


Read closer. Trying out this CSS with standards-compliant browsers will
also reveal wonders: namely that text-align:center is not effective for
blocks; you have to use margin-left:auto and margin-right:auto ... but you
also have to use text-align:center because IE (surprise!) gets this wrong.

Jul 23 '05 #8
Thanks for the critique, although I was trying to assist Cool Guy with
his problem. I don't understand why you decided to turn the topic of
the thread into a crit.

First, it does work. It has a horizontal scrollbar on 8x6 and under
because the site is designed for windows larger than that. If you are
viewing the site in a window larger than 8x6 and you get scrollbars,
please send me a screenshot. Second, the contact form is experimental;
I've gotten both positive and negative feedback on it. Third, I see the
value in your h-tag suggestions and will rewrite the site in January
with that in mind. I am aware that h-tags are not about font size, but
semantics.

Next time I need a crit, I'll be sure contact you.

Back to the topic at hand, Mr. Upsdell echoes the margin: 0 auto;
advice but I don't use text-align: center; in my CSS, and I would be
interested in what environments that declaration would be necessary
(maybe pre-IE5.5?).

Jul 23 '05 #9
Michael Carvin wrote:
First, it does work. It has a horizontal scrollbar on 8x6 and under
because the site is designed for windows larger than that.


In other words, it doesn't work.
Jul 23 '05 #10
Michael Carvin wrote:
Back to the topic at hand, Mr. Upsdell echoes the margin: 0 auto;
advice but I don't use text-align: center; in my CSS, and I would be
interested in what environments that declaration would be necessary
(maybe pre-IE5.5?).


http://dorward.me.uk/www/centre/#ie

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 23 '05 #11
Excellent argument, really. I'll be sure to just say "In other words,
it doesn't work" the next time I find myself in your position. I will
take the high road here and politely bow out.

Jul 23 '05 #12
Michael Carvin wrote:
Thanks for the critique, although I was trying to assist Cool Guy
with his problem. I don't understand why you decided to turn the
topic of the thread into a crit.
Please accept my humblest apologies for the critique.
First, it does work.
Earlier, you said, "Were you thinking of having all the paragraphs
centered, like centered text, or do you mean all the elements centered
in the browser window like on my site (http://bigorangesign.com/)"

I do not see what you are describing as "all the elements centered in
the browser window". How big does the window have to be? At 1024 (the
largest my monitor is capable of, nothing appears "centered" though
there is a very small border on the left and right.

So ... what was your advice?
It has a horizontal scrollbar on 8x6 and under
because the site is designed for windows larger than that. If you
are viewing the site in a window larger than 8x6 and you get
scrollbars, please send me a screenshot.
Ok, I have a scrollbar at 948 px as well. ;-)

You've probably seen the oft-posted link to:
http://www.allmyfaqs.com/faq.pl?AnySizeDesign
Second, the contact form
is experimental; I've gotten both positive and negative feedback on
it. Third, I see the value in your h-tag suggestions and will
rewrite the site in January with that in mind. I am aware that
h-tags are not about font size, but semantics.
Ok.
Next time I need a crit, I'll be sure contact you.


Please do! ;-)

Oh, would you mind quoting a bit of the relevant text when you reply?
Thanks for that consideration.

--
-bts
-This space intentionally left blank.
Jul 23 '05 #13
in comp.infosystems.www.authoring.html, Spartanicus wrote:
Cool Guy <co*****@abc.xyz> wrote: There is no drop in css replacement for the html center element because
css treats inline and block level content differently.


No, as stated many times, HTML does in fact treat inline and block
elements as CSS, but as spec was written only after center element was
already used in browsers, and most browsers still use the old way. Opera
does get it right sometimes, if moon is on right angle on sky...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #14
Michael Carvin <mi************@gmail.com> wrote:
Were you thinking of having all the paragraphs centered, like centered
text, or do you mean all the elements centered in the browser window
like on my site (http://bigorangesign.com/)


I'm sorry to have indirectly caused the below sub-thread.

Thanks for the replies.
Jul 23 '05 #15

Cool Guy wrote:
How can I centralize all page elements with CSS? Like the equivalent of wrapping the body in <center>..</center>?


It depends on what you're trying to do. If the page is entirely text
with no block-level elements,
body {text-align: center;} in your stylesheet will do what you want.

Jul 23 '05 #16
Michael Carvin wrote:
html, body {
width: 800px; /* insert your width there */


Sure, but insert the width using sensible units. That is, don't set the
page width in pixels unless your content is only images.

--
Brian (remove "invalid" to email me)
Jul 23 '05 #17
Michael Carvin wrote:
Thanks for the critique, although I was trying to assist Cool Guy
with his problem. I don't understand why you decided to turn the
topic of the thread into a crit.


Boo hoo. This is a discussion forum, not a help desk. You post a url, we
discuss it in terms of www authoring.

--
Brian (remove "invalid" to email me)
Jul 23 '05 #18
C A Upsdell wrote:
"Neal" wrote
Cool Guy wrote:
How can I centralize all page elements with CSS? Like the equivalent
of
wrapping the body in <center>..</center>?

text-align: center

Read any CSS tutorial, it will reveal wonders.


Read closer. Trying out this CSS with standards-compliant browsers will
also reveal wonders: namely that text-align:center is not effective for
blocks; you have to use margin-left:auto and margin-right:auto ... but
you
also have to use text-align:center because IE (surprise!) gets this
wrong.


Yes, I was too brief.
Jul 23 '05 #19
in comp.infosystems.www.authoring.html, C A Upsdell wrote:
"Neal" <ne*****@yahoo.com> wrote in message
news:op**************@news.individual.net...
On Sat, 18 Dec 2004 04:08:44 +0000, Cool Guy <co*****@abc.xyz> wrote:
How can I centralize all page elements with CSS?
CSS for centering everything in body like <center> does in tagsoup:

body {text-align:center}
body > * {margin:auto;text-align:left;}

inline stuff will be centered and block stuff will be centered. No, it
doesn't work on IE (as it don't support > selector), for IE you need to
make each and every element centered separately.
Like the equivalent of
wrapping the body in <center>..</center>?
text-align: center

Read any CSS tutorial, it will reveal wonders.

Read closer. Trying out this CSS with standards-compliant browsers will
also reveal wonders: namely that text-align:center is not effective for
blocks; you have to use margin-left:auto and margin-right:auto ... but you
also have to use text-align:center because IE (surprise!) gets this wrong.


Try out <center> on browser that gets HTML by spec, and you should get
identical results. (no, I don't know if such graphical browsewer exists)


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by andy johnson | last post: by
59 posts views Thread by Mason A. Clark | last post: by
145 posts views Thread by Mark Johnson | last post: by
48 posts views Thread by David J Patrick | last post: by
reply views Thread by Keith Patrick | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.