Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2005-10-17 10:03:57
- digicammad
- Member
- Registered: 2005-10-11
- Posts: 71
Wrapping text around thumbnails
I am using the plugin hak_article_thumb to display a thumbnail against each excerpt in an article list. Over the weekend I’ve been trying to get the text to wrap around the thumbnail but have had no joy.
This is my code at the moment
<code>
<txp:hak_article_thumb wrapclass=“h3” />
<h3><txp:excerpt/></h3>
</code>
and this is the h3 css
<code>
h3
{
font-weight: normal;
font-size: 11px;
line-height: 12px;
}
h3 a
{
border: 0px;
font-weight: normal;
font-family: Georgia, Times, Serif;
font-size: 15px;
}
h3 img
{
float: left
padding: 5px
}
</code>
I’ve tried all sorts of other things but reading the forums this is where I ended up. I’m new to CSS and HTML. Can somebody please tell me what I am doing wrong? The blog URL is http://www.aholidayinturkey.co.uk/ahitblog
Thanks
Offline
Re: Wrapping text around thumbnails
I think it’s using the h3 that’s the problem. You are floating the image but the h3 will still go fullwidth. You need to float the h3 but you can’t because it will affect your excerpts’ h3 as well.
Try using <code><p class=“thumb”><txp:hak_article_thumb /></p></code> then float the p to the left rather than the image. You can still add padding to the image separately. You could probably use a div instead of a p if you wanted.
or
<code><h3><txp:hak_article_thumb /><txp:excerpt/></h3></code> then float the image and add padding.
Last edited by thebombsite (2005-10-17 12:56:33)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#3 2005-10-17 12:53:14
- digicammad
- Member
- Registered: 2005-10-11
- Posts: 71
Re: Wrapping text around thumbnails
Thanks I’ll give that a try.
Offline
#4 2005-10-17 13:32:35
- digicammad
- Member
- Registered: 2005-10-11
- Posts: 71
Re: Wrapping text around thumbnails
Sorted it thanks. The problem was that although the thumb was a max of 100px wide the h3 class was going to the full width as you said. I created a new class just for this, with a width definition and the text now shows alongside.
Offline
Pages: 1