1

こんにちは。すべてのソーシャル メディア ウィジェットを Web サイトの上部に配置して div ボックスを作成し、画面全体を横切って右にフロートし、ページの最上部にとどまる方法を探しています。サイトのリンクは次のとおりです: totempole.ca

ここに私のHTMLがあります:

<!doctype html>
<head>
<title>The Totem Pole News</title>
<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>
<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>
</head>
<body>
<div id="socialmediaplugins">
<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>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<g:plusone></g:plusone>
</div>
<div id="container">
<div id="banner">
</div>
<div id="navbar">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 3</a>
</div>
<div id="navbar2">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 3</a>
</div>
<!-- This is the end of the container div -->
</div>
</body>
</html>

そして、ここに私のCSSがあります:

    #container {
        width: 960px;
        height:150px;
        position:relative;
        margin-right: auto;
        margin-left: auto;
    }

    #socialmediaplugins {
        float:right;
        position:fixed;
        width:100%
        height:100px;
        background-color:#999;
        margin:0;
    }

    #banner {
        background-image:url(images/totempolebanner.gif);
        position:absolute;
        top:20px;
        width:960px;
        height:150px;
    }

    #navbar {
        float:left;
        position:absolute;
        top: 170px;

    }

    #navbar2 {
        float:right;
        position: relative;
        top:170px;
}

ありがとうございました！

4

1 に答える 1

1

「左: 0」、「上: 0」、および一番上に配置する場合は「上: 0」を使用します。

#socialmediaplugins {
    text-align: right;
    position: fixed;
    background-color: rgb(153, 153, 153);
    margin: 0px;
    top: 0;
    left: 0;
    right: 0;
}
于 2013-10-28T22:20:44.110 に答える