to center using CSS... a bit weird?

[Summercool]

in

http://www.0011.com/test_size3.html

to center the logo "HTML 4.01 check" button at the bottom of the page,
I used

<div style="width: 10px; margin: 0px auto">

</div>

to wrap around that button....

if using HTML, i would have used <center>

However, I know the 10px above is wrong... I could use 60px or
100px... which is closer to the size of that image there.... however,
does that mean I need to know exactly what width that image is to
properly center it?

because while in HTML, I just need to use <centerand forget about
it... how come CSS requires knowing the size... so if Peter comes in
and change to a different image, and he didn't know about changing the
width for the CSS style, then it is not properly centered?

[Safalra (Stephen Morley)]

On Sun, 28 Oct 2007 04:28:50 -0700, Summercool wrote:

in

http://www.0011.com/test_size3.html

to center the logo "HTML 4.01 check" button at the bottom of the page,
I used

<div style="width: 10px; margin: 0px auto">

</div>

to wrap around that button....

if using HTML, i would have used <center>

You *are* using HTML, it's just that <centeris long deprecated as
presentation should be specified through CSS.

However, I know the 10px above is wrong... I could use 60px or
100px... which is closer to the size of that image there.... however,
does that mean I need to know exactly what width that image is to
properly center it?

CSS has the 'text-align' property, which actually applies to all inline
content of an element. You just need something of the following form,
replacing the ellipses with the relevant attributes:
<div style="text-align:center;">
<a ...><img ...></a>
</div>
--
Safalra (Stephen Morley)

The 'white-space' Property In CSS:
http://www.safalra.com/web-design/cs...pace-property/

[Summercool]

On Oct 28, 5:13 am, "Safalra (Stephen Morley)" <[e-mail]>
wrote:

>
CSS has the 'text-align' property, which actually applies to all inline
content of an element. You just need something of the following form,
replacing the ellipses with the relevant attributes:

<div style="text-align:center;">
<a ...><img ...></a>
</div>

that's nice... how about to center a textbox... inside the textbox
the text should be left-justified.
in that case, then use <div style="width: 100px; margin: 0 auto" ?

so... to center text and img, use "text-align:center"
to center a div, use fixed width and auto left and right margin...

any more case to consider besides text/img vs div? i wonder why this
disparity... wasn't it somewhat more elegant using <center?

[Safalra (Stephen Morley)]

On Sun, 28 Oct 2007 06:45:15 -0700, Summercool wrote:

[snip centring things]
so... to center text and img, use "text-align:center"
to center a div, use fixed width and auto left and right margin...

any more case to consider besides text/img vs div? i wonder why this
disparity... wasn't it somewhat more elegant using <center?

No - mixing content and presentation is decidedly inelegant. Of course
you're still doing that by using the style attribute, but the next step is
to move on to external stylesheets and leave your HTML pure and semantic.
On that topic, and to answer your other question, tables don't need a width
to be centred - the following code in a stylesheet will centre all tables:
table{
margin:0 auto;
}
--
Safalra (Stephen Morley)

The 'white-space' Property In CSS:
http://www.safalra.com/web-design/cs...pace-property/

[Beauregard T. Shagnasty]

Summercool wrote:

wasn't it somewhat more elegant using <center?

<centeris presentational. All 'presentation' should be in CSS now.

Let's say you have old pages with <centersprinkled throughout. If you
decide later that looks amateurish (it does), you would have to prowl
through all the markup removing those tags, <center... </center>

With CSS, and _one_ text-align: center; in the CSS, you can change to
left-justify for your entire site simply by removing that _one_ line
from the CSS. (for a simple site... but you get the idea. <g>)

--
-bts
-Motorcycles defy gravity; cars just suck

[Summercool]

On Oct 28, 7:57 am, "Beauregard T. Shagnasty"
<[e-mail]:

Summercool wrote:

wasn't it somewhat more elegant using <center?

