0

I'm totally new into HTML and CSS and I want to arrange four icons in a horizontal row, now it's vertical…

/Users/ws-017/Desktop/Bildschirmfoto 2015-08-28 um 14.17.07.png

HTML Code:

<img src="img/artwrk.png" alt="ARTWRK" height="250" width="250">
    <header style="text-align:center"> 
        <a href="https://soundcloud.com/iamartwrk/" target="new" title="Soundcloud"> 
            <img class="socialicon" src="img/soundcloud.png" height="50" width="50"> 
        </a>
        <a href="https://www.facebook.com/iamartwrk/"target="new" title="Facebook"> 
            <img class="socialicon" src="img/facebook.png" height="50" width="50"> 
        </a> 
        <a href="https://twitter.com/iamartwrk/" target="new" title="Twitter"> 
            <img class="socialicon" src="img/twitter.png" height="50" width="50">
        </a> 
        <a href="https://instagram.com/iamartwrk/" target="new" title="Instagram"> 
            <img class="socialicon" src="img/instagram.png" height="50" width="50"> 
        </a>
    </header> 
0

3 Answers 3

3

use this css header a{display:inline-block; width:60px;}

http://jsfiddle.net/ygay1scd/

17
  • now they're arranged as a block and not in a row, and they have a black frame haha Aug 28, 2015 at 12:38
  • I just deleted some other CSS and now it works haha, can you tell me how to set the same distance between all the icons? Aug 28, 2015 at 12:44
  • Give them a width e.g 40px Aug 28, 2015 at 12:46
  • can i ask one more question? :) Aug 28, 2015 at 12:54
  • What is it. Depends ;) Aug 28, 2015 at 12:55
0

you can use this: a{float:left; width:20px}

0

If you are going to use a table or would consider to use a table to output. Here in my own case, when I was designing an email template for the company I'm working with, this is how I align the Social Media icon with this code:

<table width="20" align="right" border="0" cellpadding="0" cellspacing="5">
    <tr>
        <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
            <a href="http://www.facebook.com/" style="color: #ffffff;">
            <img src="img/facebook.png" alt="Facebook" width="25" height="25" style="display: inline-block;" border="0" />
            </a>
        </td>                                       
        <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
            <a href="http://www.twitter.com/" style="color: #ffffff;">
            <img src="img/twitter.png" alt="Twitter" width="25" height="25" style="display: inline-block;" border="0" />
            </a>
        </td>
        <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
            <a href="http://www.linkedin.com/" style="color: #ffffff;">
            <img src="img/linkedin.png" alt="LinkedIn" width="25" height="25" style="display: inline-block;" border="0" />
            </a>
        </td>
    </tr>
</table>

Hope this helps?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.