2016-08-08 2 views
2

私はこのことを私の人生のために理解することはできません。コンテナの内側に2つのdivがあり、画面の上部に貼り付けようとしています。 1 divにはメニューがあり、もう1つのdivには2つのリンクが含まれています。コンテナは内側のページの中央に配置する必要があり、バックグラウンドは960pxにする必要があります。div1とdiv2はそのコンテナの内側にインラインで配置する必要があります。 1つのdivは左揃え、もう一方は右揃えになります。そして、すべてが上に粘着する必要があります。Ugh 2つのdivを上に貼り付けた中央のコンテナのインラインを入れてください

私は何度も近づいてきましたが、それを得ることはできません。私の現在のシステムはほとんど動作していますが、非常にリグレードされており、div2はコンテナ内でそれにとどまることはありません。ユーザー名が値に応じて拡大または縮小するとき、またはウィンドウの幅が変更されるとき、div2は背景の周りと外に移動します。

添付のものは、必要なものの例とワイヤーフレームです。これをマークする方法を誰かに教えてもらえますか?ここに私が持っているものの縮小バージョンがあります。

<div class="container"> 

<div id="sticky-top-head"> 
    <div id="block-superfish-1"> 
     <ul id="superfish-1" class="sf-menu"> 
      <li class=""><a href="#">Contribute</a> 
       <ul class="sf-hidden"><!--li items --> 
       </ul> 
      </li> 
      <li class=""><a href="#">My Lists</a> 
       <ul class="sf-hidden"><!--li items --> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

<div class="user-logout"> 
    <a id="username" class="sf-right" href="/user">Mattc</a> 
    <a id="signout" class="sf-right" href="user/logout">Sign Out</a>    
</div></div> 

CSS:

div#sticky-top-head { 
     position: fixed; 
     top: 0; 
     width: 100%; 
     z-index: 999; 
    } 
    div#sticky-top-head #block-superfish-1 { 
     width: 100%; 
     background: silver; 
     height: 21px; 
     color: #eee; 
     font-size: 12px; 
     box-shadow: 1px 1px 2px 1px #1e1e1e; 
    } 
    .sf-menu li { 
     background: silver; 
    } 
    .user-logout { 
     position: fixed; 
     right: 23%; 
     top: 0; 
     z-index: 999; 
     margin-top: 1px; 
    } 
    .user-logout a.sf-right { 
     color: white; 
     margin-right: 14px; 
    } 
    .user-logout a#signout { 
     position: absolute; 
     left: 105px; 
     top: 0; 
     width: 75px; 
    } 

Wire frame Example

+0

は、なぜあなたは、ブートストラップナビゲーションバーを使用していないことができますか?ちょっとした提案 – jaysingkar

+0

私は、ナビゲーションとDrupalビューのためのいくつかの他の要件に従ってスーパーフィッシュを使用しています。 –

+0

いくつかの適応で、これは完全に機能しました! –

答えて

1

代わりにこのような何かをしようとしないのはなぜ?それはきれいで、最小ですが、私はそれがあなたが非常にうまくいった後に達成していると思います。私は例を助けるために罫線と最大幅を追加しましたが、もちろんあなたの適応でそれらを削除することを提案します。

.container { 
 
    width: 100%; 
 
    position: fixed; 
 
    border: 1px solid red; 
 
    } 
 

 
.container .content { 
 
    width: 100%; 
 
    max-width: 500px; /* SET THIS TO WIDTH OF YOUR CONTENT */ 
 
    margin: 0 auto; 
 
    border: 1px solid blue; 
 
    } 
 

 
.container .content .nav { 
 
    float: left; 
 
} 
 

 
.container .content .logout { 
 
    float: right; 
 
    } 
 

 
.clear { 
 
    clear: both; 
 
    }
<div class="container"> 
 
    <div class="content"> 
 
     <div class="nav">Navigation goes here</div> 
 
     <div class="logout">Logout</div> 
 
     <div class="clear"></div> 
 
    </div> 
 
</div>

0

私は完全に理解していないんだけど、あなたはこのような何かを探していますか?

