Howdy - I've just inserted avatars into my blog, Tshirt Alert. You'll notice the avatar appears as a 128x128 pixel image at the start of each post. The problem now is, the Title of the post is automatically appearing beneath the avatar, rather than sitting to the right-hand side of it. I'm hopeless with CSS, so I'd love a helping hand to get the Title of the post where it belongs, rather than leaving that big gaping hole!
It's because you have a width set for your H1 somewhere I think.. Here's a quick fix to throw at the bottom of your stylesheet: .post-title .imgauthorthumb { float:left; } #content #post-entry .post-title h1 { float:left; width:auto; line-height:80px; margin:0 0 0 20px; padding:0; } Code (markup): I added width:auto; to override the previously defined width. Gave it a line-height of 80px for vertical centering, although you might want to rid this and mess around with the margins and paddings a bit more for your desired look.
Hey mate, thanks heaps for supplying this code. I pasted it, as is, to the bottom of the Stylesheet and it doesn't seem to have changed anything....in fact, for Post titles that ran over two lines, it increased the gap between lines.... do you think I pasted it incorrectly?
Sorry shouldn't have used line-height didn't realise it might go over 2 lines. How about something like: .post-title .imgauthorthumb { float:left; } #content #post-entry .post-title h1 { float:left; width:325px; margin:5px 0 0 20px; padding:0; } Code (markup): All depends on how you want it to look.
Hey there.... thanks for your code, I've incorporated it into my site, was working great for Google Chrome, though I just jumped onto IE for a look and it's not pretty. Before we start trying to fix it....what do you think - should I leave the author name above the main title, or should I lay it out the same as this site http://www.imediaconnection.com/ - where the Article title sits directly above the avatar?
I like it next to the photo myself, but it's everyone's preference I guess. Anyway you guys were on the right track. I suggest giving both these divs temporary ugly background colours so you can see why two floats aren't sitting next to each other like they should. <div class="post-title"> <div class="imgauthorthumb" ><a href="http://www.tshirtalert.com/?author=197"><img src="http://www.tshirtalert.com/wp-content/uploads/userphoto/houndbound.thumbnail.jpg" alt="houndbound" width="80" height="80" class="photo" /></a></div> <div class="authorname"><a href="http://www.tshirtalert.com/?author=197">Balazs from Houndbound</a> brings to you:</div> <h1><a href="http://www.tshirtalert.com/portraits-of-dogs-on-tees" rel="bookmark" title="Portraits of dogs on tees">Portraits of dogs on tees</a></h1> Code (markup): When you had the other thread about getting the image to the side, I thought that it was too much code. I still do, but likely you're using some template so you're prolly saddled with it forever. Anyway in most browsers, if .imgauthorthumb is floated and given no width, it shoul shrink-wrap to the width of the image. But you can be safer by stating the width of the image, because you know you'll never have a larger image. This'll stop IE or any other browsers, usually older ones, from thinking a widthless float should be too small or 100% wide. Give them each an ugly background colour. Were it my code, it would be <div class="post-title"> <p class="imgauthorthumb"><a href="/?author=197"><img src="/wp-content/uploads/userphoto/houndbound.thumbnail.jpg" alt="HoundBound" width="80" height="80" /></a><p> <p class="authorname"><a href="/?author=197">Balazs from Houndbound</a> brings to you:</p> <h2><a href="/portraits-of-dogs-on-tees" rel="bookmark">Portraits of dogs on tees</a></h2> </div> Code (markup): and .post-title p.imgauthorthumb { width: 80px; float: left; margin: 5px 25px 0 5px; or whatever } .post-title p.authorname { whatever; } post-title h2 { whatever; } Code (markup): (I only did p's around the image because someone somewhere will cry about inlines being siblings of blocks. Methinks it's still too much code but, meh) Here, if no width is given to the p or the h2 (I didn't keep h1 because it's weird to have a single page with a lot of text claiming to be its title, when they should be h1's on the page you click to), then in modern browsers, the are blocks and will slide under the image. They'll act like the floated image isn't there at all (and you'll see this if you give them ugly background colours). The text inside will of course move out of the way... the inlines can see floats like Haley Joel Osment sees dead people. IE will do this too unless the p or the h2 get a haslayout trigger. Then there'll be no sliding underneath the float. But you can be safe I think without triggering haslayout (don't set a height, width, zoom, or any of the other triggers on those, and they'll be ok).
Thanks heaps mate - I haven't tried your code yet, because it seems to look ok for the moment. That said, i haven't tried it on many browsers - is there a quick way of doing cross browser checking?
Warning, my code above was just written, never tested. Knowing me, I goofed something : ) Well, browsershots.org isn't quick on my machine, but maybe you're in luck. But if you're using a Windows platform you can pretty much download all the browsers easy enough. Opera 10, Firefox 3.5, Chrome, Safari3 or 4-for-Windows (at apple's safari page), and if you're using XP you can use Tredosoft for Mulitple IEs... if you've got IE7 or 8, this lets you see IE6, 5.5, 5, and below (I pretty much use it for IE6). I think compatibility mode in IE8 would give you an idea of what IE7 does, not sure. If you're using another OS, even with just one blog, you may want to invest in some sort of dual-boot or virtual machine to run windows so you have access to the windows browsers. After setting up, it's less headache.