The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with spacing social media icons, Can't seem to get social icons to line up without random spaces
gingerjesus
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gingerjesus
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gingerjesus
post Oct 19 2011, 03:41 PM
Post #4





Group: Members
Posts: 4
Joined: 18-October 11
Member No.: 15,659



QUOTE(Christian J @ Oct 19 2011, 03:24 PM) *

I merged the two threads...


Thanks! If only we could solve the problem... Anybody?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
gingerjesus
post Oct 20 2011, 01:28 PM
Post #7





Group: Members
Posts: 4
Joined: 18-October 11
Member No.: 15,659



QUOTE(pandy @ Oct 20 2011, 02:10 AM) *

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>













User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 06:03 AM