Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Feb 2016
    Posts
    2
    Member #
    53434

    Divs clear dispite the rules

    I am putting LinkedIn facebook buttons on my wesite, I would like to use my buttons. The first two buttons LI and fb-follow were simple links to my pages the code came in a div "media tray"
    html
    <div id="mediatray">
    <a target="_blank" title="linked in profile" href="https://ca.linkedin.com/in/ ? -80027261">
    <img src="images soc_media/In-White-34px-TM.png" width="45" height="34" border="0" alt="View my profile on LinkedIn"></a>
    <a target="_blank" title="follow me on facebook" href="https://www.facebook.com/ ? -118735408163216/"><img alt="follow me on facebook" src="images soc_media/facebook-3-32.jpg" border=0></a>
    </div>
    css
    #mediatray img {
    margin-right: 5px;
    margin-left: 5px;
    padding-top: 5px;
    }

    but the facebook like and share code each came as a div it's self, like this
    <div class="fb-like" data-href="http://www.hayhurst-photography.com/LinkedIn_trial-3" data-width="32" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>

    I want to have them lined up along the bottom of the div so...

    I made the media tray a container and created 2 more divs, one each and put the LinkedIn code in one and the fb-follow in the other. 4 buttons in 4 divs in 1 container div, I then wrote some css. The problem is each div clears the previous one causing the buttons to drop a step.

    html

    <div id="mediaTray">
    <div id="LI-profile">
    <a target="_blank" title="linked in profile" href="https://ca.linkedin.com/in/ ? -80027261">
    <img src="images soc_media/In-White-34px-TM.png" width="45" height="34" border="0" alt="View my profile on LinkedIn"></a>
    </div>
    <div id="fb-follow">
    <a target="_blank" title="follow me on facebook" href="https://www.facebook.com/ ? -118735408162401/"><img alt="follow me on facebook" src="images soc_media/facebook-3-32.jpg" border=0 /></a>
    </div>
    <div id="fb-like" data-href="http:// ? .com/LinkedIn_trial-3" data-width="32" data-layout="standard" data-action="like" data-show-faces="false" data-share="false">
    <img alt="like this page on facebook" src="images soc_media/facebook-like-3-32.jpg" border=0></div>
    <div id="fb-share" data-href="http://www. ? /LinkedIn_trial-3" data-layout="button" data-width="32" data-action="share">
    <img alt="share this page on facebook" src="images soc_media/facebook-sharethis-3-32.jpg" border=0></div>
    </div>

    css

    #mediaTray {
    width: 800px;
    padding: 0px;
    }
    #LI-profile {
    height: 100%;
    width: 110px;
    margin-right: 0px;
    clear: none;
    }
    #fb-follow {
    height: 100%;
    width: 32px;
    margin-left: 200px;
    margin-top: 0px;
    clear: none;
    }
    #fb-like {
    clear: none;
    height: 100%;
    width: 32px;
    margin-left: 400px;
    margin-top: 0px;
    }
    #fb-share {
    width: 32px;
    margin-left: 600px;
    clear: none;
    margin-top: 0px;
    }

    where is there a problem with this? Can four divs not lay side by side?

    Chris

  2.  

  3. #2
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    What is the web page where this is occurring? I want to see what the behavior is that is giving the problem.

    It looks like the problem is being caused by the div code you plugged in. They all have widths assigned which may be breaking your layout. It is probably MUCH more preferable to design your own media buttons and implement the divs from scratch. At least, this is where I see a problem occurring.

  4. #3
    Junior Member
    Join Date
    Feb 2016
    Posts
    2
    Member #
    53434
    I think you're right about the code I put in. It started with a face book like button which comes as a div, the LinkedIn and facebook follow were simple <a> tags so I made divs for these to keep them consistent. The reaction is as you say, an unseen width. I have since disgarded the fb-like as unnecessary and I replaced the fb-share with an AddThis button that has the same function as a share button but uses <a> tags it also allows you to change the button, in this case to a B&W. Thanks for your time but my new solution does work.
    Thanks again.
    Chris


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 09:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com