-2

問題に関するヘルプを探しています<div>。ヘッダー セクションには、ロゴ、facebook (ボタン)、およびメニューがあります。Facebookのボタンとロゴは正しい場所にありますが、正しい場所にメニューを表示することができません。ブラウザの右側にくっついて、右側にしたいです。

誰かが私を助けてくれることを願っています。

<div id="topContainer">
    <div id="centerContainer">
        <a href="index.html" class="logo fl"><img src="images/logoMAIN.png" alt="Grand Cafe de Reebok" /></a>

        <div id="social">
            <a href="https://www.facebook.com/GrandCafeDeReebok?fref=ts"><img src="images/Facebook.png" /></a>
        </div> <!-- End social -->          

        <div id="navigation">
            <ul class="nav">
                <li class="active"><a href="index.html"><span>de Reebok</span></a></li>
                <li><a href="menu.html"><span>Menu</span></a></li>
                <li><a href="reserveer.html"><span>Reserveer</span></a></li>
                <li><a href="openingstijden.html"><span>Openingstijden</span></a></li>
                <li><a href="arrangement.html"><span>Arrangement</span></a></li>
                <li><a href="fotos.html"><span>Foto's</span></a></li>
            </ul> 
        </div> <!-- End navigation -->
    </div> <!-- End centerContainer -->
</div> <!-- End topContainer -->

CSS ファイル:

#centerContainer {
width: 100%;
height: 280px;
margin: 0 auto;}

.logo {
float: left; 
margin: 58px 36px 33px 85px;
display: block;
position: relative;
height: 200px;
width: 180px;}

#social {
float: right;
margin: 20px 30px 0 0;}

#navigation ul li {
text-decoration: none;
text-transform: uppercase;
display: inline;
font-family: Arial;
font-size: 16px; 
text-align: center;}

#navigation ul li a {
margin-right: 18px;
line-height: 60px;
margin-left: 3px;}

#navigation ul li a:hover {
color: #fff;}

#navigation ul li.active a {
color: #fff;}

#navigation {
float: right;
margin: 90px 0px 77px 0px;
background-color: rgba(0,0,0,0.41);
width: 680px; 
padding: 15px;
height: 70px;
position: absolute;
clear: both;}

#mainContainer {
background-image: url(../images/mainContainer-bg.png);
padding-top: 20px;
margin-top: 20px;
height: 462px;
-webkit-box-shadow: 0 12px 40px -6px black;
   -moz-box-shadow: 0 12px 40px -6px black;
        box-shadow: 0 12px 40px -6px black;
position: relative;
overflow: hidden;
width: 100%;}
4

2 に答える 2

0

以下のスタイルを試してください：

 #navigation{
    position:fixed;
    right:0px;
    top:0px;
    height:100%;
    width:100px; /* According to your needs*/
 }

ナビゲーションは常に画面の右側に固定されるようになりました

于 2013-09-19T10:45:57.160 に答える