- 締切済み
cssでプルダウンを追加したい♪
ウェブサイト作成で質問がございます。 http://www.sl-success.com/hallo-casino/ 上記のサイトの上部のメニューバーにプルダウンできるメニュー項目を追加したいのですが、cssを追加修正しましたら、レイアウトが崩れてしまい、うまく修正できません。 プルダウンを追加したいソース部分は以下のところです。 <tr> <td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a><a href="top.html">gaming guides</a><a href="contact/contact-index.html" class="last">Contact Us</a></div></td> </tr> CSSは以下のように設定しております。 #menu{ background:#1D3C55; border-bottom:#345065 1px solid;} #menu a{ color:#E9F1F9; text-transform:uppercase; border-left:#001F39 1px solid; border-right:#345065 1px solid; padding:20px 25px 14px 25px; line-height:42px; } #menu a:hover, #menu a.active{ background:#001F39; color:#E9F1F9; } #menu a.frist{ border-left:none;} #menu a.last{ border-right:none;} CSSあるいは、JAVAを使ってどのように修正をつければ宜しいか是非、ご教授お願いします。 下のURLにhtmlとcssのファイルをアップしております。 http://www.sl-success.com/hallo-casino/ask.rar
- jamberapa
- お礼率40% (2/5)
- HTML
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
参考例が特別なレイアウトならまだしもごく普通のものなので（ただしtableレイアウトですが）、それを参考になさる理由がわかりません。 一般的なプルダウンメニューのサンプルを参考に作成して、カラーなどはご自分の好きなように変更したほうが早そうに思われます。 大抵のサンプルではリストを利用したマークアップをしていると思いますが、そのほうがメニューの構造と合致しているので、合理的なマークアップと考えられます。 ぐぐってみればサンプルはたくさん見つかると思いますが、ごく一例 （内容は見ていません） http://www.justsoftwaresolutions.co.uk/articles/sample_menu.html http://css-eblog.com/csstechnique/css-8.html http://c-brains.jp/blog/wsg/08/06/05-155929.php http://www.stylish-style.com/csstec/ultimate/css-roll-4.html javascriptを利用したプルダウンのサンプルなら、それこそもっとたくさんあるでしょうし、ライブラリ化されたものもたくさんあります。 こちらも内容は見ていませんが・・・ http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/ http://www.strollnet.com/sample/javascript/jquery/sample13/ http://www.css-lecture.com/template/2009/0622/
関連するQ&A
- テーブルの中のプルダウンがフロートできません
恐れ入ります、 現在、こちらのサイトを手がけております。 http://www.sl-success.com/hallo-casino/index.html このサイトの上部のメニューバーにプルダウンメニューを組み込みたくて、修正をしてみましたがレイアウトが崩れてしまいます。 http://www.sl-success.com/hallo-casino/index-testjefri13-2.html 上記のようにテーブルメニューの中に、ulを組み込んでみました。このプルダウンしたいULをメニューの中に入れたいのですが、うまくフロートできません。 こちらの該当しているソースを書きます。 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a> <div class="menune"> <ul> <li> <a href="review.html">bonus ne</a> <ul> <li><a href="#"> jepang1</a> </li> <li><a href="#"> jepang2</a> </li> <li><a href="#"> jepang33</a> </li> </ul> </li> </ul> </div> <a href="contact/contact-index.html" class="last">Contact Us</a></div></td> </tr> 対応しているcssは以下の通りです。 .menune{ background:#ff0000; /*------#1d3c55----------*/ border-bottom:#345065 1px solid; margin-left:auto; margin-right:auto; width:auto; height:auto; text-align:center; } .menune ul{ list-style:none; } .menune li{ float:left; } .menune li a{ background:#1d3c55; color:#cccccc; display:block; text-align:center; text-decoration:none; text-transform:uppercase; border-left:#001F39 1px solid; border-right:#345065 1px solid; padding:20px 25px 14px 25px; } .menune li a:hover, .menune ul li:hover a{ background:#001F39; color:#e9f1f9; /*---e9f1f9-----*/ text-decoration:none; } .menune li ul{ background:none; display:none; padding:0px; margin:0px; border:0px; position:absolute; z-index:200; } .menune li:hover ul{ display:block; } .menune li li { display:block; float:none; margin:0px; padding:0px; height:70px; width:135px; } 上記のサイトをうまく修正できればありがたいのですが、もしお分かりであればご教授お願い致します。 失礼します。
- 締切済み
- HTML
- CSSについての質問
現在、CSSを使用して、ホームページを制作しています。 a:hoverを使って、メニューを作成しようとしているのですが、 http://www5.atpages.jp/ri19960914/menu.png ↑のようになってしまいます。（URLは、必ず直接入力、またはコピペしてください） イメージとしては、「BBS」を「TOP」と同じ高さにしたいのですが・・・（↓の画像のように） http://www5.atpages.jp/ri19960914/souzou.png メニュー周辺の、CSSとHTMLです。 --------------CSS------------------------- #head { background:url("/images/imgX.png") repeat-x; } #head .menu { padding:100px 0px; } #head .menu li a { padding:40px 40px; border-left:1px solid #0ff; border-right:1px solid #0ff; color:#000; float:left; } #head .menu li a:hover { padding:40px 40px; border-left:1px solid #0ff; border-right:1px solid #0ff; color:#000; background-color:#0ff; } ----------HTML----------- <div id="head"> <div class="menu"> <li><a href="/">TOP</a></li><li><a href="/bbs/">BBS</a></li> </div> ご指導いただければ、幸いです。 お願いします。
- ベストアンサー
- CSS
- オンマウスにしたときのborder-colorの指定（CSS）
スタイルシートで立体的に見せるボタンを作成しています。 .menu05 ul { list-style-type: none; line-height: 170%; } .menu05 li { border-top: solid 2px #ffffff; border-right: solid 2px #c0c0c0; border-bottom: solid 2px #c0c0c0; border-left: solid 2px #ffffff; display: block; float: left; } .menu05 a:hover { border-top: solid 2px #c0c0c0; border-right: solid 2px #c6c6c6; border-bottom: solid 2px #c6c6c6; border-left: solid 2px #c0c0c0; color:#ff0000; display: block; } で、 HTMLの記述は、 <div class="menu05"> <ul><li><a href="#">ご案内</a> <li><a href="#">プラン</a> <li><a href="#">プレゼント</a></ul> </div> です。 オンマウスにしてもborder-colorが変わりませんが、どこを修正したらよいでしょうか？
- ベストアンサー
- HTML
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- ボタンのコード ｃｓｓ記述バグ？
以下のボタンのコードに関してですが、ブラウザー上でマウスのポインターをボタンの上におくと、上のボタンと下のボタンとの距離が狭くなりボタンとボタンがくっついてしまいます。 本当は、マウスのポインターをボタンの上におくとボタンの距離を一定に保ちボーダーの幅だけかえたいのですが、どうすればよいでしょうか？ 多分、以下のコードにバグがあると思うのですが、分かりません。 どなたか、お分かりの方がおられましたら、教えて下さい。 よろしくお願いします。 キャサリン 以下コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- .test a { display:block; text-decoration:none; background-color:#00FF00; color:#000000; font-size:12px; margin-top:0px; margin-bottom:20px; padding-top:10px; padding-bottom:10px; padding-left:5px; border-top:solid 2px #000000; border-bottom:solid 5px #000000; border-left:solid 2px #000000; border-right:solid 5px #000000; width:600px; } .test a:hover { border-top:solid 5px #000000; border-bottom:solid 2px #000000; border-left:solid 5px #000000; border-right:solid 2px #000000; } --> </style> </head> <body> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> <div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div> </body> </html>
- ベストアンサー
- HTML
- [CSS3] last-childについて
html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }
- ベストアンサー
- CSS
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- CSSの書き方について
Jquery のポップアッププラグインであるPopboxを使おうとしています。 http://gristmill.github.io/jquery-popbox/ 実装は出来たのですが、下記の改造で戸惑っています。 ●デフォルトでは、クリックしたボタンから吹き出しの形で、ボタンより下にポップアップが表示されます。 ●当方の希望 クリックしたボタンの場所にかかわらず、スマートフォンの表示枠の一番上から表示させたいです。 CSSのどこを弄ると当方の希望の状況になるでしょうか? よろしくお願いいたします。 <style> .popbox { margin:0px auto; text-align:center; position:relative; } .collapse { position:static; } .open { background:#DDD; border:solid 1px #FFF; border-radius:5px; box-shadow: 0px 0px 5px #CCC; background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8)); background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8); background:linear-gradient(top,#f4f4f4,#e8e8e8); padding:8px; } .box { width:280px; display:block; display:none; background:#FFF; border:solid 1px #BBBBBB; border-radius:5px; box-shadow:0px 0px 15px #999; position:absolute; } .box a.close { color:red; font-size:12px; font-family:arial; text-decoration:underline; } .arrow { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #FFF; position:absolute; left:1px; top:-10px; z-index:1001; } .arrow-border { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #BBBBBB; position:absolute; top:-12px; z-index:1000; } </style> <script type='text/javascript' charset='utf-8'> $(document).ready(function(){ $('.popbox').popbox(); }); </script> <h1>PopBox</h1> <div class='popbox'> <a class='open' href='#'> <img src='images/plus.png' style='width:14px;position:relative;'> Click Here! </a> <div class='collapse'> <div class='box'> <div class='arrow'></div> <div class='arrow-border'></div> 表示内容 </div> </div> </div>
- ベストアンサー
- CSS
- ＣＳＳで思うようにいかないところがあります。
現在ＣＳＳ勉強中の初心者です。 ＣＳＳを使って、ナビゲーションシステムを作ろうと、本に書いてある通り、打ち込んでみたのですが、borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。上の行には表示させたい文字が書かれているのですが、下の行が空欄になってしまって、スペースができてしまいます。ＣＳＳの書き方が悪いのでしょうか？解決方法を教えてください。うまく説明できなくてわかりにくいかもしれませんが、宜しくお願いいたします。 ＣＳＳは以下です。 #nav { margin: 0px; padding: 0px; list-style: none; float:left; width:100%; } #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; height:20px; margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:170px; height:20px; display:block; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; height:20px; } HTMLは以下です <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href=""></a>お問い合わせ</li> </ul>
- ベストアンサー
- HTML
補足
貴重なアドバイスありがとうございます。 現在、制作していますウェブサイト（ http://www.sl-success.com/hallo-casino/index.html )の上部メニューバーに、プルダウンを追加しようとソースコードを修正致しました。 修正したソースコードの部分を抜粋します。 <body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a> <div id="menune"> <ul> <li> <a href="review.html">bonus ne</a> <ul> <li><a href="#"> jepang1</a> </li> <li><a href="#"> jepang2</a> </li> <li><a href="#"> jepang33</a> </li> </ul> </li> </ul> </div> <a href="contact/contact-index.html" class="last">Contact Us</a></div></td> </tr> 上記のソースコードをブラウザで表示させたのが、（ http://www.sl-success.com/hallo-casino/index-testjefri13.html ）です。 しかしレイアウトが崩れてしまいました。これは、どのように修正をすれば宜しいでしょうか。 上記のcssファイルは、（ http://www.sl-success.com/hallo-casino/style-jefri2.css ）からDLできます。 また、http://www.sl-success.com/hallo-casino/index-testjefri13.htmlのファイル全ては、http://www.sl-success.com/hallo-casino/index-table-dalam-div.rar の中に入っております。 もし宜しければ、ご教授をお願いします。 失礼致します。