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 6 of 6

Thread: Aligning icons

  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Aligning icons

    Hi, I am trying to put links next to each other inside a <div> but using icons as the links.

    So i'm looking to put YouTube, Facebook, Amazon etc but I want them next to each other. So far I have:

    Code:
    <div class="iconlinks">
    <ul>
    <li><a href=".............">...........</a></li>
    <li><a href=".............">...........</a></li>
    <li><a href=".............">...........</a></li>
    <li><a href=".............">...........</a></li>
    <li><a href=".............">...........</a></li>
    <li><a href=".............">...........</a></li>
    </ul>
    </div>
    a basic layout.

    I need help with the CSS if anyone could be so kind.


  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Well, the appropriate CSS would be to float the list items left: .iconlinks li {float: left;}, maybe in conjunction with a right margin. However, if it’s just icons I would just put them as plain (image) links and they will align horizontally by default.

    Code:
    <div class="icons">
      <a href=""><img src="…" alt="Amazon" /></a>
      <a href=""><img src="…" alt="Facebook" /></a>
      <a href=""><img src="…" alt="Twitter" /></a>
      …
      …
    </div>

  • Users who have thanked VIPStephan for this post:

    LearningCoder (01-15-2011)

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Thank you done it now. Quite basic stuff really!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello LearningCoder,
    You see a lot of sprite images for this. Like this one -


    See example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 1000px;
    	margin: 30px auto;
    	padding: 50px 0 300px;
    	background: #999;
    }
    ul#iconlinks {
    	padding: 0;
        list-style-type: none;
    	overflow: auto;
    	background: #fff;
    }
    #iconlinks li {
        display: block;
        overflow: hidden;
        float: left;
        margin-right: 2px;
    }
    #iconlinks li a{
    	height: 140px;
    	width: 140px;
    	display: block;
    }
    				a#twitter {background: url(http://www.fhoke.com/blog/wp-content/uploads/2009/02/social-icons.png) 315px 315px;}
    				a#facebook {background: url(http://www.fhoke.com/blog/wp-content/uploads/2009/02/social-icons.png) 2px 315px;}
    
    </style>
    </head>
    <body>
        <div id="container">
            <ul id="iconlinks">
                <li><a href="#" id="twitter"></a></li>
                <li><a href="#" id="facebook"></a></li>
                <li><a href="#">...........</a></li>
                <li><a href="#">...........</a></li>
                <li><a href="#">...........</a></li>
                <li><a href="#">...........</a></li>
            </ul>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Ah they're pretty cool, that's what I had in mind when I thought about putting the icons on my page. I've decided to just do each individual icon though becase I want my background behind them. Cheers though, i'll save that.

    BTW - The url that is in the code for the 'a#facebook' doesn't work.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by LearningCoder View Post
    BTW - The url that is in the code for the 'a#facebook' doesn't work.
    There is no url there. Only a # for a placeholder.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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