homepage Welcome to WebmasterWorld Guest from 54.166.84.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
List using icon images above the text
gnetcon

5+ Year Member



 
Msg#: 3666906 posted 6:23 pm on Jun 4, 2008 (gmt 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.

 

appi2

5+ Year Member



 
Msg#: 3666906 posted 7:49 pm on Jun 4, 2008 (gmt 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>

gnetcon

5+ Year Member



 
Msg#: 3666906 posted 8:13 pm on Jun 4, 2008 (gmt 0)

Thanks! I'll give these a try!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved