SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Social Media Buttons float

    Hi guys,

    I have this code

    Code:
     <div style="float:left; padding:15px 5px 5px 5px; display: block; width: 243px;">                                                 
                  <div style="float: left; margin-right: 5px;">              
                  <!-- Place this tag where you want the +1 button to render -->              
                  <g:plusone size="tall">              
                  </g:plusone>            
                </div>            
                <div style="float: left; margin-right: 5px;">                
                  <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-related="">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>            
                </div>            
                <div style="float: left; margin-right: 5px;">
    <script>var fbShare = {
    url: '<?php echo curPageURL();?>',
    size: 'large', badge_text: 'FFFFFF', badge_color: '3B5998', google_analytics: 'true' }</script>
    <script src="http://widgets.fbshare.me/files/fbshare.js"></script>            
                </div> 
                            <div id="fb-root">            
                </div>
    <script src="http://connect.facebook.net/en_US/all.js#appId=126286880788009&amp;xfbml=1"></script>            
                <div style="float: left; margin-left: 0;">              
                  <fb:like href="<?php echo curPageURL();?>" send="false" layout="box_count" width="35" show_faces="false" font="">              
                  </fb:like>            
                </div>               
                                                                      
              </div>
    as you can see.. its wrap by div. I want to minimize the use of div in my website.. how can i achieved this in ul?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    To be able to assess that code properly, it would be best to remove any non-HTML stuff like <glusone size="tall">.

    So view the source code in your browser and copy that for us instead.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:


    <g: plusone size="tall"></g: plusone> will be in the HTML source as well. That's part of the code you need to put in your HTML to add a Google +1 button. :/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Immerse View Post
    <g: plusone size="tall"></g: plusone> will be in the HTML source as well. That's part of the code you need to put in your HTML to add a Google +1 button. :/
    Ah, right, thanks! It's new to me.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this should do the trick.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    ul.social {
        margin:0;
        padding:0;
        list-style:none;
    }
    ul.social li {
        float:left;
        margin:0 5px 5px 0;
    }
    </style>
    </head>
    <body>
    <ul class="social">
        <li><g:plusone size="tall"> </g:plusone>
        </li>
        <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-related="">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </li>
        <li>
            <script>var fbShare = {
    url: '<?php echo curPageURL();?>',
    size: 'large', badge_text: 'FFFFFF', badge_color: '3B5998', google_analytics: 'true' }</script>
            <script src="http://widgets.fbshare.me/files/fbshare.js"></script>
        </li>
        <li>
            <div id="fb-root"> </div>
            <script src="http://connect.facebook.net/en_US/all.js#appId=126286880788009&amp;xfbml=1"></script>
            <fb:like href="<?php echo curPageURL();?>" send="false" layout="box_count" width="35" show_faces="false" font=""> </fb:like>
        </li>
    </ul>
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah thats from google plus..

    plusone-button

    =)

    sir paul thanks.

    do you have a tutorial on when to use the div?

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Something like this should do the trick.
    Thanks Paul it works. =) +1

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jalmz View Post
    yeah thats from google plus..

    plusone-button

    =)

    sir paul thanks.

    do you have a tutorial on when to use the div?
    Use a div when there is no other suitable container for the content you are presenting. Most times there will be something more suitable (e.g. headings, p elements, lists, dl, tables etc).

    Divs are mostly used to group elements together and provide a logical structure but if the content you are presenting has no semantic html element than you can use a div for block level content and a span for inline level content.

    Some people use divs to wrap images but I think that if an image has been placed in the page because it is important to content (otherwise it would have been a background image) then it should be in a p element because it is saying something (others may disagree but that's their choice as these things are not set in stone).


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
  •