Social Media Buttons float

HTML & CSS
1

Hi guys,

I have this 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

To be able to assess that code properly, it would be best to remove any non-HTML stuff like <g:plusone size=“tall”>.

So view the source code in your browser and copy that for us instead. :slight_smile:

3
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. :confused:

4
Off Topic:

Ah, right, thanks! It’s new to me.

5

Something like this should do the trick.


<!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

yeah thats from google plus…

plusone-button

=)

sir paul thanks.

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

7

Thanks Paul it works. =) +1

8

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).