Computer Help and Spyware Removal Computer Help and Spyware Removal Computer Help and Spyware Removal Computer Help Forums Windows Startup Programs Database Spyware and Malware Removal Guides Computer Tutorials Uninstall Database File Database Computer Glossary Computer Resources
 

Welcome Guest ( Log In | Click here to Register a free account now! )



Register a free account to unlock additional features at BleepingComputer.com
Welcome to Bleeping Computer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.


Important Announcement: We have two terrific contests running on the site that I wanted all our members and guests to know about.

The first contest is the HP Magic Giveaway, which is underway as of November 28th. More information can be found at this topic, which will be updated very soon with further information.

The second contests, is for the chance to win two Seagate FreeAgent external hard drives. More information about this contest can be found here.

These are both amazing contests and I suggest everyone submit an entry for them.

- BleepingComputer Management
 
Reply to this topicStart new topic
> How To Make A Tableless 3 Column List Using Xhtml/css
nosnhoj#3
post Jun 20 2006, 10:10 AM
Post #1


Forum Regular
***

Group: Members
Posts: 245
Joined: 27-May 05
From: 127.0.0.1
Member No.: 21,516
How to make a Tableless 3 Column List using XHTML/CSS



Guide Overview

The purpose of this guide is to show how a tableless 3 column ordered or unordered list can be achieved utilizing XHTML and CSS. The following example uses no tables and validates according to W3C standards. As is, this model is compatible with all modern browsers. Because it is a pure list, it also degrades organically, making it a totally accesible and search engine friendly method of listing content.

Instructions
  1. Open up Notepad or your preferred text editor.

  2. Copy and Paste the following code into your text editor of choice.


    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Tableless Three Column List</title>
    <style type="text/css">
    <!--
    body {
    margin:100px 0px;
    padding:0px;
    text-align:center;
    }

    #container {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:0;
    border:1px solid #000;
    background-color:#eee;
    }

    li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
    margin-left: 0;
    }

    li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
    margin-left: 13em;
    }

    li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
    margin-left: 25em;
    }

    #listyles {
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    }

    a:link {
    color: #06f;
    text-decoration: none;
    }

    a:hover {
    color:#f00;
    text-decoration:underline;
    }

    li.col2a, li.col3a {
    margin-top: -7.5em;
    }

    #listyles li {
    line-height: 1.5em;
    }

    --    >
    </style>
    </head>
    <body>

    <div id="container">
    <ul id="listyles">
    <li class="col1a"><a href="#">LinkHere</a></li>
    <li class="col1b"><a href="#">LinkHere</a></li>
    <li class="col1c"><a href="#">LinkHere</a></li>
    <li class="col1d"><a href="#">LinkHere</a></li>
    <li class="col1e"><a href="#">LinkHere</a></li>
    <li class="col2a"><a href="#">LinkHere</a></li>
    <li class="col2b"><a href="#">LinkHere</a></li>
    <li class="col2c"><a href="#">LinkHere</a></li>
    <li class="col2d"><a href="#">LinkHere</a></li>
    <li class="col2e"><a href="#">LinkHere</a></li>
    <li class="col3a"><a href="#">LinkHere</a></li>
    <li class="col3b"><a href="#">LinkHere</a></li>
    <li class="col3c"><a href="#">LinkHere</a></li>
    <li class="col3d"><a href="#">LinkHere</a></li>
    <li class="col3e"><a href="#">LinkHere</a></li>
    </ul>
    </div>
    </body>
    </html>


  3. Click File ---> Save as...
    In Notepad, change the Save as type to All Files. Give your file a name with the extension .html and save it to the directory of your choice.

  4. Now, open the new .html file in your browser to see how it looks.
Breaking down the CSS

/* Optional Styles, used for presentation */
body {
margin: 100px 0px;
padding: 0px;
text-align: center;
}

#content {
width: 500px;
margin: 0px auto;
text-align: left;
padding: 0;
border: 1px solid #000;
background-color: #eee;
}

a:link {
color: #06f;
text-decoration: none;
}

a:hover {
color:#f00;
text-decoration:underline;
}
/* End Optional Styles, used for presentation */

/* Essential Styles */

li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
margin-left: 0; /* Column 1 horizontal positoning. Adjust as needed. */
}

li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
margin-left: 13em; /* Column 2 horizontal positioning. Adjust as needed. */
}

li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
margin-left: 25em; /* Column 3 horizontal positioning. Adjust as needed. */
}

#listyles {
display: block; /* Needed to make lists behave. */
padding: 0;
margin: 0; /* Set body margin and padding to get browsers consistency. */
width: 100%; /* Set to 100% to let the columns determin positioning */
list-style-type: none;
}

/* Column's 2 and 3 are given negative top margins by taking the number of list items * line-height, this example has 5 list items per column, and a line height of 1.5em: 5 * 1.5= 7.5(add negative margin) = -7.5em. */
li.col2a, li.col3a {
margin-top: -7.5em;
}

#listyles li {
line-height: 1.5em; /* This not only spaces the list items, but is is used in the calculation for li.col2a, li.col3a heights. */
}
  1. This list will need to be contained inside of another element such as the one used in this example. So, with that said, the overall width of the list will be controlled by the container it is placed in.

  2. The horizontal positions of each column are easily adjustable by dividing the columns into thirds, or how ever you see fit. In this example, column 1 is set to "0", column 2 at 13em and column 3 at 25em. You may want to actually insert your content before positioning for good, because you will surely want to make the content look as uniform as possible, and you may have an entry that is longer than the other list items.

  3. All the list items horizontal positions are stated using shorthand, and for best results no other styles should be added to the three shorthand declarations with the margin-left: 0; margin-left: 13em; margin-left: 25;sytles respectively.

  4. Probobly the most important aspect of this list working is the correct calculation of "negative top margin". If incorrectly, a rather unattractive result will occur. So this doesn't happen, we need to understand what makes this happen in the CSS. It starts with the CSS element labled #listyles. We have declared it a "block" element, and stated that there is no margin or padding, with a width of 100%. This places the list in the top left position.

  5. Now we look at the CSS element named #listyles li. This is where the "line-height" is declared, giving the list better readability, as well as providing the critical "height" we need to calculate negatice margin.

  6. It is important to also have an even amount of items in each column, because the number of items in each row is the second part of what determines negative margin. In this example, there are 3 columns of 5 items. We know our line height is 1.5em. Now, multiply the number of items, by the line-height. (5 x 1.5= 7.5em). This will be a style declaration of "negative top-margin", and it will apply to the first list item in rows 2 and 3 li.col2a, li.col3a .


This post has been edited by nosnhoj#3: Jun 20 2006, 01:18 PM


--------------------
When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.
Go to the top of the page
 
+Quote Post
« Next Oldest · Programming and Web Design Mini-Guides · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 4th December 2008 - 04:23 PM


Advertise   |   About Us   |   Terms of Use   |   Privacy Policy   |   Contact Us   |   Site Map   |   Chat   |   Tutorials   |   Uninstall List
Discussion Forums   |   The Computer Glossary   |   Resources   |   RSS Feeds   |   Startups   |   The File Database   |   Malware Removal Guides

© 2003-2008 All Rights Reserved Bleeping Computer LLC.

Powered By IP.Board © 2008  IPS, Inc.