締切済み

作動しないCSSのプルダウン(1)

2011/02/02 11:52

windowsバージョン７で確認すると、CSSのプルダウンが起動しません。下記URLのナビゲーション部分、「BOARDS」という部分と「ＳＴＯＲＥ」という部分です。CSSに詳しいお方、ご教授いただけないでしょうか？ http://staceysurfboardsjapan.com/sstt.html 【ＨＴＭＬ部分】 <ul id="pulldown-menu"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/boards.gif',1)"><img src="images/boards2.gif" name="Image9" width="149" height="26" border="0" id="Image9" /></a> <ul> <li><a href="/stacey/boards/twist.html"><img src="images/m_twist.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/guild.html"><img src="images/m_guild.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s3.html"><img src="images/m_s3.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s4.html"><img src="images/m_s4.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s6.html"><img src="images/m_s6.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/cd2.html"><img src="images/m_cd2.gif" width="149" height="30" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','images/m_jmodel.gif',1)"><img src="images/m_gn.gif" name="Image31" width="149" height="30" border="0" id="Image31" /></a></li> </ul> </li> </ul> 載せきれないので次の投稿でＣＳＳも記載します。

nami1982
お礼率0% (0/1)

みんなの回答 （1）
専門家の回答

みんなの回答

EXIA-R2（@EXIA-R2）
ベストアンサー率65% (198/302)

2011/02/03 14:45 回答No.1

質問を分けて投稿すると削除されてしまうので、この回答の補足に続きを載せてください。

関連するQ&A

リストを一行にせずに横並びにする方法
リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。コメントを使わないで横並びにする方法はありますか？ ■html <ul><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li></ul> ■css li { display: inline; } ↓のようにをとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>
- 締切済み
- HTML
cssスプライト　positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
CSSのリストタグについて
下記のソースのようにリストタグに画像を並べます。ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。 <ul> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> </ul> あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。
- ベストアンサー
- HTML
CSSで画像を横並びに
CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }
- ベストアンサー
- CSS
CSSで縦長・横長の写真を一定に並べたい
写真のギャラリーのようなものを作成しています。写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。この写真を正方形の方眼紙に並べるように配置したいと思っています。テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。現在のソースは以下の通りです。 <!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=utf-8" /> <title>ギャラリー</title> <style type="text/css">  </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると画像と画像の間にスペースが出来てしまいます。他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
CSSで指定した背景が印刷されない
CSS初心者です、 CSSで背景を指定しているのですが閲覧者側で印刷時に背景も印刷にチェックをいれないと背景が印刷されないのですが、閲覧者側で上記の作業をいなくても背景を印刷させる方法はありましたらどなたかご教授ください。ソース記述 <div id="header"> <ul id="menu"> <li id="mnu1"><a href="index.html"><img src="menu/tm.gif" width="114" height="44" alt="HOME" title="HOME" /></a></li> <li id="mnu2"><a href="topics.html"><img src="menu/tm.gif" width="114" height="44" alt="オリジナルケーキ" title="Topics" /></a></li> <li id="mnu3"><a href="location.html"><img src="menu/tm.gif" width="114" height="44" alt="スイーツ" title="Location" /></a></li> <li id="mnu4"><a href="business.html"><img src="menu/tm.gif" width="114" height="44" alt="マロン" title="Business" /></a></li> <li id="mnu5"><a href="population.html"><img src="menu/tm.gif" width="114" height="44" alt="ギフト" title="Population Labor" /></a></li> <li id="mnu6"><a href="industrial.html"><img src="menu/tm.gif" width="114" height="44" alt="生地制作" title="Industral Park" /></a></li> <li id="mnu7"><a href="contact.html"><img src="menu/tm.gif" width="114" height="44" alt="お問い合わせ" title="Contact" /></a></li> </ul> CSS記述 #header{ background-color : #ffffff; background-repeat : no-repeat; width : 800px; background-image : url(img/logotop.gif); height : 197px; display:list-item; list-style-image: url(img/logotop.gif); } ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 800px; height : 44px; padding: 0px ;} ul#menu li{ float : left; list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); display : block; text-decoration : none; background-repeat : no-repeat; outline: none; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; } よろしくお願いします。
- 締切済み
- HTML
【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。現状メイン画像1枚のレイアウトだったところを差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。はめ込んだところ、右側のボタンがずれ込みます。何をどうしたら解決できるかわかりません。どうしたら修正できますでしょうか。よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□　■■■■■ □□メイン画像□□　■ボタン■ □□□□□□□□□　■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
ドロップダウンメニューを作るこのCSSどこが変？
お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。ネットでの情報を参考にしながら、書いたソースが以下のものですが、問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }
- ベストアンサー
- CSS
ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）
ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。具体的ソースは下部に記述します。印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。参考に、自分の環境も記載します。なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP　 professional Version 2002 service Pack 2 ブラウザ　IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all">  </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>
- 締切済み
- HTML

作動しないCSSのプルダウン(1)

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

作動しないCSSのプルダウン(1)

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録