Log In · Register

 

Help Topic Rules and Requirements

For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Staff Member of the Month | Hosts Looking for Hostees | Hostees looking for Hosts | BigBookofResources

Submission Guidelines

 
 Reply to this topicStart new topic
List or Table formatting, XHTML Transitional 1.0
barrykins
post May 11 2010, 01:03 PM
Post #1


Senior Member
***

Group: Member
Posts: 73
Joined: Dec 2009
Member No: 754,485
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.

Attached File  listhelp.jpg ( 34.14K ) Number of downloads: 11


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-->


This post has been edited by Cristy: May 11 2010, 01:09 PM
Reason for edit: Use codebox tags for long codes, please. - Cristy
 
mipadi
post May 11 2010, 02:06 PM
Post #2


Senior Member
******

Group: Administrator
Posts: 2,648
Joined: Apr 2008
Member No: 639,265
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
post May 11 2010, 09:34 PM
Post #3


Senior Member
***

Group: Member
Posts: 73
Joined: Dec 2009
Member No: 754,485
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.
 
« Next Oldest · Webmasters' Corner · 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