Help - Search - Members - Calendar
Full Version: List or Table formatting
Forums > Resource Center > Webmasters' Corner
barrykins
May 11 2010, 01:03 PM
Its a novice question, I know; However, I can't seem to find a way to format it. I've tried list, forms, and tables.
Could you please help with this. I'm pretty sure its simple.

Click to view attachment

Im using tables to do this right now but i would like to use list. All the formatting is done in CSS so any method would have to be XHTML 1.0 transitional compilable.
Suggestions?

Used code now.
CODE
<div class="footer_column">

<table border="0">
<caption>TITLE</caption>
<tr>
<th><h3>ADDRESS</h3></th>
<td><h4><p>3319 Shore Drive <br /> Virginia Beach, VA 23451</p></h4></td>
</tr>

<tr>
<th><h3 align="left">EMAIL</h3></th>
<td><h4><a href="mailto:gail@lesnerinn.com">GAIL@LESNERINN.COM</a></h4></td>
</tr>

<tr>
<th><h3 align="left">TELE</h3></th>
<td><h4>757.202.1443</h4></td>
</tr>

<tr>
<th><h3 align="left">FAX</h3></th>
<td><h4>757.202.1443</h4></td>
</tr>
</table>
</div><!--End quick contact-->
mipadi
May 11 2010, 02:06 PM
I tweaked this a bit to use lists instead of tables. I use a dictionary list (<dl>) for the contact info, and an unordered list (<ul>) for the affiliates. The raw HTML file is available here, but I'll copy-paste the source code here, too:

CODE
<!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>
    <title>List Formatting</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        a, dt { color: rgb(92,124,135); }
        a:link, a:visited { text-decoration: none; }
        a:hover, a:active { text-decoration: underline; }
        body { background-color: black;
               color: white;
               font-family: 'Century Gothic', sans-serif;
               position: relative;
               width: 530px; }
        h1 { font-size: 12px;
             font-weight: normal;
             letter-spacing: 4px;
             text-transform: uppercase; }
        dl, ul { font-size: 10px;
                 letter-spacing: 1px;
                 text-transform: uppercase; }
        #events { width: 275px; }
        #events dt { float: left;
                     width: 6em; }
        #events dd { margin-left: 6em; }
        #affiliates { left: 257px;
                      position: absolute;
                      top: 0;
                      width: 255px; }
        #affiliates h1 { margin-top: 0; }
        #affiliates ul { list-style-type: none;
                         margin-left: 0;
                         padding-left: 0; }
    </style>
</head>

<body>
    <div id="events">
        <h1>Coastal Events</h1>
        <dl>
            <dt>Address</dt>
            <dd>
                3319 Shore Drive<br/>
                Virginia Beach, VA 23451
            </dd>
            <dt>Email</dt>
            <dd>gail@lesnerinn.com</dd>
            <dt>Tele</dt>
            <dd>757.202.1443</dd>
            <dt>Fax</dt>
            <dd>757.202.1467</dd>
        </dl>
    </div>
    
    <div id="affiliates">
        <h1>Affiliates</h1>
        <ul>
            <li><a href="http://www.example.com/">Lessner Inn</a></li>
            <li><a href="http://www.example.com/">Bubba’s Marina</a></li>
            <li><a href="http://www.example.com/">Shellfish Company</a></li>
        </ul>
    </div>
</body>

</html>


I took some guesses at your style, so the CSS might not be exactly correct, but you can fix what isn't right (fonts, colors, etc.).
barrykins
May 11 2010, 09:34 PM
I thought of that when I was skimming though Eric Meyer's book, I just didnt think it would line up. I greatly appreciate it.

And the css was pretty close to perfect that I was using.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.