center tag

What is the correct way to center something?

example:

Code:

<center>
<strong>
| <font face="arial" color="red">
Administrator
</font> |
</strong>

<strong>
<font face="arial" color="#00FF00">
Super Moderator
</font> |
</strong>

<strong>
<font face="arial" color="magenta">
Princess Smod
</font> |
</strong>

<strong>
<font face="arial" color="blue">
Moderator
</font> |
</strong>

<strong>
<font face="arial" color="magenta">
Princess Mod
</font> |
</strong>

<strong>
<font face="arial" color="#EE9A00">
Premium/+
</font> |
</strong>

<strong>
<font face="arial" color="#EE9A00">
Underground
</font> |
</strong>

<strong>
<font face="arial" color="black">
Reg+
</font> |
</strong>

<strong>
<font face="arial" color="#003366">
Registered
</font> |
</strong>

<strong>
<font face="arial" color="purple">
Banned
</font> |
</strong>
</center>

What should I change to make this xhtml valid?

both center and font are deprciated.

i'd do something like this:

Code:

<div id="groupings">
<ul>
<li class="first">Admin</li>
<li>Mod</li>
. . . . 
<li>Banned</li>

</ul>
</div>

and put this in your css:

Code:

#groupings {
font: 1em bold arial, sans-serif;
text-align: center;
margin: 0 auto 0 auto;

#groupings ul { 
list-style: none;
margin: 0; padding: 0;
}

#groupings ul li {
display: inline;
border-right: 1px solid #333;
padding: .5em 1em .5em 1em;
margin: 0;
}

#groupings ul li.first {
border-left: 1px solid #333;
}

that will get your general look and feel together.

for the colors of the words, id every li

like,

Code:

<li id="admin" class="first">Admin</li>
<li id="mod">Mod</li>

and then style your stuff...

Code:

li#admin {
color: #f00;
}
li#mod {
color: #333;
}

all untested and written on the fly, so there might be some errors

I'll give the above a go, looks like i'm going to need to learn css after all lol

css is more important than (x)HTML

Code:

margin:0 auto;
padding: .5em 1em;

is the same as:

Code:

margin: 0 auto 0 auto;
padding: .5em 1em .5em 1em;

...only less code.

Jim

eJM just so I don't mess things up, how would you recommend I do the css for the center in the code box I posted?

Originally Posted by hornstar6969

eJM just so I don't mess things up, how would you recommend I do the css for the center in the code box I posted?

Brian provided you with some excellent guidance. The problem any of us face with your request is that you left so much out of it. Undoubtedly there is some code surrounding that list, like a table structure or DIVs, but you left that out. And we don't know what the context of the list is. We also don't know what your DOCTYPE is (HTML Strict or Transitional, or XHTML Strict or Transitional). It's possible the 4 most common types could pass validation with 4 different coding schemes.

I guess all I can offer that Brian didn't is that you can center it all in-line by adding styling to the table or DIV tags:

Code:

<table style="text-align:center;margin:0 auto;">
  <tr>
    <td>data goes here</td>
  </tr>
</table>

or...

Code:

<div style="text-align:center;margin:0 auto;">data goes here</div>

The center tags are just part of your problems though. You also have a lot of font tags to deal with. You can also do that with in-line CSS, but Brian gave you the best advice in using separate CSS files and valid code for lists.

Jim

Originally Posted by eJM

Code:

margin:0 auto;
padding: .5em 1em;

is the same as:

Code:

margin: 0 auto 0 auto;
padding: .5em 1em .5em 1em;

...only less code.

Jim

For the record, i put it like that so that he could change the values if necessary without (hopefully) getting too lost on the shorthand.


off topic, but i've found margin: 0 auto; to be buggy and nearly ALWAYS do it the long way with margin 0 auto 0 auto;

Thanks guys, I will see how it goes when I get home tonight

ps. that is all the code there is that I posted in the code box, because it is a phrase that I edited.

What is the code in the template surrounding the phrase (<code>$vbphrase[phrase_name]<code>)? It is in that code that you need to use in-line style, not in the phrase itself. Copy the code, including any beginning <table> and ending </table> tags into a code box here so we can have a look.

Jim