0

您好，我正在尝试让我的 AddThis 智能图层共享按钮转到页面的左侧，但是正如您在www.thetotempole.ca看到的那样，它浮动了一点，并且没有完全接触到页面的左侧. 如果有什么我能做的，请告诉我。谢谢！！

HTML：

<!doctype html>
<head>
<title>The Totem Pole News</title>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-45342007-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>
<meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news.">
<link href="thecss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<link rel="icon" type="image/ico" href="images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</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="socialmediaplugins">
<div id="facebook"><div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></div>
<div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
<g:plusone></g:plusone>
</div>
<div id="container">
<div id="contentbox" align="Center">
<a href="index.html"><div id="banner" align="Center">
</div></a>
<div id="navbar">
  <p><a href="index.html"><img src="images/home.png" width="65" height="54" alt="picture of a house to relate to the home page (content)" style="position: absolute; left: 23px; top: 16px; width: 57px; height: 48px;"><span style="position: absolute; left: 24px; z-index:2; top: 71px; height: 23px;">Content</span></a>
    <a href="#"><img src="images/eagleicon.gif" width="73" height="39" alt="An Eagle icon for the News section of the Totem Pole" style="position: absolute; left: 111px; top: 28px;"><span style="position: absolute; z-index: 2; left: 127px; top: 72px;">News</span></a>
    <a href="#"><img src="images/owlicon.gif" width="81" height="61" alt="An Owl icon for the Music section of the totem pole" style="position: absolute; left: 210px; top: 11px;"><span style="position: absolute; z-index:2; left: 226px; top: 73px;"><strong>Music</strong></span></a><a href="movies.html"><img src="images/wolficon.gif" width="88" height="54" alt="A Wolf icon for the Movies section of the totem pole" style="position: absolute; left: 320px; top: 15px;"><span style="position: absolute; left: 336px; top: 72px; z-index:2;"><strong>Movies</strong></span></a>
    <a href="#"><img src="images/hareimage.gif" width="60" height="56" alt="A Hare icon for Video Game section of the Totem Pole" style="position: absolute; left: 441px; top: 13px;"><span style="position: absolute; z-index:2; left: 428px; top: 73px;"><strong>Video Games</strong></span></a>
    <a href="#"><img src="images/bearicon.gif" width="91" height="57" alt="A bear icon for the Health section of The Totem Pole" style="position: absolute; left: 551px; top: 13px;"><span style="position: absolute; left: 580px; top: 72px; z-index:2;">Health</span></a></p>
</div>
<!-- End of Navbar -->

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5279b96309e7df24"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

<!--Nav Bar 2-->
<div id="navbar2">
<a href="#">About Us</a> <a href="#">Feedback</a> <a href="#">Subscribe</a>
</div>
<!-- Atomz HTML for Search -->
<div id="searchbar">
<form method="get" action="http://search.atomz.com/search/">
  <input id="searchbox" size="13" name="sp_q" value="Search..." onFocus="if (this.value == 'Search...') {this.value=''}">
  <input class="css_btn_class" type="submit" value="Search">
  <input type="hidden" name="sp_a" value="sp1005092e">
  <input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>
</div>
<img src="images/eagle.png" id="eagle" width="1144" height="325" alt="News content box">
<img src="images/musicbox.png" id="owl" width="1134" height="325" alt="Music content box">
<img src="images/wolf.png" id="wolf" width="1184" height="325" alt="Movies content box">
<img src="images/hare.png" id="hare" width="1115" height="325" alt="Video game content box">
<img src="images/bear.png" id="bear" width="1172" height="325" alt="Health content box">

<span style="position: absolute; left: 0px; top: 225px; width: 1000px; border-bottom: 2px black double; height: 58px;"><h1 style="font-weight: normal; font-size:28px"><em>Newest Articles</em></h1></span>

<!--Footer Div -->
<center><div id="footer"><a href="#">Sitemap</a> <a href="#">About Us</a> <a href="#">Feedback</a></div></center>

<!-- This is the end of the contentbox --></div>
<!-- This is the end of the container div -->
</div>
</body>
</html>

CSS：

html { 
  background: url(images/pine.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale')";
}
body { 
    margin-bottom:0px;
    font-family: Verdana, Geneva, sans-serif;
}

a {
    outline : none;
    border: none;
}

a:hover {
    color: #0FC;
}

#container {
    width: 1000px;
    height:1924px;
    position:relative;
    margin-right: auto;
    margin-left: auto;
    z-index:1;
    margin-bottom: 50px;
}

#facebook {
    position:fixed;
    right:100px;
    z-index:15;
}

