List or Table formatting, XHTML Transitional 1.0 |
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
- Topic must be titled to reflect the question you are asking.
- Topic must include a screenshot or url AND any coding used.
- No questions about any type of ad removal.
 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. 
listhelp.jpg ( 34.14K )
Number of downloads: 11Im 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
|
|
|
|
 |
Replies
|
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.). |
|
|
|
Posts in this topic
barrykins List or Table formatting May 11 2010, 01:03 PM
barrykins I thought of that when I was skimming though Eric ... May 11 2010, 09:34 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: