Hi guys,
I’d be very interested in knowing how this user http://themeforest.net/user/multifour managed to align his social icons in a straight line like that. I’m not sure why, but on our items/profile page, anything we try (including his code) turns out looking like this:
Any clues on how to get rid of the extra spaces?
nobody at all?
I think the user @multifour is using some inline stylings to get that right. You are getting some inherited margins and spacing that might be causing the icons to fall down. just try to use a bit of CSS and HTML and you should get things right.
If only it were that easy… I tried this:
still no go. Not sure what else to do. Tried display: inline-block too. still no good.
Help?! Anybody?
Try this:
<p><img src="http://multifour.com/sources/follow_title.png" alt="Follow us on" /><a href="http://dribbble.com/multifour" rel="nofollow"><img src="http://multifour.com/sources/follow_dribbble.png" alt="Dribbble" /></a><a href="https://twitter.com/multifourdesign" rel="nofollow"><img src="http://multifour.com/sources/follow_twitter.png" alt="Twitter" /></a><a href="https://www.facebook.com/multifourdesign" rel="nofollow"><img src="http://multifour.com/sources/follow_fb.png" alt="Facebook" /></a><a href="https://www.behance.net/multifour" rel="nofollow"><img src="http://multifour.com/sources/follow_behance.png" alt="Behance" /></a></p>
Tip: Don’t let spaces or press enter at the end of each line every time.
Nope still doesn’t work. You probably copied his work but inline styles are stripped by Envato. Still no go.
Mostly i use this kind of code on my portfolio:
<img src="http://multifour.com/sources/follow_title.png" style="border-style: none"><a href="http://dribbble.com/multifour"><img src="http://multifour.com/sources/follow_dribbble.png" style="border-style: none"></a><a href="https://twitter.com/multifourdesign"><img src="http://multifour.com/sources/follow_twitter.png" style="border-style: none"></a><a href="https://www.facebook.com/multifourdesign"><img src="http://multifour.com/sources/follow_fb.png" style="border-style: none"></a><a href="https://www.behance.net/multifour"><img src="http://multifour.com/sources/follow_behance.png" style="border-style: none"></a>
I test it before, it works 100%. Try it!
Thanks for the input,b ut still not good. Any other tips guys?
I think something do wrong. As i told you i use this kind of code on my portfolio.
I test this code i send you before at my envato profile, just to see the result and i had all images in 1 line.
Now, about “border-style: none”, i use this because for some reason (as i remember i had the issue on internet explorer) in some browsers envato profile shown with border. I don’t know if was a bug, from then i use it until today without problems.
Sorry, but i can’t help you more…
Hmm, I definitely did something wrong. Not sure what, but now it’s fixed that I try again. You’re awesome, thanks so much!
Update - in my greed of having stuff aligned pretty like I do with my code, I pressed enter between images. That’s the probl.
Special thanks @odiusfly
No problem!!! : -)
Yes as i told you above, no spaces, enter, but ok… all good now, cool!