mr_director Posted February 12, 2009 Share Posted February 12, 2009 I'm trying to recreate this look where the RSS image and the avatar image are vertically aligned at the bottom with the text. When I do it, however, it doesn't align correctly. I'm trying both lists and paragraphs, but the above person just used paragraphs. What's the easiest way to do this? Link to comment Share on other sites More sharing options...
Ingolme Posted February 12, 2009 Share Posted February 12, 2009 What does your current code look like? Usually you wouldn't need to do anything but have the image and text following eachother in the code.You can try vertical-align. But I'd like to check your code first to see what the problem is. Link to comment Share on other sites More sharing options...
mr_director Posted February 12, 2009 Author Share Posted February 12, 2009 Here's a link to the page so you can check out both html and css just in case it's something I'm not getting: http://www.collegeisamovie.com/2009/02/why...ng-at-mediocre/Here's the HTML: <p><a href='http://www.collegeisamovie.com/2009/02/why-i-think-terminator-the-sarah-connor-chronicles-is-hovering-at-mediocre/feed/'><img src="http://www.collegeisamovie.com/source/images/feediconsm.png" style="border: none; padding-right: 5px;">RSS feed</a> for comments on this post.</li><p><a href="http://gravatar.com"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32" style="margin-right: 5px;" width=25 /> Get a Gravatar.</a> A custom avatar that works here and on other sites.</p> Thanks for any help you can provide! Link to comment Share on other sites More sharing options...
roundcorners Posted February 12, 2009 Share Posted February 12, 2009 You could try floating the image and text left, but you'll have to clear the image and text the occur below, and you'll need to give them at at least one dimensionPost your code so we can see what you are doing Link to comment Share on other sites More sharing options...
mr_director Posted February 12, 2009 Author Share Posted February 12, 2009 If it's supposed to happen by default, I'd rather try and fix the code by removing what's causing the problem, not by adding more code. Unless that's the only way. Any ideas? Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2009 Share Posted February 12, 2009 The simplest thing is just this, no CSS required. <img src="img.jpg">Hello<br><img src="img.jpg">Hello<br><img src="img.jpg">Hello<br> You'll get more control over things if you put the text in paragraphs, turn the images into block-level elements, add margins, spacing, dimensions and stuff -- which is what a geek like me would do -- but the simple way should work fine. Link to comment Share on other sites More sharing options...
mr_director Posted February 12, 2009 Author Share Posted February 12, 2009 Not putting them in paragraph tags didn't fix the problem. Take a look:What could be the cause of this? Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2009 Share Posted February 12, 2009 Post the new code for that section. I don't know of anything that would override a <br> element. Link to comment Share on other sites More sharing options...
mr_director Posted February 12, 2009 Author Share Posted February 12, 2009 Sorry, I forgot to put the <br> tag in, but that didn't really make a difference either way. The issue is that the images aren't aligning evenly with the text, they're floating a little higher. <?php comments_rss_link('<img src="http://www.collegeisamovie.com/source/images/feediconsm.png" style="border: none; padding-right: 5px;">RSS feed'); ?> for comments on this post.<br><a href="http://gravatar.com"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32" style="margin-right: 5px;" width=25 /> Get a Gravatar.</a> A custom avatar that works here and on other sites. Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2009 Share Posted February 12, 2009 Well, you're gonna need some CSS for your images. Vertical align probably is the thing to mess with first. Each of these will give different results. Try each and see what happens:vertical-align: text-bottom;vertical-align: bottom;vertical-align: baseline; Link to comment Share on other sites More sharing options...
mr_director Posted February 12, 2009 Author Share Posted February 12, 2009 Vertical align: bottom worked like a charm. Though I'm wondering how the other site did it, because there was no special markup at all. Perhaps in CSS, I suppose. Thanks so much. Link to comment Share on other sites More sharing options...
jeffman Posted February 12, 2009 Share Posted February 12, 2009 Most of us put CSS in separate stylesheets, either in the head of the document or as a link. That makes it harder to see. Style inside the actual markup should be minimized. Purists (like myself) use none. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.