Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Thumbs up Please help me fix my icons css

    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>

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •