- 締切済み
DIVを越えて付いてくるメニューについて
エレベーターメニュー？というのでしょうか、スクロールについてくるメニューを作りたいと思うのですが上手くいかないのでアドバイスいただけないでしょうか。 一般的なエレベーターメニューは、メニューがスクロールする領域を確保してあり、そのスペース内でスクロールするのですが、今回行いたいことは、コンテンツ自体の上をまたいでスクロールするメニューを作りたく思います。 添付画像を見ていただきたいのですが。 赤色のDIVは全画面100％表示のコンテンツ、緑色は1000px程度中央配置のそれぞれコンテンツとなります。 そのコンテンツの上を、添付右上の青色のメニューがスクロールし下まで付いてくるイメージなのですが、幾つも試してみるのですが、このようにDIVコンテンツを跨いで付いてくるメニューが実現できませんでした。 このようなことは実現可能なのでしょうか？ 技術的にjavascriptかな？と思いましたのでこちらを選択いたしましたが、カテ違いでしたら申し訳ありません。 お詳しい方いらっしゃいましたら、アドバイス頂けると助かります。 よろしくお願いいたします。
- yuyukina
- お礼率66% (251/380)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- DoubtOwl
- ベストアンサー率50% (63/124)
- mikinon
- ベストアンサー率56% (612/1075)
- mikinon
- ベストアンサー率56% (612/1075)
スタイルシートで絶対値（fixed）ポジション設定してみればどうでしょう。 http://www.tagindex.com/stylesheet/box/position.html http://blog.livedoor.jp/kamikaze_cyclone/archives/19186302.html
お礼
ありがとう御座います。 ポジションだと確かに実現できるのですが、位置の固定が出来ません。 ちなみに、大本のページと赤色のDIV部分は画面いっぱいの100％指定です。 このように100％の中で決まった位置に指定しながらというのは実現不可能でしょうか？（決まった位置というのは固定ではなく、相対的に緑のDIVの隣り10ｐｘの位置とか…という意味です。） やはり、何かしらの基準となるpxなどで指定した状態で無ければ決まった位置には無理でしょうか、しかしそうするとやはりスクロールするメニューの実装が出来なくなってしまいます。 とても悩んでおります…。
関連するQ&A
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
- 透明divの下に長い余白ができてしまう
サイトを作成してるのですが透明divの下に長い余白ができてしまう【HTML・CSS】 opacityを使って背景色を透過、文字は透過しないで コンテンツを配置する方法 （http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1154742441）を 参照して組んだのですがこの透明dｉｖを閉じた後、長い空白（余白？）が 出来てしまいます。contents_area2のdivが閉じたすぐ下に ナビゲーションメニューを入れたいのですが どうすればいいのでしょうか？ 見にくいですが一番下の深緑がナビゲーションメニューです 【ＨＴＭＬ】 <!--透明ボックス--> <div id="contents"></div> <!--コンテンツ--> <div id="contents_area2"> コンテンツ～～～（フロート使ってます） <!--フロート解除--> <div id="clear"></div> </div> <!--メニュー--> <div class="nav"> <ul> <li>＃＃＃</li> <li>＃＃＃</li> <li>＃＃＃</li> </ul> </div> 【ＣＳＳ】 /* --- 透明ボックス --- */ #contents{ width: 870px; min-height:550px; margin: 5px auto 0; background-color:#FFF; opacity: 0.4; filter: alpha(opacity=40); /* IE6、IE7対応 */ -moz-opacity: 0.4; /* Firefox1.5以前対応 */ } /* --- コンテンツ --- */ #contents_area2{ position:relative; top:-550px; /*550pxできっちり合うはずなのですが5pxほどずれます */ width: 870px; min-height:550px; margin: 5px auto 0; } /* --- フロート解除 --- */ #clear { clear: both; } /* --- ナビ（メニュー） --- */ .nav{ width: 100%; background-color: #093; height: 60px; } .nav ul{ list-style:none; } .nav li{ display:inline; width:100px; font-size: 14px; font-weight: bold; color: #FFF; } DreamWeaverCS3 Windows7
- 締切済み
- CSS
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- エレベーターメニュー
サイドのメニューがスクロールにと同時にスクロールされる、エレベーターメニューのスクリプトをこちらからダウンロードさせていただきました。↓↓↓ http://www.sonicjam.co.jp/soniclabs/?p=3 いろいろなものを試したのですが、ブラウザによって表示がちがったたり、となかなかうまくいかなかったのですが、こちらからダウンロードさせていただいたものは、どのブラウザでも同じように表示され、とても簡単に設置でき、とても使いやすくて気に入っています。 ただひとつ、一番下まで行くと、フッターの上にメニューがかぶってしまいます。好きな位置で停止できるように、編集したいのですがJavascriptがまったく分かりません・・・。どなたかどこをどう編集したら好きな位置で止められるか分かる方がいらっしゃいましたら、ご教授していただけませんでしょうか。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 ●メニュー1-1 ●メニュー1-2 ●メニュー1-3 ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> <div class="tree_sub"> <ul> <li class="left">●メニュー1-1</li> <li>●メニュー1-2</li> </ul> <ul> <li class="left">●メニュー1-3</li> <li>●メニュー1-4</li> </ul> </div> </div> <div class="tree"> <a href="#">○メニュー2</a> </div> [css] div.tree { border-bottom:1px solid #000000; width:365px; } div.tree_sub ul li { float:left; } div.tree_sub ul li.left { width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
- 大divの中に小divを配置して回り込ませる方法。
大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか？ ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 左メニューをCSSで固定したい
左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。 固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。 これをフレームを使わずに作ることはできないでしょうか？ できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu ■ main ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる ・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール 【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }
- ベストアンサー
- HTML
- ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。 一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、 ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、 ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。 現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？ １週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。
- ベストアンサー
- HTML
- div の配置指定ができないです
.menu { background-color: mistyrose; background-position: 0px 500px; width: 230px; font-size: 14px; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <div class="menu"> ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p>ＨＯＭＥ<p> </div> このスタイルシートなのですが、色・幅・文字サイズはちゃんと 表示されますが、どういうわけか位置が変化しません。 0px 0px としても左上にはくっつかず、center になります。 どこか間違っていますでしょうか？よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- JavaScriptでのDIV間のスクロール
JavaScriptの初心者です。 JavaScriptの実装方法について教えてください。 以下のようなhtmlがある場合に、JavaScriptの関数呼び出しによってbox間のスクロールをさせたいです。 例：yyyyyyyのboxで関数を呼ぶと、zzzzzzzzzzのboxまでスクロールする。 <div class="box">xxxxxxxxxxxxxxxxxxxxxxx</div> <div class="box">yyyyyyyyyyyyyyyyyyyyyyy</div> <div class="box">zzzzzzzzzzzzzzzzzzzzzzzzzz</div> class名が同一である場合にこのような処理を行うためには、各boxの座標を取得しておき、現在表示しているboxの上下のtop座標に移動させるような関数を実装すれば良いと考えています。 ですが、どのような実装をすれば良いか、試行錯誤していますがうまくいきません。 どなたかアドバイスをいただけるととてもうれしいです。
- 締切済み
- JavaScript
お礼
有難う御座います。 ご指摘の方法ですが、添付画像の通り赤い枠のDIVは常に画面いっぱいの100％指定を行いたいので、何かしらの親要素で囲んでしまうと赤枠が親要素の範囲でしかいっぱいの表示にならないので困っています。 <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> <div class="A">画面いっぱい100％</div> <div class="B">500px margin:0 auto;</div> … こんな感じです。行いたいのは<div class="B">の横辺りに固定で下までスクロールするメニューを設置したい。 コンテンツ部分には赤色のDIV100％と緑色のピクセル指定の要素が交互に入り混じっているので、それらを特定の幅で固定する親要素という物を指定できず困っております。伝わりますでしょうか…。 やはり何かしらの基準となるピクセルなどの指定がある要素が不可欠でしょうか…。