Welcome to WebmasterWorld Guest from 54.167.175.107

Forum Moderators: not2easy

List using icon images above the text

   
6:23 pm on Jun 4, 2008 (gmt 0)

5+ Year Member



Hello, CSS experts! I'm newer to using only CSS for my layouts (old tables guy who's recently gotten back into coding CSS) and I could use some help.

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.

7:49 pm on Jun 4, 2008 (gmt 0)

5+ Year Member



If you want the icons to be links then you could do

<!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>

8:13 pm on Jun 4, 2008 (gmt 0)

5+ Year Member



Thanks! I'll give these a try!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month