Support » Everything else WordPress » Will someone help me convert a table to CSS?

  • Here’s my code, and I’ve been working on it for hours, but haven’t been able to make the buttons inline. So I made a table. If someone could help me please help me convert this to CSS, I would really appreciate it.

    <style type=”text/css”>
    <!–
    .style5 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
    –>
    </style>
    </head>

    <body>
    <table width=”700″ border=”0″ cellspacing=”1″ cellpadding=”5″>
    <tr bgcolor=”#000000″>
    <td height=”25″><div align=”right”><span class=”style5″>item one </span></div></td>
    <td height=”25″><div align=”right”><span class=”style5″>item two </span></div></td>
    <td height=”25″><div align=”right”><span class=”style5″>item three </span></div></td>
    <td height=”25″><div align=”right”><span class=”style5″>item four </span></div></td>
    <td height=”25″><div align=”right”><span class=”style5″>item five </span></div></td>
    <td height=”25″><div align=”right”><span class=”style5″>item six </span></div></td>
    </tr>
    </table>
    </body>

Viewing 3 replies - 1 through 3 (of 3 total)
  • Try using the unordered list to build your menu, which is what many of the CSS-savvy folks are doing these days. There’s plenty of documentation around, but here’s one good place to start: http://css.maxdesign.com.au/listamatic/

    Yeah, I looked at this, and tried the list, but I’m still having trouble with it.

    An unordered list is the way to go:

    HTML:

    <ul id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    </ul>

    The CSS will depend on what you’re trying to do. Unfortunately, because of your code, I cannot tell if you’re trying to have each item side-by-side with the next, or if it’s an actual list, with one item below another (you have the table width set at 700px, but the TD widths aren’t mentioned – but your have the heights set at 25px. However, the lack of TR’s makes me thinnk it’s a typo, and you do want them all in a horizontal row…so I’m going to go with that!)

    CSS:

    ul#list {
    display:block;
    width:700px;
    list-style-type:none;
    }

    ul#list li {
    display:block;
    float:left;
    width:116px;
    color:#FFF;}

    There’s your basics. Hope it helps!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Will someone help me convert a table to CSS?’ is closed to new replies.