post-page

Image alignment & Drop shadows

9
responses
by
 
on
April 12th, 2004
in
Weblog Add-Ons, WordPress Hack

Mark posted a while back (link) a quicktags improvement that included the ability to have drop shadows around your image.
Visit that link to get the code and follow the instructions for adapting your current setup.

I’ve adapted it so that the image can now be left or right aligned with text wrapping, and I’m assuming that you have added the CSS from that link to your ‘wp-layout.css’.

Add the following to your wp-layout.css;

.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;
}

div.clearer {
clear: left;
line-height: 0;
height: 0;
}

The instruction <div class=”img-shadow”> will produce a left aligned image.

The instruction <div class=”img-shadow1″> will produce a right aligned image.

While the Quicktag will insert the top of those 2 codes, it will not produce the second. You will have to add the ‘1’ manually.

A couple of points;
– You must have a carriage return after the closing </div> and before your text. If you do not, your text will be in bold This will not unduly affect your text wrap.
– If when you view your entry, the image has ‘broken through’ and is affecting the entry below it, you will need to use the clearer div. This needs to go after the last image in your post, but before any text that follows it. An example:

You post a picture, with text, and the image breaks through. You need to alter your post to insert the clearer:
<div class="img-shadow1"><img src="ducks.jpg" alt="" /></div><div class="clearer">&nbsp;</div>
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation …

Information on this is also at www.tamba2.org.uk/graphicalcss

heading
heading
9
Responses

 

Comments

  1. Matt (1 comments.) says:

    Hi. Good info. However I can’t seem to get the clearer tag to work properly. If you have al ook at my site you’ll see a pic plunging south into the post below it. I’ve got the tags correctly entered in the CSS as well, so I”m not sure what the issue is. Any ideas?

  2. indi (2 comments.) says:

    Is it possible to center a drop-shadowed image?

  3. Craig (19 comments.) says:

    That is a damn fine page, Podz. I will be dumping my version and referring the link to your page. It’s sweet! Excellent job.

  4. Podz says:

    Don’t do that Craig !

    You have information on your page which I have not covered, and may not in the end cover, so I think it’s more useful that the pages compliment each other, that way a wider range of WP users can be catered for.

    And anyway, I linked to you :smile:

  5. It would be nice if it could be integrated with buttons and all. :idea:

  6. Amie Stilo (2 comments.) says:

    Thanks for the image alignment ideas. It is difficult for me, I am only new to all this.



Trackbacks/Pingbacks

  1. […] e. Récupération des Quicktags en question. Faire exactement ce qui est indiqué. Ajouter d’autres modifications pour avoir l’alignement à […]

Obviously Powered by WordPress. © 2003-2013

page counter
css.php