#twitter {
    position:fixed;
    z-index:16;
    right:120px;
}
#google {
    position:fixed;
    top:7px;
    right: 135px;
}

#socialmediaplugins {
    text-align: right;
    position: fixed;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
    margin: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index:14;
}

#searchbox {
    background-color:#01bff6;
    border-radius:4px;
}

#searchbox:hover {
    background-color:#76b618;
    border-radius:4px;
}

#searchbox:active {
    background-color:#01bff6;
    border-radius:4px;
}

#contentbox {
    background-color:black;
    background-image:url(images/wooden.jpg);
    width: 1000px;
    margin-bottom:50px;
    height: 1924px;
 box-shadow:2px 2px 10px 10px #060606;
 -webkit-box-shadow:2px 2px 10px 10px #060606;
 -moz-box-shadow:2px 2px 10px 10px #060606;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2);

}

#banner {
    background-image:url(images/totempolebanner.gif);
    position:absolute;
    top:25px;
    width:768px;
    height:120px;
    left:116px;
}

#navbar {
    float: left;
    position: absolute;
    top: 146px;
    left: 76px;
    width: 844px;
    height: 158px;
    font-weight:bold;
}

#navbar a { color:#0C6;
    font-size: 13px;

}

#navbar a:hover { color:#0F9;
    font-size: 13px;
}

#navbar2 a:hover { color:#0F9;
}

#navbar2 a{
    text-decoration:none;
    color:#0C6;
}
#navbar2 {
    position: absolute;
    top: 148px;
    left: 664px;
    width: 273px;
    height: 24px;
    font-size: 11px;
}

#searchbar {
    position: absolute;
    top: 23px;
    left: 885px;
    width: 118px;
    height: 69px;
}

.css_btn_class {
    font-size:9px;
    position: relative;
    top:0px;
    right:4px;
    width:90px;
    height:25px;
    font-family:Verdana;
    font-weight:normal;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    border:1px solid #35d914;
    padding:7px 24px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) );
    background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% );
    background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% );
    background-color:#ff9d00;
    color:#ff0000;
    display:inline-block;
    text-shadow:0px 0px 1px #117cff;
    -webkit-box-shadow: 0px 0px 0px 0px #117cff;
    -moz-box-shadow: 0px 0px 0px 0px #117cff;
    box-shadow: 0px 0px 0px 0px #117cff;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}.css_btn_class:hover {
    width:90px;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) );
    background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% );
    background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% );
    background-color:#ffe711;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}.css_btn_class:active {
    position:relative;
    width:90px;
    top:1px;
    background-image: url(images/unnamed.gif);
    background-repeat:no-repeat;
    background-position:right; 
}
/* This css button was generated by css-button-generator.com */

img {border:none;}
#eagle {
    position:relative;
    right: 144px;
    top:299px;
}
#owl {
    top:624px;
    position:absolute;
    left:0px;
        }

#wolf { 
    top:949px;
    position:absolute;
    right:0px;
        }
#hare {
    top:1274px;
    position:absolute;
    left:0px;
        }
#bear {
    top:1599px;
    position:absolute;
    right:0px;
        }
#footer {
    position: absolute;
    left: 393px;
    top: 1941px;
    width: 251px;
    color: #0F9;
}
#footer a {
    color: #0f9;
}
4

2 回答 2

1

修改layers020.css中的这段代码左边：-144px !important; 在 CSS 中

.at-vertical-menu {
    font-family: "helvetica neue",arial,helvetica,sans-serif;
    font-size: 16px;
    left: -144px !important;
    position: fixed;
    top: 20%;
    z-index: 100020;
}

或者

在您的 html 中添加这一行

<style>
.at-vertical-menu {
        left: -144px !important;
     }

</style>
于 2013-11-07T04:41:22.903 回答
0

呃，你改变了共享图标的显示方式。

如果您看到 layers021.css，第 1 行：

.atss {
    position: fixed;
    top: 20%;
    width: 48px;
    z-index: 100020;
    background: none; }

您只需添加left: 0;到该规则中，它就会在左边缘显示齐平。

----如果你回到使用旧的layers020.css ----

在 layers020.css 的第 1 行，您有：

.at-vertical-menu a .aticon { position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 32px;
    height: 32px; }

这有一个right: 8px;属性集。因为它假设整个图标周围有 8px 出血，所以你所要做的就是将这个right值推到一个额外的8px跨度，所以16px右边有0px出血，左边有出血。所以：

right: 16px;

解决您的问题:)

于 2013-11-07T04:33:58.963 回答