CSS will not center

[alice]

Can someone tell me why, or for that matter how it's even possible,
that text placed between this span with this class would not be
centered?

..heading {
font: small-caps normal 18px Georgia, "Times New Roman", Times,
serif;
text-transform: uppercase;
text-decoration: underline;
padding: 8px;
background: #232323;
text-align: center;
clear: both;
margin-right: auto;
margin-left: auto; }

All the other attributes are working, like the font and background.
What am I doing wrong? I've tried adding the inline style="text-
align:center" and that will not do anything either. I've tried it
without the left and right auto margins as well.

 

[Benjamin Sattler]

Hi!

I guess you will have to make this span a block-level element. span
is an inline element. If you do then you should also specify a
width as otherwise the element streches across the whole screen
(the width of its parent container-element, respectively):

display:block;
width:100px;

Alternatively you may drop the "display" rule and just replace span
with a div element, which works the same way like span except it
already is a block level element.

bye

 

[Jukka K. Korpela]

Scripsit alice:

Can someone tell me why, or for that matter how it's even possible,
that text placed between this span with this class would not be
centered?

The text-align property applies to block elements only. You could set
display: block, but...

.heading {

.... since you really seem to have a heading, please read a good book on web
design, in order to get cured from SPANitis and DIVitis. When you then use
proper markup, such as <h1>...</h1> for the main heading, the problem
vanishes in a puff of logic (as a side effect, since h1 is block level by
default).

font: small-caps normal 18px Georgia, "Times New Roman", Times,
serif;

Did you know that browsers don't really use small-caps? They just fake it by
changing font size, making typographers aggravated.

The good book on web design will tell you why px is a wrong unit for
font-size. Use something like font-size: 140% instead.

text-transform: uppercase;

Did you know that all-uppercase text is less readable and often ignored as
SHOUTING?

text-decoration: underline;

The good book will tell you why should not underline anything that is not a
link.

background: #232323;

What happens when the text color is #232323? Hint: It could be. You are
apparently not doing anything to prevent that.

margin-right: auto;
margin-left: auto; }

Horizontal margins have no effect on non-replaced inline elements, by CSS
specs.

All the other attributes are working,

They are not attributes, and they mostly "work" for some odd values for
"work" only.

What am I doing wrong?

To be honest, in this case, pretty much everything*). But it's curable.
There are many good books on web design. Hanging around in Usenet groups may
help a little, too.

*) However, the problem you regard as problem is easily fixable, as
mentioned. It's actually one of the _small_ problems.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Sat, 21 Jul 2007 20:12:08 GMT
Benjamin Sattler scribed:

Hi!

I guess you will have to make this span a block-level element. span
is an inline element. If you do then you should also specify a
width as otherwise the element streches across the whole screen
(the width of its parent container-element, respectively):

display:block;
width:100px;

Alternatively you may drop the "display" rule and just replace span
with a div element, which works the same way like span except it
already is a block level element.

bye

Nice x-face, Benny. But are you really as smart as you look? Top-posting
suggests a contrary answer.

 

[Benjamin Sattler]

Well bust mah britches and call me cheeky, on Sat, 21 Jul 2007
20:12:08 GMT Benjamin Sattler scribed:

Nice x-face, Benny. But are you really as smart as you look?
Top-posting suggests a contrary answer.

hrmpf... I will try and do better... Definitely

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Sun, 22 Jul 2007 09:55:19 GMT
Benjamin Sattler scribed:

hrmpf... I will try and do better... Definitely

Sorry, I'm just a natural-born smart-ass. Too old to change now. (But
Duende is the _official_ group geezer.)

 

[Duende]

On 22 Jul 2007 Neredbojias wrote in alt.html

Well bust mah britches and call me cheeky, on Sun, 22 Jul 2007 09:55:19
GMT Benjamin Sattler scribed:


Sorry, I'm just a natural-born smart-ass. Too old to change now. (But
Duende is the _official_ group geezer.)

More like wheezer.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Sun, 22 Jul 2007 18:19:17 GMT
Duende scribed:

More like wheezer.

Breathing problems? Ah, am there, doin' that. Azma, emfizzeema, cope, you
name it. I got more inhalers than topless dancers have g-strings.
'Course, there _is_ a bright side. "What is it?" says you. "Well, let me
tell ya," says I. Provides a good excuse for those pesky feelings of self-
recrimination. Lack of oxygen to the brain and all that...

What happened to Puddin' Pete? Didn't set right with you? (Nyuk, nyuk.)

Btw, did you see that new Australian TSA stamp? -A philatelist's dream.

http://tinyurl.com/yuyzdr

....Heard they're gonna issue a whole series. Just can't wait to collect
'em.

 

[Yorkshire Pete]

On 22 Jul 2007 Neredbojias wrote in alt.html

What happened to Puddin' Pete? Didn't set right with you? (Nyuk, nyuk.)

Btw, did you see that new Australian TSA stamp? -A philatelist's dream.

http://tinyurl.com/yuyzdr

How cool, brucie on a stamp.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Mon, 23 Jul 2007 17:58:42
GMT Yorkshire Pete scribed:

On 22 Jul 2007 Neredbojias wrote in alt.html


How cool, brucie on a stamp.

Brucie? Nah, think more schizophrenic.

 

[alice]

To be honest, in this case, pretty much everything*). But it's curable.
There are many good books on web design. Hanging around in Usenet groups may
help a little, too.

Actually, there are reason that most of the code is the way it is,
including the underlining, so really I was not doing pretty much
everything wrong. Thanks for trying though.