381 posts Simple is the new black.
  • Weekly Top Seller
  • Elite Author
  • Author Level 7
  • 5 Years of Membership
+5 more
PaulWinslow
says

I was just wondering how people get those buttons (follow, twitter, more items, etc.) to float next to each other in their profile/item descriptions?

As far as I’m aware there’s only a few HTML tags you can use in these text fields so it’s something I’ve always wondered.

Cheers! :)

757 posts
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 9
+9 more
theAlThemist
says

Firebug > Right Mouse Button > Inspect ellement ;)

381 posts Simple is the new black.
  • Weekly Top Seller
  • Elite Author
  • Author Level 7
  • 5 Years of Membership
+5 more
PaulWinslow
says

Obviously that’s the first thing I did, mate, but all I see is the markup. Anchor and image tags. HTML doesn’t style itself – so how are they floated?

Cheers.

757 posts
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 9
+9 more
theAlThemist
says

...so how are they floated?

They are not! May be a closer look? :) Most of the authors use images with the exact width. And some of them use “separator” image between two buttons.

1799 posts
  • Affiliate Level 1
  • Author Level 4
  • Beta Tester
  • Collector Level 2
+4 more
BroOf
says

I think the author wrapped the images in a tags which are normally displayed “inline”. If they aren’t too width thy will displayed side by side.

63 posts
  • 4 Years of Membership
  • Author Level 7
  • Bundle Boss
  • Collector Level 1
+5 more
DMThemes
says
Yeah, CSS isn’t allowed, but images are inline elements and this is how we did it on our profile page:
<img /> &nbsp;&nbsp;&nbsp; <img /> <br /><br />
<img /> &nbsp;&nbsp;&nbsp; <img />

So just insert few non-breaking spaces, or you can use create your images widths to fit like a puzlle and avoid nonbreaking spaces :)

RocketshipThemes
RocketshipThemes Recent Posts Threads Started
360 posts
  • Author Level 5
  • Featured Item
  • 5 Years of Membership
  • United Kingdom
+3 more
RocketshipThemes
says

This is how I floated three images/links side by side on mine. I just didn’t separate each new image/link with a new line

<a href="http://www.twitter.com/martin870"><img src="http://www.mushindesign.co.uk/marketing/twitter.png" /></a><a href="http://themeforest.net/user/MushinDesign/follow"><img src="http://www.mushindesign.co.uk/marketing/envato.png" /></a><a href="http://ThemeForest.net/feeds/users/MushinDesign.atom"><img src="http://www.mushindesign.co.uk/marketing/rss.png" /></a>
381 posts Simple is the new black.
  • Weekly Top Seller
  • Elite Author
  • Author Level 7
  • 5 Years of Membership
+5 more
PaulWinslow
says

Cheers for your help, guys. :)

562 posts You Reap What You Saw
  • Weekly Top Seller
  • Elite Author
  • Author Level 7
  • 5 Years of Membership
+4 more
Bluz
says
2280 posts
  • Top Monthly Author
  • Weekly Top Seller
  • Community Superstar
  • Industrious API Inventor
+15 more
revaxarts
says

You can use tables for layouts as well (remember the 90’s!?)

Or use my Envatitor as a little helper ;)

Sorry for the promotion

by
by
by
by
by
by