Defintion list to the rescue.
Gawd, it's been ages since I said that
<div id="thumbnailheaders">
<dl>
<dt>Free Applications</dt>
<dd class="imageholder"><img...></dd>
<dd>defining text</dd>
</dl>
<dl>
<dt>Cost estimate</dt>
<dd class="imageholder"><img...></dd>
<dd>defining text</dd>
</dl>
<dl>
<dt>main link text</dt>
<dd class="imageholder"><img...></dd>
<dd>defining text</dd>
</dl>
</div>
CSS:
A img {border:none;}/*get rid of the border on a linked image */
Dl {width: 200px; float:left; margin:0 10px /*something to separate them*/}
Dt, dd {float:right; width:100px;}
dd.imageholder {float:left;}
This is very rough, but can give you an idea on how to use semantic markup
and achieve the positioning you desire.
Ted
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Bruce Gilbert
Sent: Wednesday, August 03, 2005 4:03 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] how should I mark this up ? (thumbnail links)
I have a test site set up at
http://www.wealthdevelopmentmortgage.com/test/test_file.htm
and part of it I am struggling as the best way to code it. That would
be the thumbnail images links you see around the middle of the page
(free applications, cost estimate, one on one).
right now I have a container div and individual divs to separate the images.
My first problem is I want to get rid of the border around the images,
since they are links.
my second problem is I need the link txt to line up to the top right
of the images and have some more text below it which explains what the
link is.
This is probably no simple, but any suggestions are appreciated.
--
::Bruce::
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
