Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: not2easy

Message Too Old, No Replies

List using icon images above the text

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

New User

5+ Year Member

joined:Jan 29, 2007
posts: 40
votes: 0


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 June 4, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


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 June 4, 2008 (gmt 0)

New User

5+ Year Member

joined:Jan 29, 2007
posts: 40
votes: 0


Thanks! I'll give these a try!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members