Images
Image Alignment & Drop Shadows
When you put an image into your post, this is the sort of thing that you will see…
The image just sits there on the left.
Let’s move it…..
We need to create the CSS to center the image.
Actually, it will center anything, not just images.
From your login, go to Options, and edit ’style.css’
Paste this into your css file;
div.cent {
text-align: center;
}
I know it says ‘text-align’ but it works with pictures too. Now, when you post something that you want to be centred, you write it like this;
<div class=”cent”>
Everything here will be centred
</div>
For this next part, you are going to need some code and images.
This is already done - by Laughing Lizard - and you will need to go to his site, get the code, and follow all the instructions there (they are brief and easy!) before you can do the rest of this page.
Go to the Weblog Tools Collection.
The code you have just got will enable you to have images like the above on your weblog.
If the image ‘breaks through’ your entry box, then you will need to add this code to your css;
div.clearer {
clear: left;
line-height: 0;
height: 0;
}
and then when you enter your last image - not at the end of your text - put this;
<div class=”clearer”> </div>
That image above was produced by the entry into WP identical to that below;
<div class=”img-shadow”><img src=”habicase.jpg” alt=”" /></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt …….
Note the gap ! There is a carriage return between the </div> and the start of the text. If this is not there, your entered text will be in bold text.
3. On the right with text wrap
You need to copy and alter the css that Laughing Lizard wrote now.
This is part of his original CSS:
.img-shadow {
clear: both;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
In your ’style.css’, copy that, then paste it again into your css file. Yes, you do have a doubling up, but only for a moment.
Now alter the pasted code by making the following changes which I have highlighted in bold. (Or you could just copy this code below 
)
.img-shadow1 {
clear: both;
float:right;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}.img-shadow1 img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
And the entry in WP that produced that screenshot above was this;
<div class=”img-shadow1″><img src=”ducks.jpg” alt=”" /></div><div class=”clearer”> </div>
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation …
Again, note the carriage return and where the <div class=”clearer”> </div> goes.
Note also that if you use your new ‘Quicktag’, that the image will always be left-aligned. If you want it right aligned, you can still use the Quicktag, but be sure to put the ‘1′ in as in the above example.
The CSS, as mentioned, is the work of Laughing Lizard. Many thanks to him for allowing his work to appear here.
The clearer div has been taken from Complex Spiral. I recommend that you read the article here on containing-floats. I have permission from the author of that page - Eric Meyer - for the quoting and use of his code.
