[CSS] Centralizing

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

re: [CSS] Centralizing

On Sat, 18 Dec 2004 04:08:44 +0000, Cool Guy <coolguy@abc.xyz> wrote:
[color=blue]
> How can I centralize all page elements with CSS? Like the equivalent of
> wrapping the body in <center>..</center>?[/color]


text-align: center

Read any CSS tutorial, it will reveal wonders.

re: [CSS] Centralizing

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.

re: [CSS] Centralizing

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.

re: [CSS] Centralizing

Cool Guy <coolguy@abc.xyz> wrote:
[color=blue]
>How can I centralize all page elements with CSS? Like the equivalent of
>wrapping the body in <center>..</center>?[/color]

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

re: [CSS] Centralizing

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

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

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

re: [CSS] Centralizing

Michael Carvin wrote:
[color=blue]
> like on my site (http://bigorangesign.com/)[/color]

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.

re: [CSS] Centralizing

"Neal" <neal413@yahoo.com> wrote in message
news:opsi6rf4sw6v6656@news.individual.net...[color=blue]
> On Sat, 18 Dec 2004 04:08:44 +0000, Cool Guy <coolguy@abc.xyz> wrote:
>[color=green]
>> How can I centralize all page elements with CSS? Like the equivalent of
>> wrapping the body in <center>..</center>?[/color]
>
>
> text-align: center
>
> Read any CSS tutorial, it will reveal wonders.[/color]

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.

re: [CSS] Centralizing

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

re: [CSS] Centralizing

Michael Carvin wrote:[color=blue]
> First, it does work. It has a horizontal scrollbar on 8x6 and under
> because the site is designed for windows larger than that.[/color]

In other words, it doesn't work.

re: [CSS] Centralizing

Michael Carvin wrote:
[color=blue]
> 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?).[/color]

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

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

re: [CSS] Centralizing

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.

re: [CSS] Centralizing

Michael Carvin wrote:
[color=blue]
> 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.[/color]

Please accept my humblest apologies for the critique.
[color=blue]
> First, it does work.[/color]

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?
[color=blue]
> 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.[/color]

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
[color=blue]
> 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.[/color]

Ok.
[color=blue]
> Next time I need a crit, I'll be sure contact you.[/color]

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.

re: [CSS] Centralizing

in comp.infosystems.www.authoring.html, Spartanicus wrote:[color=blue]
> Cool Guy <coolguy@abc.xyz> wrote:[/color]
[color=blue]
> There is no drop in css replacement for the html center element because
> css treats inline and block level content differently.[/color]

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>

re: [CSS] Centralizing

Michael Carvin <michael.carvin@gmail.com> wrote:
[color=blue]
> 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/)[/color]

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

Thanks for the replies.

re: [CSS] Centralizing

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

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.

re: [CSS] Centralizing

Michael Carvin wrote:
[color=blue]
> html, body {
> width: 800px; /* insert your width there */[/color]

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)

re: [CSS] Centralizing

Michael Carvin wrote:[color=blue]
> 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.[/color]

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)

re: [CSS] Centralizing

C A Upsdell wrote:
[color=blue]
> "Neal" wrote[color=green]
>> Cool Guy wrote:
>>[color=darkred]
>>> How can I centralize all page elements with CSS? Like the equivalent
>>> of
>>> wrapping the body in <center>..</center>?[/color]
>>
>>
>> text-align: center
>>
>> Read any CSS tutorial, it will reveal wonders.[/color]
>
> 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.[/color]

Yes, I was too brief.

re: [CSS] Centralizing

in comp.infosystems.www.authoring.html, C A Upsdell wrote:[color=blue]
> "Neal" <neal413@yahoo.com> wrote in message
> news:opsi6rf4sw6v6656@news.individual.net...[color=green]
> > On Sat, 18 Dec 2004 04:08:44 +0000, Cool Guy <coolguy@abc.xyz> wrote:
> >[color=darkred]
> >> How can I centralize all page elements with CSS?[/color][/color][/color]

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.
[color=blue][color=green][color=darkred]
> >> Like the equivalent of
> >> wrapping the body in <center>..</center>?[/color]
> >
> > text-align: center
> >
> > Read any CSS tutorial, it will reveal wonders.[/color][/color]
[color=blue]
> 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.[/color]

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>