PDA

View Full Version : Wrapping post titles to image



OurJud
Mar 13th, 2010, 04:21 PM
Firstly, my test blog: http://imgpad.blogspot.com/

This is a representation of my actual blog, and as you can see I use a small square image in each of my posts to represent the content. I would like to have the title of my post sitting to the right of the image, instead of the normal way which is on top. Please see the screencaps below which better demonstrate what I'd like to achieve.

This is how I have it at the moment: default (http://4.bp.blogspot.com/_P6fRcsNpSXY/S5uXZVS5FcI/AAAAAAAABgk/tRoSlBSjZPU/s1600-h/notitlewrap.jpg)

And this is what I would like to acheive: Desired modification (http://2.bp.blogspot.com/_P6fRcsNpSXY/S5uXSIacbjI/AAAAAAAABgg/zLuiP_vYoTA/s1600-h/titlewrap.jpg)

Notice how the 'Read More' link has also moved to the side of the image.

I know this is probably a complex one, even for the best coders out there, but if anyone can see how I might do this it would be very much appreciated.

abduraooft
Mar 13th, 2010, 04:28 PM
You'd need to put that image and wrapping anchor before post-title, in the markup order.

Excavator
Mar 13th, 2010, 04:34 PM
Hello OurJud,
The image is already floated so no change to your CSS, you just need to re-order the markup so the float comes first.
Like this -

<div class="post hentry">
<a name="2792958788874108246"></a>
<h3 class="post-title entry-title">
<a href="http://3.bp.blogspot.com/_P6fRcsNpSXY/S5uR-UooZFI/AAAAAAAABgc/ySeWG_xWAEo/s1600-h/question%20mark.jpg" style="clear: left; float: left;"><img src="http://3.bp.blogspot.com/_P6fRcsNpSXY/S5uR-UooZFI/AAAAAAAABgc/ySeWG_xWAEo/s1600/question%20mark.jpg" border="0"></a>
<a href="http://imgpad.blogspot.com/2010/03/text-and-image-test-03.html">Text and Image Test 03</a>
</h3>
<div class="post-header-line-1"><span class="post-comment-link">
<a class="comment-link" href="http://imgpad.blogspot.com/2010/03/text-and-image-test-03.html#comments" onclick="">
Comment on this post &gt;
</a>
</span>
</div>
<div class="post-body entry-content">
<div id="lipsum">Suspendisse semper mattis odio ac condimentum. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce interdum semper<br>
</div>
<div style="clear: both;"></div>
</div>

OurJud
Mar 13th, 2010, 05:48 PM
Thank you both.

Excavator, the source code differs in some ways to the template code I have access to. For instance, individual <a href links are not included, there's just code to tell ALL post titles to link to their own page so I'm finding your instructions a little difficult to follow.

There's an awful lot of it (probably too much to fit into a post) but could I post my template code here, so that I can better understand what I need to do?

Sorry for being so thick, but I'm still learning CSS

Thanks.

OurJud
Mar 14th, 2010, 03:15 AM
Right, I've been having a play around with re-positioning the relevant mark-up.

<div class='post-body entry-content'>
<data:post.body/>
signals the start of the post content - text, images, etc.

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
Is the mark-up for the post title.

Okay, now if I have the post title code above the post content code, the title sits on top of the image and text as expected and as is the default.

But if I move the post title code below the post content code, the title shift to the right of the image, but comes after any text I have in my post.

How do I need to arrange my mark-up so that the title sits to the right of the image, but top-aligned and before any body text, as in this screenshot?

Desired result (http://2.bp.blogspot.com/_P6fRcsNpSXY/S5uXSIacbjI/AAAAAAAABgg/zLuiP_vYoTA/s1600-h/titlewrap.jpg)

Thanks.

[EDIT] Okay, I now know what the problem is, but not how to fix it. The image is part of the post, so if I instruct my page to put the post title after the *post-body entry-content* it can't differenciate between the image and any text I have there, and so sticks it in last place as instructed. I need to instruct it to go after the image, but before any text. I just can't see how I'd do this. Any ideas?

Thanks again.

Arbitrator
Mar 14th, 2010, 11:49 AM
[EDIT] Okay, I now know what the problem is, but not how to fix it. The image is part of the post, so if I instruct my page to put the post title after the *post-body entry-content* it can't differenciate between the image and any text I have there, and so sticks it in last place as instructed. I need to instruct it to go after the image, but before any text. I just can't see how I'd do this. Any ideas?Markup:

<!-- hypothetical elements used -->

<post>
<image/>
<title/>
<content/>
</post>

CSS:

image { float: left; }

Note that this will cause post content to flow under the image if the content area is taller than the image. If you want to prevent that, you can use image { overflow: auto; } to prevent the float from overlapping the content area (effectively making the float into its own column). However, if these images are just unnecessary decorations, it would be better to do that with CSS background images and a left padding:


post { padding-left: 150px; background: url("image.png") no-repeat; }

OurJud
Mar 14th, 2010, 02:17 PM
Hi, Arbitrator, thanks for the reply. I'm sorry, I must be a coders worst nightmare, but I don't think you're fully understanding what it is I want to do. It's not that I don't want the post content to flow under the image - I actually want it to wrap around in this way as it means the text uses the whole width of the page once it has dropped below the image. If the image and the text were in their own columns it would mean each post was twice as long. And in any case, doing this wouldn't solve my problem.

Anyway, I'm pretty sure I can't do what I want, for the reasons outlined in my last post. If I put the post-title code before the *post-body entry-content* it sits on top and left-aligned as normal. However, If I put the title code after *post-body entry-content* it doesn't differenciate between image and body text, so just puts the title at the foot of the body text, because that's what I'm telling it to do. There's no way I can see of instructing the post title to sit after the image but before the body text - as in this screenshot:

http://2.bp.blogspot.com/_P6fRcsNpSXY/S5uXSIacbjI/AAAAAAAABgg/zLuiP_vYoTA/s1600-h/titlewrap.jpg

Arbitrator
Mar 15th, 2010, 09:05 AM
Hi, Arbitrator, thanks for the reply. I'm sorry, I must be a coders worst nightmare, but I don't think you're fully understanding what it is I want to do. It's not that I don't want the post content to flow under the image - I actually want it to wrap around in this way as it means the text uses the whole width of the page once it has dropped below the image. If the image and the text were in their own columns it would mean each post was twice as long. And in any case, doing this wouldn't solve my problem.This was not the crux of my post and I was merely suggesting this since some people desire to use floats without having text wrap beneath the float. Since you can't seem to figure out even how a basic float works, apparently I was getting way ahead of myself though.

In fact, you didn't address my actual suggestion or any of the suggested code at all so I don't know if you tried it and it didn't work or you simply dismissed the post out of hand without reading it. Testing the code myself in an actual demo document indicates that what you're trying to achieve can be done with a simple float: left declaration on the image in the structure that is shown in my previous post. That is, unless I'm misunderstanding you on that point (which is certainly possible), but I don't know that since you didn't actually reply to that point and only addressed a tangential point instead.

(If you don't have full control over the structure for whatever reason, you should have said so in your first post. Otherwise, you should be able to take your existing structure, change it to the mentioned structure, add a float, and be done with it.)

The demo document:


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!doctype html>
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
/* Test Code */
img { float: left; }

/* Other Code */
* { margin: 0; }
html { margin: 1em; background: gray; color: black; }
img { margin: 0 1em 1em 0; background: crimson; color: white; }
h1 { background: slategray; color: white; }
p { background: lightblue; }
</style>
</head>
<body>
<div>
<img alt="image description" width="150" height="150" src=""/>
<h1>header</h1>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</body>
</html>


Anyway, I'm pretty sure I can't do what I want, for the reasons outlined in my last post. If I put the post-title code before the *post-body entry-content* it sits on top and left-aligned as normal. However, If I put the title code after *post-body entry-content* it doesn't differenciate between image and body text, so just puts the title at the foot of the body text, because that's what I'm telling it to do. The code in your prior-to-last post looks like a convoluted mess and doesn't make a good basis for discussion; it'd hard to help someone if I'm going to have to refer to elements as "post-body entry-content" and makes your posts much harder to follow. Even worse is that that code appears to use XML namespaces and you haven't made it clear to which languages those namespaces are referring. That would also seem to indicate that you're in the wrong forum (this is HTML & CSS) since you're presenting us with an XML-based template and apparently asking us to troubleshoot the XML and not the HTML & CSS aspect of this Web site.

OurJud
Mar 15th, 2010, 01:11 PM
Well I've obviously offended you with my lack of knowledge, Arbitrator. I'm sorry I don't understand coding/html/css as well as you, but we all have to learn. Why do you think I'm asking so many questions and not answering them?? All the things you critize me for in your last post are because my knowledge is limited.

The images are already instructed to 'float:left' in the post editor.

Sorry to have bothered you. I won't take up any more of your time.