- ベストアンサー
アメーバみたいな上部のバーを作りたい
宜しくお願いします。 http://studio.ameba.jp/ アメーバスタジオのサイトのような 最上部の画面いっぱいまで自動伸縮するバーを 作りたいのですが、どのようなHTMLになるのでしょうか？ アメーバはスタイルシート上で製作されているので、 ソースを見ても判りませんでした。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 こちらのページは、上のバーの部分のみ横幅を「100%」にして、 それ以下を「950px」のセンター揃えにしているようです。 例えば css ---- *{ padding:0; margin:0; } #bar { width: 100%; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000; float: left; } .right{float:right;} .left{float:left;} #main{ width:950px; height: 600px; margin-right: auto; margin-left: auto; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; } ---- HTML ---- <body> <div id="bar"> <div class="right">ホーム｜メニュー</div> <div class="left">ロゴ</div> </div> <div id="main"> コンテンツが入ります。 </div> </body> ---- 一応サンプルまでに。
その他の回答 (2)
- piguchan1
- ベストアンサー率75% (3/4)
先ほどの補足。 というか追加ソースを＾＾； cssの[#main]に ---- clear: both; ---- を追加を。
- pasocom
- ベストアンサー率41% (3584/8637)
フレームタグでできそうですね。 <frameset rows="20,*" frameborder=no framespacing=0> <frame name="bar" src="bar.html" marginheight=0 scrolling=no> <frame name="contents" src="contents.html"> </frameset> もちろん別途「bar.html」と「contents.html」を作っておきます。
補足
ありがとうございます。 スタイルシート+HTMLで構築しているのですが、 その場合、上記フレームタグは無効になってしまうのでしょうか？ スタイルシートで指示しないといけないのでしょうか？ 表示されなかったので… 初心者ですいません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ありがとうございます。 作成できました。 今後とも宜しくお願いします。