2

私はCSSを独学で学んでおり、これまでの知識でサイトを作ってみることにしました. そこで、Web ブラウザの位置に追従する固定ナビゲーション バーを作成することにしましたが、問題が発生しました。なんらかの理由で、ブラウザ ウィンドウのサイズを変更すると、追加したリンクの 1 つがナビゲーション バー内に表示されません。誰かが私のコードを見ることができますか? 初挑戦なので雑なところは無視してください。

これが私のHTMLです。「secondnavlinks」div id は、ナビゲーション バー内にとどまらないものです。

<div id="nav">

<div id="secondnavlinks">
<ul>
<li><a href="#">Ambient Bookmarklet</a></li>
</ul>
</div>


<div id="class1">
<ul>
<li><a href="#">Saved</a></li>
<li><a href="#">Folders</a></li>
</ul>
</div>

<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>



</div>

CSS は次のとおりです。

#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}

（「class1」divをスキップ）

#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}



#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}

#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}
4

3 に答える 3

1

最初は、これは固定要素の内側の配置であるように見えました。これを少し調べてみると、犯人を見つけたと思います...あなたの問題は「左：950px;」のようです。-この値はブラウザに依存せず、結果を変化させたり、特定の幅で要素をポップアウトしたりします。

Libinが述べたように、固定値の代わりにリレーショナル値を使用して、FluidLayoutの設計を検討する必要があります。したがって、ブラウザを再スケールすると、すべてが正しく設定されます。

メディアクエリと、％やEmsなどのリレーショナル値の使用について調べ始めます。

px値をemsなどに変換するための便利なリソースは次のとおりです。http：//pxtoem.com/

また、このテーマに関するチュートリアル/コースを受講したい場合は、過去に役立った以下のリンクをいくつか含めました。

また、-絶対および相対を使用すると、固定ナビゲーションバー内で正常にポップしないという証拠があります：http： //jsfiddle.net/JQT7u/2/

幸運を！

于 2012-09-24T07:09:24.713 に答える
1

Web ブラウザーの位置に追従する固定ナビゲーション バーを作成しようとしている場合は、%値の代わりにpx値を使用する必要があります。

このデモをチェック

そのデモでは、値を % に変更し、絶対位置を削除しました。

これがあなたがしようとしていることを願っています。

于 2012-09-24T06:07:23.120 に答える
0

このリンクを確認してください

あなたはこのようにしたいですか？

あなたの質問からは、デザインがどうあるべきかは明らかではありません。

ところで、あなたが内側の div を与えていたので、リンクが出てきましたposition:absolute。そのため、リンクはメインの div との関係を失っていましたNav。

CSS でのポジショニングの仕組みについて詳しく知りたい場合は、このリンクを参照してください。

于 2012-09-24T06:07:59.327 に答える