Forum Moderators: not2easy
I have a design a client has given me that has 8 86x86 icons that will go across the top of the page in the header. Below each images should be the text that describes the section to be clicked.
In the old days I would slap in a table, with each cell having the icon image, a break tag, and the text link, centered in the cell.
I now see the importance of using valid XHTML and CSS to do this. I cannot for the life of me find any examples on the 'Net, or devise one myself.
So, does anyone have any code they could share to help? I "believe" I'd use a unordered list, which each list item being the icon and text.
Please help! Anything would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
li {width:85px;float:left;text-align:center;}
</style>
</head>
<body>
<ul>
<li><a href="#"><img src="icon1.png"><br>link1</a></li>
<li><a href="#"><img src="icon2.png"><br>link2</a></li>
<li><a href="#"><img src="icon3.png"><br>link3</a></li>
</ul>
</body>
</html>
#################
If you dont want then clickable and ignored by text aural then
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
li {width:85px; height:20px;float:left;padding-top:85px;text-align:center;}
#link1 { background: url(icon1.png) top no-repeat;}
#link2{ background: url(icon2.png) top no-repeat;}
#link3 { background: url(icon3.png) top no-repeat;}
</style>
</head>
<body>
<ul>
<li id="link1"><a href="#">link1</a></li>
<li id="link2"><a href="#">link2</a></li>
<li id="link3"><a href="#">link2</a></li>
</ul>
</body>
</html>
########################
or maybe you want the images for aural but still not clickable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
li {width:85px;float:left;text-align:center;}
</style>
</head>
<body>
<ul>
<li><img src="icon1.png"><a href="#">link1</a></li>
<li><img src="icon2.png"><a href="#">link2</a></li>
<li><img src="icon3.png"><a href="#">link3</a></li>
</ul>
</body>
</html>
