Help with spacing social media icons, Can't seem to get social icons to line up without random spaces |
Help with spacing social media icons, Can't seem to get social icons to line up without random spaces |
gingerjesus |
Oct 18 2011, 09:04 PM
Post
#1
|
Group: Members Posts: 4 Joined: 18-October 11 Member No.: 15,659 |
Hi All,
New here, but I'm hoping you can help me out with a problem I've been struggling with. I'm new to a lot of these things, so be gentle. I'm sure I've got tons of errors in my code, but I'm hoping to have a nice chunk of time to clean up things before I really show this to anyone. Here's my problem: I've been trying to add social networking icons to the bottom of a page. I'm using javascript generated by the individual social networking sites themselves -- facebook, twitter, etc. -- and they seem to be loading properly. However, I cannot, for the life of me, figure out how to properly space them at the bottom of the page. They're pretty much in the right position, but they look incredibly sloppy. I'm thinking perhaps the javascript is adding some sort of padding to the right and left of certain icons (I suspect twitter is adding to the left), but I haven't been able to fix it. When all is said and done, all I'd really like is to have the functionality of the icons that facebook et al. offers with their own javascript NEATLY arranged at the bottom of each of the pages in this website. I've pasted the CSS and HTML below. I hope someone out there can help. Best Wishes, Gingerjesus Here's the CSS file (all of it) followed by the html: body {padding:0; margin:0; font:76% Verdana, Arial, Helvetica, Futura, sans-serif; color:#657383; border-top: 0px solid #444; text-align:center; line-height:1.5em; background-image:url('plaster.jpg');background-repeat:no-repeat; background-attachment:fixed;} #wrap {width:800px; text-align:center; margin:0 auto;} #maincontent {background:#FFFFFF; text-align:left; border:4px solid #666; padding:15px 15px 5px 15px; margin:0 0 15px 0;} #socialiconlist li {width:760px; text-align:center; margin:0; display:inline; vertical-align:top; list-style-type: none; } a {text-decoration:none; font-weight:700; color:#9D9C9C; } a:hover {text-decoration:underline;} a img {border:0;} h1 {margin:15px auto 10px auto; padding:0; font-size:2.6em; color:#BCBCBC; letter-spacing:-2px; line-height:1.2em;} h1 a {color:#000000; font-weight:700; text-decoration:none;} h1 a:hover {color:#413D32; text-decoration:none;} h2 {margin:0 0 12px 0; padding:12px 6px 12px 15px; background:#1a1a1a url(bodybg.jpg) top center no-repeat; border-left:4px solid #9d9c9c; color:#ddd; font-size:1.5em; font-weight:400;} h2 a {font-weight:400;} h3 {font-size:1.4em; font-weight:400; margin:0 0 10px 0;} p {margin:0 0 15px 0;} p2 {margin: 0 0 12px 0; padding: 12px 6px 12px 15px; text-align:center} ul {list-style-type: none; margin:0 0 15px 20px; padding:0; text-align:center} li {margin:0; padding:0 0 0 5px; text-align:center;} blockquote { font: 1.2em/1.6em Verdana, Arial, Helvetica, Futura, sans-serif; width: 400px; background: url(close-quote.gif) no-repeat right bottom; padding-left: 18px; text-indent: -18px; } blockquote:first-letter { background: url(open-quote.gif) no-repeat left top; padding-left: 18px; font: bold italic 1.4em Verdana, Arial, Helvetica, Futura, sans-serif; } .intername, .inteename { position:relative; padding:3px 5px 5px; margin:0 8px 0 0; color:#ffffff; font-size:110%; float:left; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .intername { background:#075698; background:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#2e88c4), to(#075698)); background:-moz-linear-gradient(50% 100% 90deg, #075698, #2e88c4); background:linear-gradient(top, #2e88c4, #075698); } .inteename { background:#c81e2b; background:-webkit-gradient(linear, 0% 0%, 0% 50%, from(#f04349), to(#c81e2b)); background:-moz-linear-gradient(50% 100% 90deg, #c81e2b, #f04349); background:linear-gradient(top, #f04349, #c81e2b); } .left {width: 39%; float:left; text-align:left; display:inline; } .right {width: 39%; float:left; text-align:left; display:inline; } .container {width: 39%; float:left; text-align:left; display:inline; } .slogan {color:#444; font-size:1.4em; margin:0 0 15px 0; padding:0; font-style:italic} .toptabs {clear:both; font-size:1.4em; line-height:1.5em; color:#aaa; margin:0 0 15px 0;} .toptab {padding:3px 10px 5px 10px; font-weight:400; margin:0 2px; color:#444;} .toptab:hover {background-color:#444; color:#fff; text-decoration:none;} .active {background-color:#444; color:#fff;} .active:hover {background-color:#444; color:#fff;} .active1 {text-decoration:underline} .active1:hover {background-color:#444; color:#fff;} .bottomlinks, .bottomlinks a {text-align:center; color:#888; font-size:0.9em; font-weight:400; margin:5px auto;} .footer, .footer a{color:#FFF; font-weight:400;} .hide {display:none;} .alignLeft { float:left; margin-right: 1em; } .alignRight { float:right; margin-left: 1em; } .center{margin-left:auto;margin-right:auto;width:70%; background-color:; } .bodysubmenus {clear:both; font-size:1.4em; line-height:1.5em; color:#aaa; margin:0 0 15px 0;} .bodysubmenu {clear:both; font-size:1.3em; line-height:1.5em; color:#aaa; margin:0 0 15px 0; text-align:center} .bodysubmenu:hover {background-color:#444; color:#fff; text-decoration:none;} .intername:after, .inteename:after { content:"\00a0"; position:absolute; bottom:-20px; left:15px; width:0; height:0; border-width:5px 0px 15px 10px; border-style:solid; } .intername:after { border-color:#075698 transparent transparent; } .inteename:after { border-color:#c81e2b transparent transparent;} .question { display:block; line-height:1.5em; margin:20px 0 15px 40px; font-style:italic; background:#f2f2f2; -moz-border-radius:8px; -webkit-border-radius:8px; } .question p { padding:5px 10px 10px; } .answer { display:block; line-height:1.5em; margin:20px 0 15px 40px; -moz-border-radius:8px; -webkit-border-radius:8px; } .answer p { padding:5px 10px 10px; } HERE'S THE HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="The Pakistan Cauldron" /> <meta name="keywords" content="Pakistan, Cauldron, James, Farwell, Benazir, Bhutto, Afghanistan, India, Iran, Iraq, United States of America, US" /> <meta name="author" content="Beau Babst" /> <link rel="stylesheet" type="text/css" href="PakistanCauldron.css" title="The Pakistan Cauldron" media="screen,projection" /> <title>Pakistan Cauldron</title> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="wrap"> <h1><a href="index.html">The Pakistan Cauldron</a></h1> <p class="slogan">Conspiracy, Assisination, & Instability</p> <p class="toptabs"> <strong class="hide">Main menu:</strong> <a class="toptab" href="index.html">Home</a><span class="hide"> | </span> <a class="toptab" href="about.html">About</a><span class="hide"> | </span> <a class="toptab" href="advancepraise.html">Advance Praise</a><span class="hide"> | </span> <a class="toptab active" href="theauthor.html">The Author</a><span class="hide"> | </span> <a class="toptab" href="Comments.html">Comments</a><span class="hide"> | </span> <a class="toptab" href="Events.html">Events</a><span class="hide"> | </span> <a class="toptab" href="Contact.html">Contact</a> </p> <div id="maincontent"> <h2>James P. Farwell's Events </h2> <iframe src="https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showCalendars=0&mode=AGENDA&height=500&wkst=1&bgcolor=%23FFFFFF&src=james%40jamespfarwell.com&color=%232952A3&ctz=America%2FChicago" style=" border-width:0 " width="725" height="500"frameborder="0" scrolling="no"></iframe> <br /> <br /> <a href="#"><div class="fb-like" data-send="true" data-layout="button_count" data-width="200" data-show-faces="false" data-font="verdana"></div></a><span class="center"></span> <a href="https://twitter.com/jamespfarwell" class="twitter-follow-button" data-show-count="false"></a> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script><span class="center"></span> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="jamespfarwell">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></a></div><span class="center"></span> <a href="#"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share" data-counter="right"></script></a><span class="center"></span> <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;"></a><span class="center"></span> <a class="bodysubmenu" href="theauthor.html" text-align="center">1</a><span class="center"> | </span> <a class="bodysubmenu active1" href="theauthor2.html" text-align="center">2</a><span class="center"> | </span> </div> <p></p> <p class="footer">Copyright © 2011 <br /> <a href="index.html">Beau Babst & James Farwell</a><br /> Published by Potomac Books<br /> </p> </div> </div> </body> </html> |
gingerjesus |
Oct 19 2011, 12:32 PM
Post
#2
|
Group: Members Posts: 4 Joined: 18-October 11 Member No.: 15,659 |
Hi All,
I posted about this yesterday, but I didn't leave the link to the page. http://www.jamespfarwell.com/Events.html If anyone out there has any time to help me with the problem at the bottom of the page, I'd be grateful. The issue is with the twitter, facebook, linkedin, and tumblr icons at the bottom of the page. I don't like the extra white space between them. Thanks very much. |
Christian J |
Oct 19 2011, 03:24 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I merged the two threads...
|
gingerjesus |
Oct 19 2011, 03:41 PM
Post
#4
|
Group: Members Posts: 4 Joined: 18-October 11 Member No.: 15,659 |
|
Frederiek |
Oct 20 2011, 01:33 AM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
The real problem is the generated code by the different social sites that inserts iframes at fixed widths. Your table might add to that. Try putting the code in a div.
I recently had a similar problem on a project I'm working on (see http://vigiglobe.com (bottom right)). I used the code from http://www.addthis.com/ and put it in a div with extra styling. |
pandy |
Oct 20 2011, 02:10 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
There's some odd markup that seems to be added in every cell, so I assume that's your own. Also, the first cell should have colspan="5", not colspan="6".
Could you post the code for the buttons, just as you got it? |
gingerjesus |
Oct 20 2011, 01:28 PM
Post
#7
|
Group: Members Posts: 4 Joined: 18-October 11 Member No.: 15,659 |
There's some odd markup that seems to be added in every cell, so I assume that's your own. Also, the first cell should have colspan="5", not colspan="6". Could you post the code for the buttons, just as you got it? Thanks folks. I actually took a few more cracks at it and was able to wrangle them in just a little more: see the updated version at http://www.jamespfarwell.com/Events.html I had to use tables, which I wasn't using when I first posted this thread. I'd much rather use divs, but I can't seem to get them to work. The tables did not seem to change anything until I switched the buttons to the iframe options from each of the offending sites -- twitter mostly, but FB was adding whitespace to the right too. That seemed to allow the table cells to contain them. However, I'm still frustrated that I can't seem to do it with divs, and even with iframes and tables, the buttons aren't lined up perfectly. The LinkedIn button hovers above the line (non-responsive to vertical alignment) and the tumblr button and facebook button still add whitespace to the right. I'd really like to do it with divs, but I haven't been able to. Any ideas? Thanks again for all your help. Btw, Pandy, here's the code for the buttons: FB -- requires this just below the body tag: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> And this for the instance: <a href="#"><div class="fb-like" data-send="true" data-layout="button_count" data-width="1" data-show-faces="false" data-font="verdana"></div></a> LinkedIn: <a href="#"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share" data-counter="right" data-height="20"></script></a> Tumblr: <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;"> Twitter "Tweet": <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="jamespfarwell" >Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> Twitter "Follow": <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=jamespfarwell" style="width:150px; height:20px;"></iframe> |
Lo-Fi Version | Time is now: 29th March 2024 - 06:03 AM |