SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation How i can make align in two rows?

    hi friends
    i attached a reference picture, smashinghub plz open my website and see the sidebar , you can see the google+ and facebook like buttons , they are overlap to each other, plz i want to make into 2 row... like

    1) Google + like
    2) facebook like

    SaE3K.png

    You can also see the facebook fan page box , i want to make centre as well, plz tell me way and code or trick, to make align like above
    thanks,waiting
    Attached Images Attached Images

  2. #2
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    you can start by setting up .fblike:
    .fblike {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: -7px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 110px;
    display: inline-block;
    }

    and
    .fbplus {
    width: 290px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 13px;
    text-align: center;
    }

    And then add to g+ style attribute:
    display: inline-block;

    And finally to make them go on separate lines: add after the FB's closing div: <br />

  3. #3
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sularome View Post
    Hi,
    As you given me code, i placed on CSS

    regarding sidebar,

    <div style="clear:both;"></div>
    <p><u><font size="1" face="Arial">
    <a href="http://buysellads.com/buy/detail/21275">ADVERTISE HERE</a></font></u></p>
    <div style="clear:both;"></div>
    <h2 class="hsidebar">Subscribe to Smashing Hub</h2><br>

    <div class="social-widget">

    <div class="fbplus">
    <div class="fblike"><iframe src="//www.facebook.com/plugins/like.php?href=http://smashinghub.com&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; margin-left:25px; overflow:hidden; width:400px; height:21px;" allowTransparency="true"></iframe></div>

    <!-- Place this tag where you want the +1 button to render -->
    <glusone href="http://smashinghub.com"></glusone>

    </div>
    what to do what g+ and other things, because i could not able to understand example you given to me

  4. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    in your file style.css you have defined 2 times .fblike and .fbplus. Remove the duplicates and apply the changes from my previous post.
    And then change your html as shown bellow:

    Code:
    <div style="clear:both;"></div>
    
    <p><u><font size="1" face="Arial">
    
    <a href="http://buysellads.com/buy/detail/21275">ADVERTISE HERE</a></font></u></p>
    
    <div style="clear:both;"></div>
    
        <h2 class="hsidebar">Subscribe to Smashing Hub</h2><br>
    
    
    
        <div class="social-widget">
    
    
    
    <div class="fbplus">
    
    <div class="fblike"><iframe src="//www.facebook.com/plugins/like.php?href=http://smashinghub.com&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; margin-left:25px; overflow:hidden; width:400px; height:21px;" allowTransparency="true"></iframe></div> 
    <br />
    
    <!-- Place this tag where you want the +1 button to render -->
    
    <g:plusone href="http://smashinghub.com"></g:plusone>
    
    
    
    </div>

  5. #5
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sularome View Post
    Hi,
    thanks for your reply, now its appeared like this
    exist.png

    plz fix this too
    i remove duplicate code in stylesheet

  6. #6
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    you haven't removed the second .fblike.
    And then again:

    Code:
    .fblike {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: -7px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 110px;
    display: inline-block;
    }
    
    and 
    .fbplus {
    width: 290px;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 13px;
    text-align: center;
    }

  7. #7
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=sularome;4993565]Hi,

    hi again

    sir i removed both codes on stylesheet, now its looks like this

    error.png

    sir, facebook like +g on same line, allign, plz tell me code to fix

    and facebook fan box , as centre as well smashinghub... thanks waiting

  8. #8
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i ve removed both codes from stylesheet , but it has not yet fixed sir

  9. #9
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add this to your css:
    Code:
    .fblike{
    display: inline-block;
    width: 110px;
    }

  10. #10
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sularome View Post
    add this to your css:
    Code:
    .fblike{
    display: inline-block;
    width: 110px;
    }
    sir good, and what about facebook fan page ... i need to centre as well

  11. #11
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't you put margin-left: 25px; ?

  12. #12
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sir this is a code , Can you edit, plz, i dont know programming even basic

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsmashinghub&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>

  13. #13
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsmashinghub&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;margin-left:25px;" allowTransparency="true"></iframe>
    This should work.

  14. #14
    SitePoint Addict aliqayyum's Avatar
    Join Date
    Oct 2009
    Posts
    303
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks all fixed


Bookmarks

Posting Permissions

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