Howto: Floating images and Drop Caps
I looked through the HTML code and I discovered there is a class called 'pull-left'. Using a div tag, with class="pull-left" or "pull-right" the image aligns to the top of the paragraph, and either to the left or the right.
As you can see in this page, I have put a float on the top left and on the top right. Note that you can also do some neat trickery - like in this post, by putting the image for the too damn high guy first, but with class="pull-right", it will be loaded as the preview image, while the drop-cap image on the left will appear first on the page visually.
Code Snippet
The snip below is the code from the first paragraph of this post>:
I have used it in my signature now also, here is the code from that part:
<sub>Loki was born in Australia, now is wandering Amsterdam again after 9 months in Sofia, Bulgaria. IT generalist, physics theorist, futurist and cyber-agorist. Loki's life mission is to establish a secure, distributed layer atop the internet, and enable space migration, preferably while living in a beautiful mountain house somewhere with a good woman, and lots of farm animals and gardens, where he can also go hunting and camping.</sub>
We can't stop here! This is Whale country!
Loki was born in Australia, now is wandering Amsterdam again after 9 months in Sofia, Bulgaria. IT generalist, physics theorist, futurist and cyber-agorist. Loki's life mission is to establish a secure, distributed layer atop the internet, and enable space migration, preferably while living in a beautiful mountain house somewhere with a good woman, and lots of farm animals and gardens, where he can also go hunting and camping.
I'm a thoughtocaster, a conundrummer in a band called Life Puzzler. I've flipped more lids than a monkey in a soup kitchen, of the mind. - Xavier, Renegade Angel
All images in the above post are either original from me, or taken from Google Image Search, filtered for the right of reuse and modification, and either hotlinked directly, or altered by me
Uploaded images hosted at postimg.org
yes, good find :)
I have been using those for a while on my posts.... It was introduced 2 month or so ago here: https://steemit.com/steemit/@steemitblog/new-advanced-formatting-features
Pretty cool..but a bit too technical. Can you simplify further? Unpack and define terms?
I will add a section with some example code
Nice find l0k1, thanks for sharing!
This post has been linked to from another place on Steem.
Learn more about and upvote to support linkback bot v0.5. Flag this comment if you don't want the bot to continue posting linkbacks for your posts.
Built by @ontofractal
Looking for a way to resize images for steemit using tags, html or css so I don't have to alter the original image.
html works for some things, but I can't seem to figure out how to set image size. I've tried setting width / height using style attributes on div, img blocks with no luck.
There are posts about setting image size but their approach is to create a new image resizes from the original. That's quite a lot of work when it shouldn't be necessary.
My biggest frustration with steemit is this dang markdown editor. I sure hope the next version is much better!