I need help with some CSS styling. I've tried various options with Firebug and cannot sort this out. How can I style the thumbnails on my posts (eg url: http://thatcriticguy.com/index.php?post/4/crossover-9-revamped-reinvented-and-a-must-have) and not style all images in the post at the same time. I have numerous posts on this site and need to only style the ones that are thumbnails that float right.
Is there a way 开发者_开发技巧to do this without modifying the template code just using CSS?
There's no way using pure CSS, because the thumbnails don't have an identifier that can distinguish them from the other images. Your only choices are either modifying the template code or using javascript to pick out the first image in a post and applying a style to it.
You need to have a "class" attribute on the images you want to style with CSS. This way your CSS will work only on the images you want.
For example you can have this HTML
<img src="..." class="thumbnail"/>
and this CSS:
.thumbnail {...}
If your posts' structure is always identical, this should do the trick:
.post-content p:first-child img
{ float: right }
It addresses all img
elements in the first paragraph below post-content
.
Not supported by IE 6. Source at Quirksmode.org
精彩评论