Results 1 to 10 of 10

center tag

This is a discussion on center tag within the Template Modifications forums, part of the vBulletin SEO Discussion category; What is the correct way to center something? example: Code: <center> <strong> | <font face="arial" color="red"> Administrator </font> | </strong> ...

  1. #1
    Senior Member
    Real Name
    Matt
    Join Date
    May 2006
    Posts
    973
    Liked
    4 times

    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?

  2. #2
    Senior Member briansol's Avatar
    Real Name
    Brian
    Join Date
    Apr 2006
    Location
    Central CT, USA
    Posts
    6,981
    Liked
    8 times
    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

  3. #3
    Senior Member
    Real Name
    Matt
    Join Date
    May 2006
    Posts
    973
    Liked
    4 times
    I'll give the above a go, looks like i'm going to need to learn css after all lol

  4. #4
    Senior Member briansol's Avatar
    Real Name
    Brian
    Join Date
    Apr 2006
    Location
    Central CT, USA
    Posts
    6,981
    Liked
    8 times
    css is more important than (x)HTML

  5. #5
    eJM
    eJM is offline
    Senior Member eJM's Avatar
    Real Name
    Jim McClain
    Join Date
    May 2006
    Location
    teh Ether
    Posts
    311
    Liked
    2 times
    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
    Last edited by eJM; 08-14-2007 at 06:34 AM.

  6. #6
    Senior Member
    Real Name
    Matt
    Join Date
    May 2006
    Posts
    973
    Liked
    4 times
    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?

  7. #7
    eJM
    eJM is offline
    Senior Member eJM's Avatar
    Real Name
    Jim McClain
    Join Date
    May 2006
    Location
    teh Ether
    Posts
    311
    Liked
    2 times
    Quote Originally Posted by hornstar6969 View Post
    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

  8. #8
    Senior Member briansol's Avatar
    Real Name
    Brian
    Join Date
    Apr 2006
    Location
    Central CT, USA
    Posts
    6,981
    Liked
    8 times
    Quote Originally Posted by eJM View Post
    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;

  9. #9
    Senior Member
    Real Name
    Matt
    Join Date
    May 2006
    Posts
    973
    Liked
    4 times
    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.

  10. #10
    eJM
    eJM is offline
    Senior Member eJM's Avatar
    Real Name
    Jim McClain
    Join Date
    May 2006
    Location
    teh Ether
    Posts
    311
    Liked
    2 times
    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

Similar Threads

  1. Google To Add "Unavailable After" META Tag
    By Eros in forum General Discussion
    Replies: 4
    Last Post: 09-09-2007, 09:44 PM
  2. Keep getting this error from google
    By glorify in forum Troubleshooting
    Replies: 3
    Last Post: 03-25-2006, 11:55 PM
  3. Google Sitemaps are reporting an error
    By Lerris in forum Troubleshooting
    Replies: 3
    Last Post: 03-20-2006, 05:11 PM
  4. Australian Media Center Community
    By guvner in forum Analysis: Traffic & SERPS
    Replies: 2
    Last Post: 02-16-2006, 08:27 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •