Please help me fix my icons css

vijetha · 08-13-2010, 10:09 AM

I want to add 3 icons at the headr of my page . so i created a class and named it as
.icone_hold and then i added the images on it one after that other and linked them accordingly.Is it the right way to achieve this ?

Hers the Live Demo Of the page :

Here's the css :

Code:

 .icons_hold{
	float: right;
	height: 55px;
	width: 200px;
	position: relative;
	top: 10px;
	right: 10px;
}

Here's the Mark Up

Code:

<div id="header">
    <div class="icons_hold"><a href="#"><img src="images/home.png" title="home" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/help.png" title="help" /></a>&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/sign_out.png" title="signe out" /></a></div>
  
  </div>

met · 08-13-2010, 11:26 AM

this is fine, but lacks any expansion without amending the css and positioning

personally i'd use an unordered list and style each LI to match the dimensions of the icons

that way you can just add extra ones if required and the UL will just expand to as needed.

Of course if you don't plan on having any more than 3, then you don't ~need~ to change the layout.

you have used blank spaces to separate them, which i'd not recommend

I've used something like this before to create a vertical menu made up of images:

Code:

ul#blocks {
	list-style-type:none;
	padding:0;
	margin:0 auto;
	overflow:auto;
	width: 200px;
}

ul#blocks li {
	width:200px;
	float:left;
	height:125px;
	margin-bottom:15px;
}


ul#blocks li.contact { background:url(images/contact.png) no-repeat; }
ul#blocks li.information { background:url(images/info.png) no-repeat; }
ul#blocks li.blog { background:url(images/blog.png) no-repeat; }
ul#blocks li:hover { background-position:0px -125px;}

<!-- markup -->
        <ul id="blocks">
          <li class="information"> </li>
          <li class="blog"></li>
          <li class="contact"></li>
        </ul>

you can then add content if required, or leave textual links in place aiding with accessibilty etc.

neither way is right or wrong but the CSS i have provided is more "semantically" correct in my eyes.