Centering a horizontal tabbed menu

Discussion in 'CSS' started by tarahmarie, Mar 1, 2009.

  1. #1
    Hi, all:

    I'm somewhat new at CSS, and am trying to center the title menu of this page:

    http://www.redqueentech.com/

    Here's the CSS for it: http://www.redqueentech.com/css/threecolumn.css

    I'm not sure what to do or where to do it; I've successfully centered text, columns, and images, but the menu is being recalcitrant. I'm not sure which piece of the css needs to be altered, or whether using auto margins or block displays is the best way to go about this. Anyone else know?

    Thanks!
     
    tarahmarie, Mar 1, 2009 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    First, you absolutely must fix your markup errors.

    This part, especially is causing problems; remove everything in red:
    <body>
    <div style="font-family: Times New Roman,Times,serif; " id="header">
    <IMG class="displayed" src="images/header_logo.png" alt="Red Queen Header Logo">
    [color=red]<ul>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>menu.php</title>
    </head>
    <body>[/color]
    [color=red]<div class="menu" style="margin-bottom:-15px; z-index:1">[/color]
    <ul>
    <li><a style="font-family: Times New Roman,Times,serif;" class="hide" href="../index.php">HOME<span></span></a>
    [color=red]<!--[if lte IE 6]>
    </td></tr></table>
    </a>
    <![endif]-->[/color]
    </li>
    <li><a class="hide" href="../events.php">EVENTS</a>...
    Code (markup):
    Here, simplified, is what you need;
    ul {
      margin: 0;
      padding: 0;
      text-align: center;
      }
    
    li {
      display: inline;
      }
    ============
    <ul>
      <li>...</li>
      ...
    </ul>
    Code (markup):
    Do not float or make block. You may add left/right margin/padding to li/a. Apply top/bottom margin/padding only to ul.

    Do not use conditional comments without compelling reason; there aren't all that many compelling reasons.

    cheers,

    gary
     
    kk5st, Mar 2, 2009 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    why does one level of menu account for 2 lines?
     
    unigogo, Mar 3, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    What do you mean? Two lines of HTML, or two groups of CSS?
     
    Stomme poes, Mar 3, 2009 IP
  5. dickieknee

    dickieknee Active Member

    Messages:
    441
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    80
    #5
    one good reason to use a CMS, you normally do not encounter these types of errors...look for a simple CMS such as Wordpress and redo the site with the same content
     
    dickieknee, Mar 4, 2009 IP