Wibble

Posts Tagged ‘Images’

if like me you have grabbed a non standard theme you may not have the code to make this work in the theme, after a brief trial with nested tables i realized this was just not going to work, time to get with the new format and do it using a style sheet.

After a bit of Google-ing around I discovered that I needed to add an images section this to my style.css

/* Begin Images */

p img {
        padding: 0;
        max-width: 100%;
        }

/*      Using ‘class=”alignright”‘ on an image will (who would’ve
        thought?!) align the image to the right. And using ‘class=”centered’,
        will of course center the image. This is much better than using
        align=”center”, being much more futureproof (and valid) */

img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

img.alignright {
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
        }

img.alignleft {
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
        }

.alignright {
        float: right;
        }

.alignleft {
        float: left
        }

/* End Images */

I got this code from the classic style sheet, now i can insert an image and use the syntax

<img class=”alignleft” title=”text here” src=”http://www.wibble.net.nz/wp-content/uploads/2009/05/imagename.png” alt=”text here”/>

And my image will wrap around ether left, right or centered, one trick also to remember is if you want to get the test to start after the image you can insert an empty tag like this

<div style=”clear:both;”></div>

however the editor will keep on deleting this ..