div#sticky-top-head { 
 
     position: fixed; 
 
     top: 0; 
 
     width: 100%; 
 
     z-index: 999; 
 
    } 
 
    div#sticky-top-head #block-superfish-1 { 
 
     width: 100%; 
 
     background: silver; 
 
     height: 21px; 
 
     color: #eee; 
 
     font-size: 12px; 
 
     box-shadow: 1px 1px 2px 1px #1e1e1e; 
 
    } 
 
    .sf-menu li { 
 
     background: silver; 
 
     display:inline-block; 
 
    } 
 
    .user-logout { 
 
     position:absolute; 
 
     right: 23%; 
 
     z-index: 999; 
 
     margin-top: 1px; 
 
     display:inline-block; 
 
    } 
 
    .user-logout a.sf-right { 
 
     color: white; 
 
     margin-right: 14px; 
 
    } 
 
    .user-logout a#signout { 
 
     position: absolute; 
 
     left: 105px; 
 
     top: 0; 
 
     width: 75px; 
 
    }
<div class="container"> 
 

 
<div id="sticky-top-head"> 
 
    <div id="block-superfish-1"> 
 
     <ul id="superfish-1" class="sf-menu"> 
 
      <li class=""><a href="#">Contribute</a> 
 
       <ul class="sf-hidden"><!--li items --> 
 
       </ul> 
 
      </li> 
 
      <li class=""><a href="#">My Lists</a> 
 
       <ul class="sf-hidden"><!--li items --> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<div class="user-logout"> 
 
    <a id="username" class="sf-right" href="/user">Mattc</a> 
 
    <a id="signout" class="sf-right" href="user/logout">Sign Out</a>    
 
</div></div>

1

.sf-menu li { 
     background: silver; 
     display = inline-block; 
    } 

display = inline-block;を追加しかし、私はこれを達成するために、ブートストラップのナビゲーションバーを使用してお勧めします。 Navbarを使用して達成するのはかなり簡単です。

div#sticky-top-head { 
 
     position: fixed; 
 
     top: 0; 
 
     width: 100%; 
 
     z-index: 999; 
 
    } 
 
    div#sticky-top-head #block-superfish-1 { 
 
     width: 100%; 
 
     background: silver;   
 
     height: 21px; 
 
     color: #eee; 
 
     font-size: 12px; 
 
     box-shadow: 1px 1px 2px 1px #1e1e1e; 
 
    } 
 
    .sf-menu li { 
 
     background: silver; 
 
     display:inline-block; 
 
    } 
 
    .user-logout { 
 
     position: fixed; 
 
     right: 23%; 
 
     top: 0; 
 
     z-index: 999; 
 
     margin-top: 1px; 
 
    } 
 
    .user-logout a.sf-right { 
 
     color: white; 
 
     margin-right: 14px; 
 
    } 
 
    .user-logout a#signout { 
 
     position: absolute; 
 
     left: 105px; 
 
     top: 0; 
 
     width: 75px; 
 
    }
<head> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<div class="container"> 
 

 
<div id="sticky-top-head"> 
 
    <div id="block-superfish-1"> 
 
     <ul id="superfish-1" class="sf-menu"> 
 
      <li class=""><a href="#">Contribute</a> 
 
       <ul class="sf-hidden"><!--li items --> 
 
       </ul> 
 
      </li> 
 
      <li class=""><a href="#">My Lists</a> 
 
       <ul class="sf-hidden"><!--li items --> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<div class="user-logout"> 
 
    <a id="username" class="sf-right" href="/user">Mattc</a> 
 
    <a id="signout" class="sf-right" href="user/logout">Sign Out</a>    
 
</div></div>

1

あなたはfloatを使用してみました:右の代わりに&フロートを残し?あなたのコンテナは固定されているので、宣言することなくコンテンツを修正する必要がありますか?

0

は、ここで使用して、最小限の例フレキシボックスです

.sticky { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 30px; 
 
    background: #ddd; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    max-width: 960px; 
 
    height: 30px; 
 
    color: white; 
 
    background: red; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.nav { 
 
    flex: 1 1 auto; 
 
    width: 100%; 
 
} 
 

 
.user { 
 
    flex: 0 1 auto; 
 
}
<div class="sticky"> 
 
    <div class="container"> 
 
     <nav class="nav">Navigation</nav> 
 
     <div class="user">User</div> 
 
    </div> 
 
</div>

それとも、check it out as a jsfiddle

関連する問題