close

Subscriptions

  • None
mr-helpful

Last seen: 2 weeks ago

helpful is a 99 year old person from England, UK

Is there something about Stumble blogs you'd like help with - or think others would like to know? I can't fix bugs, broken toolbars, marriage problems - those you need to take to the Help & Bugs forums!
More superb help facilities here, and here *** Please note that I am not here very often and probably can't answer individual questions, but if I see the same question being asked a lot, I may create a new entry to cover it. ***

  • Created Oct 07 2007 •

      Here is an advanced layout tip - it allows you to align text to the right (or left) of an image, add some spacing between text and image, and add a border to the image - all in one go.

    This tip comes with a disclaimer: the code used here is not formally approved by SU and thus not supported. It may be affected by future page layout changes.

    This is the vital bit of code:

      style="border: solid 1px white; float: left; margin-right: 1em; padding: 0 0 0 0;"

    You add it to the code for an image post, like this:

      <img style="border: solid 1px black; float: left; margin-right: 4em; padding: 0 0 0 0;" src="http://www.stumbleupon.com/mediumpics/189774.jpg" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam

    and this is the result:


    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.






    There are four elements to the code:

    style="border: solid 1px black; float: left; margin-right: 2em; padding: 0 0 0 0;"

    1. border - this controls the color, style and thickness of the border that is added to the image
    2. float - this controls whether the image is aligned to the left or right of the associated text (note that the "associated text" comes after the image code
    3. margin - controls the padding space between the image and the text - margin-right if the image is to the left of the text, margin-left if to the right of the text
    4. padding - this overrides a vital bit of the standard layout code (which is needed if you *don't* do employ this fancy layout trick :)


    You can vary the code to get different results:

      <img style="border: solid 1px red; float: right; margin-left: 4em; padding: 0 0 0 0;" src="http://www.stumbleupon.com/mediumpics/189774.jpg" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.








      <img style="border: double 1px gold; float: right; margin-left: 1em margin-right: 5em; padding: 0 0 0 0;" src="http://www.stumbleupon.com/mediumpics/189774.jpg" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. This example adds some padding to the right of the image - between the image and the sidebar



    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. This example adds some padding to the right of the image - between the image and the sidebar