2016-10-24 37 views
0

本当にやりたいことは、一度更新してすべてのページが自動的に新しいフォームを取得できる単純なhtml専用(CSS、多分javascript、PHPなどはありません)のメニューバーを持っていることです。1つのWebページを別のWebページに表示し、他のページ要素を「オーバーレイ」させるにはどうすればよいですか?

私はCSSでhtmlを使って簡単にこれをやっています。私は基本的にのみ、メニューバーの小さな「Webページ」を作成し、私はバーを表示する場所、次を配置することによって、他のページに表示しました:

<object data=menu.html width=100%> 
<embed src="menu.html"></embed> 
ERROR: Unable to display menu bar! 
</object> 

は素晴らしい作品! 1つの問題のみ:既に表示されているページのコンテンツをオーバーレイするのではなく、スクロールバーなどを導入します。ブー!

"style=overflow: visible;" 

がしようとすると、これを克服するために、それが機能しません:

私はこれを望んで一人ですることはできません考え出す、私のような様々なCSSの構文を追加しようとしました。私はこれが追加されたことを望んでいるドキュメントを見てきました...それはWebページ世界の既存のモデルに単純な追加であるべきであるようですね!たとえば、ウィンドウを高さにすると、その部分はポータルのように表示され、スクロールバーがなければ「オーバーフロー」が表示されます。ダー!しかし、私はそれを欲しがっていると思う。

また、以下のコメントで指摘されているように、iframeもあります。だから私は試しました:

<iframe src="menu.html" height=45px width=100% frameborder=0 
scrolling=no style="overflow: visible;"> 
<p>Oops! Your browser does not support iframes.</p></iframe> 

これは、上記の "オブジェクト"とまったく同じでした。

代わりに、私は多分、グリッドビューを作成して、私のページをとにかくタイル張りにすることを考えていました。しかし、これが成功への道だとはっきりとは分かりません。

解決策をとる以外はlike those suggested here,私にはこれを実現する他の方法はありますか?

これらの提案を避けるためには、多くの理由があることに注意してください。

+0

iframeタグを使用することを意味します。オブジェクト/埋め込みコードではありません。 –

+0

@MatthewLevy実際には、うまくいけば!少なくともこの例では、object/embedとまったく同じ問題/動作をしています。 ...ドキュメントではスタイルをサポートしていますが、少なくとも私のバージョンのFirefoxでは、スタイルが「オーバーフロー:可視」になっています動作しません。 –

+0

True iframeには「オーバーフロー:可視」の概念がありません。しかし、高さと幅のプロパティを設定することができます(これは、あなたのユースケースを考えれば分かります)。また、frameborderプロパティを0に設定することもできます。しかし、@BWilsonは2番目の方法です.Webアプリケーションの設計原則にかなり違反するようなことをしようとしています。 –

答えて

0

まだコメントするのに十分な担当者がいないので、ここに行きます。あなたの質問は何度も聞かれました。基本的には、JavaScriptやjQueryを使わずに、HTMLやCSSだけで動作させようとしていますが、動的メニューを作成したいとします。

私は非常に、これを達成するためにスクリプト言語を使用することを強くお勧めします。 PHPは-link here-としてis Javascriptと非常によく適合しています。他のすべてが等しい場合は、bootstrapを使用して、非常に軽量のHTMLと事前作成されたCSSを使用して実際にHTMLに入力する時間を短縮するサンプルを作成することもできます。

あなたがmyspaceだったホラーを思い出したのなら、それはこのすべてがもたらす厄介な混乱でした。ある要素を別の要素に貼り付け、完全に機能することを期待します。そのため、ウィンドウインウィンドウを作成する例があります。あなたは何をしているかの外観を減らすために多くのことができますが、第3のスクリプト言語を使用しない純粋なHTML-CSSは、コンテンツを動的に含めるためのものではありません(実際に動作させる方法はありますが、非常にエレガントなソリューションではありません)。

問題の原則に沿って開発者の作業を常に守ろうとすると、ソリューションに関する豊富な情報が得られます。お役に立てれば。

関連する問題