Hi,

 

I have contact details that I need to display on a page... the image is below..

 

http://www.freeimagehosting.net/uploads/d185847e03.jpg

 

What would be the easiest (and least code) way to achieve this? It looks pretty straightforward to look at, but if you try it, it then does not seem so!!

 

I was hoping to achieve it with the least amount of XHTML and CSS, but its baffled me!

<h2>Contact Us</h2>
<strong>You can contact us in a number of ways</strong>
<dl>
<dt>By email:</dt><dd>someplace@somewhere.co.uk</dd>
<dt>By phone:</dt><dd>0800 3456070</dd>
<dt>By post:</dt><dd>Address line 1,<br />Address line 2,<br />blah blah blah...</dd>
</dl>

 

as far as css you'll just need to add some basic colours etc to fairly self explanatory selectors above - if you're not sure what the selectors are then google them - that info will be easy to find.

By far the easiest way is just to insert an image - you already have it - just change the details (I assume it won't change very often so you probably only need to make the image once).

 

I was also considering a list like this:-

http://www.wickham43.com/forumposts/flav090822.html

 

It does have a lot of classes because your font styles are all different, even the font-family (the a is different in the heading). I used b instead of strong for the second sentence because it's only for visual effect, it doesn't need "empahasis" as something important.

 

Otherwise, a table probably wouldn't be any more code, like this:-

http://www.wickham43.com/forumposts/flav090822table.html

<h2>Contact Us</h2>
<strong>You can contact us in a number of ways</strong>
<dl>
<dt>By email:</dt><dd>someplace@somewhere.co.uk</dd>
<dt>By phone:</dt><dd>0800 3456070</dd>
<dt>By post:</dt><dd>Address line 1,<br />Address line 2,<br />blah blah blah...</dd>
</dl>

 

as far as css you'll just need to add some basic colours etc to fairly self explanatory selectors above - if you're not sure what the selectors are then google them - that info will be easy to find.

 

Thanks for the replies, what are <dt> and <dd> tags used for primarily, and how do they differ to <ul> <li> etc..?

dl = definition list

dt = term

dd = definition

 

Computers can analyse these lists by selecting all the terms and separating them from their relevant definitions, for statistical purposes.

 

Like analysing goals, penalties, yellow cards, red cards (terms) from the actual numbers for various teams under dd tags.

dl = definition list

dt = term

dd = definition

 

Computers can analyse these lists by selecting all the terms and separating them from their relevant definitions, for statistical purposes.

 

Like analysing goals, penalties, yellow cards, red cards (terms) from the actual numbers for various teams under dd tags.

 

Can dl dt etc be used in this kind of situation? Is it a proper way of doing it?

Aaaaand if we're getting all semantic, shouldn't the <address> tag pop up here somewhere too?

 

http://www.w3schools.com/TAGS/tag_address.asp

Address tag? I thought someone might say that. The address tag normally has a simple address inside with lines broken with <br> tags but this address needs two columns.

 

I found it messy to include all of it in an address tag; I tried p tags or a list inside the address tag with float: left to create two columns but the validator said that these elements were not allowed inside the address tag, so I ended up using span tags with floats (which makes them into block items):-

 

http://www.wickham43.com/forumposts/flav090822address3.html

but it's too messy.

 

Eventually I used my first try with the definition list and just put the four-line postal address in an address tag:-

http://www.wickham43.com/forumposts/flav090822address1.html

 

The address tag is italic by default so that had to be changed. Add to that all the different font styles and sizes and the code is still a bit messy, but at least it is semantically correct in that it codes it as an address (for the benefit of screen readers or other analysis?) rather than plain text.

 

An image with the whole address still seems to be the simplest way to include it.