WordPress.org

Ready to get started?Download WordPress

Forums

Will someone help me convert a table to CSS? (4 posts)

  1. taylorishere
    Member
    Posted 8 years ago #

    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>

  2. jdbanks
    Member
    Posted 8 years ago #

    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/

  3. taylorishere
    Member
    Posted 8 years ago #

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

  4. Doodlebee
    Member
    Posted 8 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.