私は頻繁にGOODと呼ばれるウェブサイトと私は特に1つの美的スタイルが大好きです。ナビゲーションバーがウェブサイトの背景をどのように色を伸ばしているかを示します。あなたがサイトにアクセスすると、私の言いたいことが分かります。CSSスタイルはGOODと似ていますか?
CSSでは、これを可能な限り簡単に複製できますか?私はz-index/margin/floatを使っていろいろ試してきましたが、それは起こっていません。
私は頻繁にGOODと呼ばれるウェブサイトと私は特に1つの美的スタイルが大好きです。ナビゲーションバーがウェブサイトの背景をどのように色を伸ばしているかを示します。あなたがサイトにアクセスすると、私の言いたいことが分かります。CSSスタイルはGOODと似ていますか?
CSSでは、これを可能な限り簡単に複製できますか?私はz-index/margin/floatを使っていろいろ試してきましたが、それは起こっていません。
メニューにはdiv(position'd absolute)をメニューに入れて、実際の内容を上にして別のdivを入れてください。
リトル例:
<html>
<body>
<div style="position: absolute; top:200px; left:0px; width:100%">The menu here, at A 100% width</div>
<div style="position: absolute; top:0px; left: 0px;">The content here.</div>
</body>
</html>
が動作するはずです!
希望に役立ちます。
問題は今は他のすべての "背後にある"ことではなく、Z-インデックスは私のために働いていないということです。 –
しかし、Z-インデックスは、絶対位置または相対位置または固定位置のdivがある場合にのみ機能します。上の例ではうまくいくはずです! –
そのすべてについての位置:絶対。これらのリンクをすべて保持するnavコンテナには、このCSSプロパティが与えられ、ページの通常のフローからそれを削除します。それはそれが置かれる場所にそれを置くために上:165pxを持っています。それぞれのリンクにはdisplay:blockプロパティが与えられています。これは親を塗りつぶすことを意味します。この場合、この場合は幅の100%です。 100%幅のリンクの内側にスパンタグを使用してテキストを設定します。
なぜあなたはそのサイトからHTMLとCSSを受け取り、関連性のないものをすべて取り除かないのですか?残っているものは、必要なコードになります。 –
はい、ChromeのDOMインスペクタやCSSEditなどのツールを使用して、ページマークアップの関連部分を探します。 – fluffy
@Oli、素晴らしいアイデア。 –