Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post

    Need help with authorbox

    Hey guys,

    so I made this authorbox based on this tutorial:

    http://wpzine.com/how-to-create-an-a...#comment-12483

    However, it does not display correctly on my website. It displays the gravatar image in one line and the description under it. How can I make it even on one line?

    Here is the code:

    PHP Code:
    <div class="author-box">
    <div class="author-left">
    <div class="author-pic"><?php echo get_avatarget_the_author_email(), '80' ); ?></div>
    </div>
    <div class="author-right">
    <div class="author-name"><?php the_author_meta"display_name" ); ?></div>
    <div class="author-bio"><?php the_author_meta"user_description" ); ?></div>
    <div class="author-url"><?php if (get_the_author_url()) { ?><a href="<?php the_author_url(); ?>">Visit <?php the_author(); ?>'s website</a><?php } else { } ?></div>
    </div>
    <div class="clear"></div>
    </div>
    style.css

    PHP Code:
    .author-box padding10pxbackground#ccc; border: 1px solid #333;}
    .author-left {float:leftwidth80pxmargin0 15px 0 0;}
    .
    author-right {float:leftfont-size13pxmargin5px 0 0 10px;}
    .
    author-pic {border1px solid#ccc;}
    .author-name {font-weight:bold;}
    .
    author-bio {padding5px 0 5px 0;}
    .
    author-url {color#555;}
    .author-url a {color#000;}
    .author-url a:hover {color#333;}
    .clear {clear:both
    And here is the website:
    http://einkaufshungrig.de/2011/04/an...s-fur-nur-59e/

    Thank you guys in advance for helping me!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It looks like it is enough to float only the div containing the image:
    Code:
    .author-right {font-size: 13px; margin: 5px 0 0 10px;}
    Or give the right div a certain width, as long as you have given a certain width to the left one
    Code:
    .author-right {float:left; font-size: 13px; margin: 5px 0 0 10px;width:510px;}
    It is amusing that the guy at:
    http://wpzine.com/how-to-create-an-author-box/
    has not created his own box following his own advices. He used, in fact, the first method I have told you: just the left element floated
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Location
    GERMANY
    Posts
    140
    Thanks
    29
    Thanked 1 Time in 1 Post
    hey thanks,

    now that I checked through you are right. And yes, strange that he did not use his own way haha


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •