Posted by: 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.
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-->
Posted by: 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 http://mipadi.cbstaff.com/html/list.html, 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.).
Posted by: 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.