WordPress.org

Ready to get started?Download WordPress

Forums

Need help from a CSS person for aligning my gravatar! (10 posts)

  1. John_Wright
    Member
    Posted 5 years ago #

    Hi, I hope someone who's good at CSS can help me with this. I'm using Cutline 1.2 and I've added a gravatar beside the post title, but I'm having trouble getting it to align correctly. (Funny enough it shows correctly in Safari, but not in any other browser.) My CSS looks like this:

    h2 { font-size: 2.0em; }

    h2 a { color: #000; text-decoration: none; }

    h2 a:visited { color: #555; text-decoration: none; }

    h2 a:hover { color: #090; text-decoration: none; }

    .posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; }

    .pages h2, h2.page_header { margin: 0 0 0.75em 0; padding: 0 0 0.6em 0; background: url('images/hr_title_sep.gif') 0 100% no-repeat; }

    .avatar{ float:right; display: inline; padding:0 2px 0 2px; }

    h2.archive_head { font-weight: bold !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 3px solid #000 !important; background: url('images/hr_dot_black.gif') 0 100% repeat-x !important; }

    And then in my index.php and my single.php it looks like this:

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <h2>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?>

    <div class="avatar">
    <?php echo get_avatar( get_the_author_email(), '48' ); ?>
    </div></h2>

    <h4><?php the_author() ?> · <?php the_time('l, F j, Y'); ?> at <?php the_time('g:i a'); ?> <?php edit_post_link('Edit', ''); ?>
    </h4>

    What am I missing here? I just want the gravatar to be aligned on the right side opposite my title (h2) and post info (h4). Right now it's placing the avatar between the two lines, or it's pushing the h4 line down below it. I'm sure it's a simple fix, right? But..... I'm fairly new to CSS.

    I'd appreciate anyone's help.

  2. John_Wright
    Member
    Posted 5 years ago #

    bump. Can someone take a look at this for me?

  3. A link to the site might help so people can actually see the results and the CSS...

  4. John_Wright
    Member
    Posted 5 years ago #

  5. John,

    My CSS is *cough* horrendous *cough* not that good but try this:

    .avatar{ right:165px; display: inline; padding:0 2px 0 2px; position: absolute; }

    I'm using EditCSS in FireFox and that seems to line it up on the top.

    Edit: (I edit a lot...) Scratch that, that only works for the width of _my_ window...

  6. marlfoskr
    Member
    Posted 5 years ago #

    Hi John,

    The CSS you gave as an example seems fine to me. Try putting the Avatar div above the first heading (the h2), though. That will put the avatar at the top-right of each post.

    When you float an element, it allows all the elements beneath it to sit in the horizontal space it doesn't occupy.

  7. John_Wright
    Member
    Posted 5 years ago #

    Guys,

    You're awesome. A combination of both your pieces of advice worked for me: the first made it display right in IE6 and IE7, the last one corrected it on Firefox and Safari too.

    Woohoo! Thanks again

  8. Uh, John, if you look at it in IE7 re-size your window to the left and right... on mine the Gravatar moves in relation to the window border...

    I'd stick with markfoskr's advice and leave the CSS as it was but move that <div>.

  9. John_Wright
    Member
    Posted 5 years ago #

    I'd tried that already... on some browsers it was placed above the h2 when I did that. Yikes. Any other suggestions?

  10. darrinb
    Member
    Posted 5 years ago #

    Try setting a width on the containing div equal to the width of the image, that should do it. Whenever you float an element, you should always declare a width. Additionally, IE handles floats MUCH better with a defined width.

Topic Closed

This topic has been closed to new replies.

About this Topic