"I have no idea what I'm doing", 10th Jun 2012, 5:11 PM #1
I've been strugling for ages to simply get the Like us on FaceBook button to appear next to the latest button but now it just appears at the bottom ot the layout and the top of the extras pages and looks really untidy.
Here's the HTML and the CSS is some one can see where I went wrong and how I can fix it.
Here's the HTML and the CSS is some one can see where I went wrong and how I can fix it.
<!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" lang="en" xml:lang="en">
<head>
<!-- Last Update: [v:lastupdatedmy] -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
<title>[v:webcomicname] - [v:pagetitle]</title>
<style type="text/css">
<!--layout:[css]-->
</style>
<script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php?wcid=[v:webcomicid]"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29990497-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="head">
<ul id="menu">
<li><a href="/comics/">Comics</a></li>
<li><a href="/comics/first">First</a></li>
<li><a href="/comics/random">Random</a></li>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/blog/">Blog</a></li>
[c:searchon]
<li><a href="/search/">Search</a></li>
[/]
[l:extrapages]
<li><a href="[v:l.link]">[v:l.title]</a></li>
[/]
[c:!hidefromhost]
<li><a href="[v:addsubscriptionlink]">Subscribe</a></li>
[/]
</ul>
<h1 id="sitetitle">[v:webcomicname]</h1>
<div id="sitedesc">[v:webcomicslogan]</div>
</div>
<div id="contentwrap">
<div id="content">
[c:bannerads]
<!-- voluntary CF support ads, you can turn these off in your webcomic settings -->
<div id="cf_ads">[v:banneradcode]</div>
[/]
<!--comment:[if we're on an extra page, show the title here:]-->
[c:isextrapage]
<div class="title">[v:pagetitle]</div>
<div class="fb-like" data-href="http://lvl30psy.thecomicseries.com/" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true"></div>
[/]
<!--layout:[content]-->
</div>
</div>
<div class="fb-like" data-href="http://lvl30psy.thecomicseries.com/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
<div id="footer">
<a href="/rss/">RSS</a> |
[c:!hidefromhost]
<a href="[v:comicprofile]">Comic Profile</a> |
[/]
<a href="http://comicfury.com">ComicFury</a> |
<a href="#">Top</a><br />
© [v:copyrights]
</div>
</body></html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- Last Update: [v:lastupdatedmy] -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
<title>[v:webcomicname] - [v:pagetitle]</title>
<style type="text/css">
<!--layout:[css]-->
</style>
<script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php?wcid=[v:webcomicid]"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29990497-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="head">
<ul id="menu">
<li><a href="/comics/">Comics</a></li>
<li><a href="/comics/first">First</a></li>
<li><a href="/comics/random">Random</a></li>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/blog/">Blog</a></li>
[c:searchon]
<li><a href="/search/">Search</a></li>
[/]
[l:extrapages]
<li><a href="[v:l.link]">[v:l.title]</a></li>
[/]
[c:!hidefromhost]
<li><a href="[v:addsubscriptionlink]">Subscribe</a></li>
[/]
</ul>
<h1 id="sitetitle">[v:webcomicname]</h1>
<div id="sitedesc">[v:webcomicslogan]</div>
</div>
<div id="contentwrap">
<div id="content">
[c:bannerads]
<!-- voluntary CF support ads, you can turn these off in your webcomic settings -->
<div id="cf_ads">[v:banneradcode]</div>
[/]
<!--comment:[if we're on an extra page, show the title here:]-->
[c:isextrapage]
<div class="title">[v:pagetitle]</div>
<div class="fb-like" data-href="http://lvl30psy.thecomicseries.com/" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true"></div>
[/]
<!--layout:[content]-->
</div>
</div>
<div class="fb-like" data-href="http://lvl30psy.thecomicseries.com/" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
<div id="footer">
<a href="/rss/">RSS</a> |
[c:!hidefromhost]
<a href="[v:comicprofile]">Comic Profile</a> |
[/]
<a href="http://comicfury.com">ComicFury</a> |
<a href="#">Top</a><br />
© [v:copyrights]
</div>
</body></html>
#content ul {
text-align: left;
}
/*ie 6 display fix*/
* html * {
height:1px;
}
img,input, .clear, #navigation ul,.paddingfix{
height:auto;
}
/*end ie fix*/
body {
color:#E6D3BB; /*font color*/
background-color:#584E41; /*site background color*/
font-family:arial;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
}
a:link {
color:#8D7E6C; /*link color*/
}
a:visited {
color:#9B8B77; /*visited link color*/
}
a:hover {
color:#AB9983; /*link color when your mouse is on it*/
}
select,input {
border:1px solid #FF0000;
color:#D8BC8B;
background-color:#94815F;
border:1px solid #665942;
font-family:georgia,serif;
padding:2px;
margin:4px;
}
select {
margin:10px;
min-width:100px;
width:350px; /*IE only*/
max-width:350px; /*for some reason, this doesn't work in IE7*/
vertical-align:middle;
}
*>/**/select {
width:auto !important; /*real browsers*/
}
#cf_ads {
display:table;
margin:auto;
margin-bottom:7px;
text-align:center;
}
#head a:link {
color:#BBA25D; /*menu link color*/
}
#head a:visited {
color:#94804A; /*menu visited link color*/
}
#head a:hover {
color:#EDCD76; /*menu link color when your mouse is on it*/
}
#head {
background-color:#362F2A; /*menu background color*/
padding:4px;
padding-bottom:8px;
}
#sitetitle {
margin:0px;
margin-left:30px;
font-family:"Lucida Sans Unicode", "Lucida Grande",sans-serif; /*site title font*/
font-variant: small-caps;
letter-spacing: 2px;
color:#FFEAA4; /*site title font color*/
}
#sitedesc {
margin-left:50px;
width:70%;
font-style:italic;
}
#banner {
margin:10px;
}
#menu {
list-style:none;
margin:0px;
text-align: right;
}
#menu li {
display:inline;
margin:4px;
}
#contentwrap {
border:2px solid #362F2A; /*content box border*/
background-color:#887A69;
margin:30px;
margin-bottom:10px;
padding:2px;
min-width:660px;
}
#content {
background-color:#E0D4C4; /*content box background - only visible when the image below fails to load*/
background-image:url('http://comicfury.com/images/layouts/l2bg.png'); /*content box background image*/
color:#51452C; /*content box font color */
padding:10px;
text-align:center;
}
.title,.subtitle {
text-align: center;
font-family:"Century Gothic","AppleGothic","MgOpen Modata","Avant Garde Gothic","Gill Sans","Gill Sans MT",sans-serif;
background: #F0E6C9;
border: 1px dashed #B2A997;
border-width: 1px 0px;
color:#887A69;
padding:2px;
margin-bottom:8px;
}
.subtitle {
margin-left:50px;
margin-right:50px;
}
.subcontent {
margin-left:55px;
margin-right:55px;
}
#footer {
text-align:center;
margin-bottom:12px;
}
.titlesub {
font-size:12px;
font-style:italic;
margin-bottom:6px;
}
/*comicpage css*/
#comicimagewrap {
margin-top:0px;
margin:5px;
}
#comicimagewrap img {
border:1px solid black;
}
#votenumber {
font-size:12px;
color:#91826F;
}
#ratelink {
display:block;
}
.comment,.authornote {
margin-bottom:10px;
margin-left:30px;
margin-right:30px;
}
.commentdata {
padding:3px;
border:1px solid #94815F;
background-color:#D8BC8B;
clear:both;
}
.authordata,.authordata a:link,.authordata a:visited {
color:#645740;
font-size:17px;
margin-right:3px;
font-weight:bold;
}
.postdate {
font-style:italic;
margin-right:3px;
color:#7F6E52;
}
.reply {
margin-left:60px;
}
.commentcontrol,.commentcontrol a:link,.commentcontrol a:visited {
color:#BBA378;
}
.avatar {
float:left;
text-align:right;
margin:6px;
}
#comicnav {
padding:7px;
padding-bottom:2px;
}
#saveplace {
padding-bottom:9px;
}
.comicnavlink,.comicnavlink:link ,.comicnavlink:visited {
margin:10px;
margin-top:15px;
border:1px solid #665942;
background-color:#94815F;
color:#D8BC8B;
padding:7px;
padding-top:3px;
padding-bottom:3px;
font-size:24px;
}
.comicnavlink:hover {
color:#94815F;
background-color:#D8BC8B;
}
#permalinkbox {
text-align:left;
margin-left:30px;
margin-right:30px;
}
.permalinkcode {
font-size:11px;
}
.comments,.authornotes {
text-align:left;
}
.clear {
clear:both;
}
/*error page*/
#errormessage {
text-align:center;
}
/*blog archive*/
#blogarchive {
float:left;
width:20%;
_width:15%; /*this one is for IE*/
padding:5px;
margin:5px;
text-align:left; border:1px solid #665942;
background-color:#94815F;
color:#C6AC7F;
list-style:none;
}
#blogarchive a:link, #blogarchive a:visited {
color:#D8BC8B;
}
#blogarchive a:hover{
color:#B19A72;
}
#blogarchive li {
margin-bottom:4px;
}
#blogs {
margin:5px;
width:75%;
_width:70%; /*this one is for IE*/
float:left;
}
/*comic overview*/
#latestcomiclink {
border:0px;
margin:10px;
}
#latestcomiclink img {
border:1px solid black;
}
#latestcomictitle {
font-weight:bold;
font-size:20px;
}
text-align: left;
}
/*ie 6 display fix*/
* html * {
height:1px;
}
img,input, .clear, #navigation ul,.paddingfix{
height:auto;
}
/*end ie fix*/
body {
color:#E6D3BB; /*font color*/
background-color:#584E41; /*site background color*/
font-family:arial;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
}
a:link {
color:#8D7E6C; /*link color*/
}
a:visited {
color:#9B8B77; /*visited link color*/
}
a:hover {
color:#AB9983; /*link color when your mouse is on it*/
}
select,input {
border:1px solid #FF0000;
color:#D8BC8B;
background-color:#94815F;
border:1px solid #665942;
font-family:georgia,serif;
padding:2px;
margin:4px;
}
select {
margin:10px;
min-width:100px;
width:350px; /*IE only*/
max-width:350px; /*for some reason, this doesn't work in IE7*/
vertical-align:middle;
}
*>/**/select {
width:auto !important; /*real browsers*/
}
#cf_ads {
display:table;
margin:auto;
margin-bottom:7px;
text-align:center;
}
#head a:link {
color:#BBA25D; /*menu link color*/
}
#head a:visited {
color:#94804A; /*menu visited link color*/
}
#head a:hover {
color:#EDCD76; /*menu link color when your mouse is on it*/
}
#head {
background-color:#362F2A; /*menu background color*/
padding:4px;
padding-bottom:8px;
}
#sitetitle {
margin:0px;
margin-left:30px;
font-family:"Lucida Sans Unicode", "Lucida Grande",sans-serif; /*site title font*/
font-variant: small-caps;
letter-spacing: 2px;
color:#FFEAA4; /*site title font color*/
}
#sitedesc {
margin-left:50px;
width:70%;
font-style:italic;
}
#banner {
margin:10px;
}
#menu {
list-style:none;
margin:0px;
text-align: right;
}
#menu li {
display:inline;
margin:4px;
}
#contentwrap {
border:2px solid #362F2A; /*content box border*/
background-color:#887A69;
margin:30px;
margin-bottom:10px;
padding:2px;
min-width:660px;
}
#content {
background-color:#E0D4C4; /*content box background - only visible when the image below fails to load*/
background-image:url('http://comicfury.com/images/layouts/l2bg.png'); /*content box background image*/
color:#51452C; /*content box font color */
padding:10px;
text-align:center;
}
.title,.subtitle {
text-align: center;
font-family:"Century Gothic","AppleGothic","MgOpen Modata","Avant Garde Gothic","Gill Sans","Gill Sans MT",sans-serif;
background: #F0E6C9;
border: 1px dashed #B2A997;
border-width: 1px 0px;
color:#887A69;
padding:2px;
margin-bottom:8px;
}
.subtitle {
margin-left:50px;
margin-right:50px;
}
.subcontent {
margin-left:55px;
margin-right:55px;
}
#footer {
text-align:center;
margin-bottom:12px;
}
.titlesub {
font-size:12px;
font-style:italic;
margin-bottom:6px;
}
/*comicpage css*/
#comicimagewrap {
margin-top:0px;
margin:5px;
}
#comicimagewrap img {
border:1px solid black;
}
#votenumber {
font-size:12px;
color:#91826F;
}
#ratelink {
display:block;
}
.comment,.authornote {
margin-bottom:10px;
margin-left:30px;
margin-right:30px;
}
.commentdata {
padding:3px;
border:1px solid #94815F;
background-color:#D8BC8B;
clear:both;
}
.authordata,.authordata a:link,.authordata a:visited {
color:#645740;
font-size:17px;
margin-right:3px;
font-weight:bold;
}
.postdate {
font-style:italic;
margin-right:3px;
color:#7F6E52;
}
.reply {
margin-left:60px;
}
.commentcontrol,.commentcontrol a:link,.commentcontrol a:visited {
color:#BBA378;
}
.avatar {
float:left;
text-align:right;
margin:6px;
}
#comicnav {
padding:7px;
padding-bottom:2px;
}
#saveplace {
padding-bottom:9px;
}
.comicnavlink,.comicnavlink:link ,.comicnavlink:visited {
margin:10px;
margin-top:15px;
border:1px solid #665942;
background-color:#94815F;
color:#D8BC8B;
padding:7px;
padding-top:3px;
padding-bottom:3px;
font-size:24px;
}
.comicnavlink:hover {
color:#94815F;
background-color:#D8BC8B;
}
#permalinkbox {
text-align:left;
margin-left:30px;
margin-right:30px;
}
.permalinkcode {
font-size:11px;
}
.comments,.authornotes {
text-align:left;
}
.clear {
clear:both;
}
/*error page*/
#errormessage {
text-align:center;
}
/*blog archive*/
#blogarchive {
float:left;
width:20%;
_width:15%; /*this one is for IE*/
padding:5px;
margin:5px;
text-align:left; border:1px solid #665942;
background-color:#94815F;
color:#C6AC7F;
list-style:none;
}
#blogarchive a:link, #blogarchive a:visited {
color:#D8BC8B;
}
#blogarchive a:hover{
color:#B19A72;
}
#blogarchive li {
margin-bottom:4px;
}
#blogs {
margin:5px;
width:75%;
_width:70%; /*this one is for IE*/
float:left;
}
/*comic overview*/
#latestcomiclink {
border:0px;
margin:10px;
}
#latestcomiclink img {
border:1px solid black;
}
#latestcomictitle {
font-weight:bold;
font-size:20px;
}
_______________________
Because not all problems can be solved by sleeping at an inn. Updates Saturdays.
Because not all problems can be solved by sleeping at an inn. Updates Saturdays.