<centeris presentational. All 'presentation' should be in CSS now.

Let's say you have old pages with <centersprinkled throughout. If you
decide later that looks amateurish (it does), you would have to prowl
through all the markup removing those tags, <center... </center>

With CSS, and _one_ text-align: center; in the CSS, you can change to
left-justify for your entire site simply by removing that _one_ line
from the CSS. (for a simple site... but you get the idea. <g>)

that's nice... i get the idea.
now how about... the <div style="clear: both"</div after
floating items (div's)

doesn't that line have to be integrated with the content? any other
method that you don't have to mix it with content?

[cf]

let it be known on Sun, 28 Oct 2007 04:28:50 -0700
Summercool <Su************@gmail.comscribed:

|in
|
| http://www.0011.com/test_size3.html
|
|to center the logo "HTML 4.01 check" button at the bottom of the page,
|I used
|
|<div style="width: 10px; margin: 0px auto">
|
|</div>
|
|to wrap around that button....
|
|if using HTML, i would have used <center>
|
|However, I know the 10px above is wrong... I could use 60px or
|100px... which is closer to the size of that image there.... however,
|does that mean I need to know exactly what width that image is to
|properly center it?
|
|because while in HTML, I just need to use <centerand forget about
|it... how come CSS requires knowing the size... so if Peter comes in
|and change to a different image, and he didn't know about changing the
|width for the CSS style, then it is not properly centered?
|

If you have Firefox installed (you should anyway to check you pages/site) you should download and install the Firebug add-in.

IMHO I think it's very good at showing what the different elements are when you hover over them in the tree and it highlights that element in the page (you'll have to install it to understand, sorry). It helped me understand where the margins and paddings are added to the overall div and so on.

<http://www.mozilla.com/en-US/>
<https://addons.mozilla.org/en-US/firefox/>

hth
--
cf <cf****@NOcharterSPAM.net>
I may be dumb, but I'm not stupid.
Terry Bradshaw

[Summercool]

On Oct 28, 11:36 pm, Summercool <[e-mail]:

On Oct 28, 7:57 am, "Beauregard T. Shagnasty"

<[e-mail]:

Summercool wrote:

wasn't it somewhat more elegant using <center?

<centeris presentational. All 'presentation' should be in CSS now.

Let's say you have old pages with <centersprinkled throughout. If you
decide later that looks amateurish (it does), you would have to prowl
through all the markup removing those tags, <center... </center>

With CSS, and _one_ text-align: center; in the CSS, you can change to
left-justify for your entire site simply by removing that _one_ line
from the CSS. (for a simple site... but you get the idea. <g>)

