4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

HTML Help

by gbaggs2
3 replies
  • WEB DESIGN
    • |
I'm making a list on one of my web pages but I don't want it to be a mile long. Ideally I would like to make it into 3 columns so it looks more professional, but don't know if I'll have the room. Could someone show me the HTML code to make 2 and 3 columns?

I only know the basics so please do me a huge favor and break it down to me like you are dealing with a 5 year old. Thanks
#html
  • Profile picture of the author layouts4you
    well this all depends on how you want to do the list. you can make the list in tables or in divs.

    contact me on skype at jasonaud or yahoo at jasonaud2804 and ill help you out.
    {{ DiscussionBoard.errors[2329483].message }}
  • Profile picture of the author IMAlchemist
    There are a few ways to tackle this, it depends if you are using tables (generally you shouldn't) or building your site with CSS and xhtml

    it could look like something like this:

    <div class="list">
    <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    </ul>
    </div>
    <div class="list">
    <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    </ul>
    </div>
    the class can also be applied to the <ul> tag like this and the "main" is styled according to your website layout:

    <div id="main">
    <ul class="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    </ul>
    <ul class="list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    </ul>
    </div>
    Your css for the examples MAY look like this:

    #main {
    width: 440px;
    }

    .list {
    float: left;
    margin: 10px;
    width: 200px;
    }
    It would really depend on how you wanted the lists to appear, and then of course there is the styling of the <li> tags themselves.

    I would recommend if you are doing this yourself to go to the WC3 tutorial pages, or look at the CSS of a site you like to see how they did it, BUT DO NOT COPY their CSS.

    Hope this helps

    Terry
    {{ DiscussionBoard.errors[2329898].message }}
  • Profile picture of the author alenshowbrizz
    Its very easy to work man, Nothings for do much for that , You juat have to do only section of text with <div> tags.

    <table>
    <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
    </tr>
    <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
    </tr>
    </table>
    {{ DiscussionBoard.errors[2340044].message }}

Trending Topics