0

1140 CSS Gridに基づいて Web サイトを構築しています。これは、最大幅が 1140px に設定された完全に流動的なグリッドです。このレイヤーの上にナビゲーション バーになるものを配置しました。このレイヤーは、各側でさらに 5 ピクセル拡張し (みんなのお気に入りの「リボン」デザイン効果のために)、中央の 1140px (現在は 1150px のナビゲーション) の幅を調整したいと考えています。その下にグリッドがあります。しかし、これまでに試したことはすべてうまくいきませんでした。誰にもアイデアはありますか？

HTML:

<div class="float">
<div class="nav">
    <div class="navleft">
    <img src="images/banneredgel.png"/>
    </div>
    <div class="navbar">
    </div>
    <div class="navright">
    <img src="images/banneredger.png"/>
    </div>
</div>
</div>

CSS:

.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}

.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.navleft {
float: left;
width: 5px;
height: 43px;
}

.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}

.navright {
float: left;
width: 5px;
height: 43px;
}
4

2 に答える 2

1

あなたの答えでJSフィドルを作成しました。 http://jsfiddle.net/thinkingsites/Vz4TC/3/

あなたの問題は、幅 100% では横の 2 ビットが許可されないため、ページが縮小すると .nav の子がラップされることです

私がしたことは、それらを .nav に絶対に配置し、.navbar に左右のマージンを与えて、リボンを押しのける幅:100% に設定せずにリボンを許可することでした。また、.nav の最大幅を 800 に設定しましたが、nav はそれを超えて拡大することはありません。

于 2012-05-22T19:32:18.313 に答える
0

Thinking Sites が提供するコードを使用して、幅がブラウザーよりも小さいときに中央にホバーし (エッジのリボン)、バーに変わるものを取得するために、さらに多くの行を変更することができました。サイトは、より小さなブラウザー幅に流動的に調整されます。

HTML:

<div class="float">

        <div class="navleft">
        <img src="images/banneredgel.png">
        </div>

        <div class="navbar">
        <img src="images/logo.png" class="logo"/>
        </div>

        <div class="navright">
        <img src="images/banneredger.png">
        </div>
</div>

CSS:

.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}

.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}

.navright,.navleft { 
width: 5px; 
height: 43px;
position: absolute;
top: 0px;
}

.navleft{
left: -5px;
}

.navright{
right: -5px;
}
于 2012-05-23T16:51:03.140 に答える