that's nice... i get the idea.
now how about... the <div style="clear: both"</div after
floating items (div's)

doesn't that line have to be integrated with the content? any other
method that you don't have to mix it with content?

by the way, isn't the <b and <br also somewhat "presentational"
too? how come those can pass the Strict...

[dorayme]

In article
<11**********************@q5g2000prf.googlegroups. com>,
Summercool <Su************@gmail.comwrote:

(some talk about <center>...)

by the way, isn't the <b and <br also somewhat "presentational"
too? how come those can pass the Strict...

The idea about center is that it can be done in css well. I have
heard arguments to and fro about <band semantics and I have no
clear picture. But about <br>, this seems to me to have some
meaning, it is not mere style in a poem that one line ends and
another begins, it is part of the poem that cannot be done away
with; it is not as if there could as easily be alternatives. So
perhaps <brhas an informational content, a meaning in some
contexts.

--
dorayme

[Beauregard T. Shagnasty]

dorayme wrote:

Summercool <Su************@gmail.comwrote:

(some talk about <center>...)

>by the way, isn't the <b and <br also somewhat "presentational"
too? how come those can pass the Strict...

I stopped using <ba long time ago, preferring <strong>.

The idea about center is that it can be done in css well. I have
heard arguments to and fro about <band semantics and I have no
clear picture. But about <br>, this seems to me to have some
meaning, it is not mere style in a poem that one line ends and
another begins, it is part of the poem that cannot be done away
with; it is not as if there could as easily be alternatives. So
perhaps <brhas an informational content, a meaning in some
contexts.

I do little poetry, but <brworks well with it. Or .. use a styled
<preelement.

<pre class="poetry">
There once was a man from Nantucket<br>
....
</pre>

<bralso makes perfect sense in an <address>.

--
-bts
-Motorcycles defy gravity; cars just suck

[transformer]

On Oct 28, 4:28 am, Summercool <[e-mail]:

in

http://www.0011.com/test_size3.html

to center the logo "HTML 4.01 check" button at the bottom of the page,
I used

<div style="width: 10px; margin: 0px auto">

</div>

to wrap around that button....

if using HTML, i would have used <center>

However, I know the 10px above is wrong... I could use 60px or
100px... which is closer to the size of that image there.... however,
does that mean I need to know exactly what width that image is to
properly center it?

because while in HTML, I just need to use <centerand forget about
it... how come CSS requires knowing the size... so if Peter comes in
and change to a different image, and he didn't know about changing the
width for the CSS style, then it is not properly centered?

Drop the width, display the image as a block level element and the
image will center. i.e.
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}
HTH
Bill

[Bergamot]

transformer wrote:

>
html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}

Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg

[transformer]

On Oct 29, 9:34 pm, Bergamot <[e-mail]:

transformer wrote:

html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}

Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg

Berg,
text-align: center doesn't do it. In FF and Opera and IE, the image
will display flush left in the containing div. To get the img centered
in those browsers, both of the other rules are needed. There may be
another way to do it then thw display: block, margin: auto, but text-
align: center by itself isn't it.

If I declare a width the size of the image on the containing div, then
I can set the margin to auto and it will be centered in ff, opera and
IE6 & 7 (didn't test it on others); text-align: center can be added to
center the img in IE5.5.

But, I understood the original questioner (summercool?) to be asking
how to do this without knowing the width for the image, so that's what
I came up with
Bill

[Ben C]

On 2007-10-30, transformer <sm****************@gmail.comwrote:

On Oct 29, 9:34 pm, Bergamot <[e-mail]:

>transformer wrote:

html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}

Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg

Berg,
text-align: center doesn't do it.

No you need to set text-align: center on the _container_ not on the img
itself. Setting it on the img itself is meaningless as it is a replaced
element and doesn't itself contain any text.

In FF and Opera and IE, the image
will display flush left in the containing div. To get the img centered
in those browsers, both of the other rules are needed.

But not text-align: center. You're centering the img as a block (which
works fine), Bergamot is centering it as an inline.

[transformer]

On Oct 30, 1:17 am, Ben C <[e-mail]:

On 2007-10-30, transformer <[e-mail]:

On Oct 29, 9:34 pm, Bergamot <[e-mail]:

transformer wrote:

html:
<div id="valid"><img src="whereverUhaveIt"></div>
css:
#valid img {
display: block;
margin: 0 auto;
text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/
}

Actually, you can drop display:block and margin:auto.
text-align:center should do all by itself.

--
Berg

Berg,
text-align: center doesn't do it.

No you need to set text-align: center on the _container_ not on the img
itself. Setting it on the img itself is meaningless as it is a replaced
element and doesn't itself contain any text.

In FF and Opera and IE, the image
will display flush left in the containing div. To get the img centered
in those browsers, both of the other rules are needed.

But not text-align: center. You're centering the img as a block (which
works fine), Bergamot is centering it as an inline.

Ben C, Berg and all,
You're right; I stand corrected. I thought I had run thru all the
combinations of settings on the container AND the image, but must have
gotten confused in my own tests :-). So centering text-align: center
on the containing div does center the img in all browsers after all!

I apologize if my error confused anyone on the list.
Bill