 - Last login: 4 days agoMr-helpful
- helpful is a 80 year old from England, UK.
- Likes 79 pages, 8 photos • 3,128 fans • Received 669 reviews
- Member since Sep 24, 2004
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. ***
Favorites » Their Blog
-
-
 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;"
- border - this controls the color, style and thickness of the border that is added to the image
- 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
- 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
- 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
|
Add them as a friend >
