jacascriptで作ったドロップダウンメニューが下の画像に隠れる
- ドロップダウンメニューがIE6だと下の画像の下に隠れてしまいます。回避方法はありますでしょうか？
- JavaScriptで作成したドロップダウンメニューが、IE6では画像の下に隠れてしまう問題が発生しています。解決策はありますか？
- ドロップダウンメニューがIE6では画像の下に隠れてしまう現象が起きています。どうすれば解決できますか？
- ベストアンサー
jacascriptで作ったドロップダウンメニューが下の画像に隠れる
ドロップダウンメニューがＩＥ６だと ドロップしたメニューが下の画像の下に隠れてしまいます。 回避方法はありますでしょうか？ ソースは ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ <script type="text/javascript"><!-- function visiblemenu(to) { document.getElementById(to).style.display = "block"; } function hiddenmenu(to) { document.getElementById(to).style.display = "none"; } // --></script> ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ <div id="jumpmenu"> <table> <tr> <td><img src="image/11_b_e03_r1_c1.jpg" width="80" height="42"></td> <td> <div onMouseover="visiblemenu('menu01')" onMouseout="hiddenmenu('menu01')"> <a href="#"><img src="image/11_b_e03_r1_c2.jpg" width="117" height="42" id="n11_b_e03_r1_c2"></a><br> <div id="menu01" class="menubox"> <a href="#" class="link"><p class="menu">メニュー１</p></a> <a href="#" class="link"><p class="menu">メニュー１</p></a> </div> </div> </td> <td><img src="image/11_b_e03_r1_c3.jpg" width="23" height="42"></td> <td> <div onMouseover="visiblemenu('menu02')" onMouseout="hiddenmenu('menu02')"> <a href="#"><img src="image/11_b_e03_r1_c4.jpg" width="117" height="42" id="n11_b_e03_r1_c4"></a><br> <div id="menu02" class="menubox"> <a href="#" class="link"><p class="menu">メニュー１</p></a> <a href="#" class="link"><p class="menu">メニュー１</p></a> </div> ・ ・ ・ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ ＣＳＳは ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ img {border:0; vartical-align:top;} #jumpmenu {width:1000;} #jumpmenu table {width:1000; border-collapse:collapse;} #jumpmenu table td {padding:0;} #jumpmenu table td p.menu { text-decoration :none; border :1px solid #ece9d8; padding :5px; margin :0; display :block; font-family :Verdana, Arial, Helvetica, sans-serif; font-size :14px; text-align :left; } #jumpmenu table td a:link p.menu {color:#fff; background:#b4c1cf;} #jumpmenu table td a:visited p.menu {color:#fff; background:#b4c1cf;} #jumpmenu table td a:hover p.menu {color:#333; background:#ccc;} #jumpmenu table td a:link.link {text-decoration :none;} #jumpmenu table td .menubox{ width :180px; position :absolute; border :1px solid #555; display :none; } ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ です。 よろしくお願いします。
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 No2です。 少し時間があったので、実験してみました。 どうやら、メインのimgからmouseoutした時点で、イベントが発生してしまうみたいですね。 さらには<a>タグ（メニュー1の表示）から移動する度にもイベントが発生して非表示にしているみたいです。（実際は↑どれかひとつで非表示になるのですが…） …で、一応、似たものを書き直して見ましたのでご参考までに。 （IE6で検証。他のブラウザはきちんと確認してはいません。） メニューの構成をクラス名で分けるようにして、「menu」で1つのセットで、「main」が常に表示する部分、「submenu」が表示が切り替わる部分です。 「menu」と「main」、「submenu」は親子になるようにしてください。（孫は不可） 方法としては、非表示にするのにタイムラグを設けて、その間に次の（表示）イベントが発生したら、非表示にするのを取りやめるという考え方です。 また、HTMLの構成を見やすくするためにイベントの設定もスクリプト側で行うようにしていますので、スクリプトが少々長くなっています。 ついでにtableも必ずしも必要なさそうなので、外しています。 <html> <head> <style type="text/css"> .menu { margin: 0; padding: 0; float: left; } .menu img { display: block; height: 42px; border: 0; } .submenu { visibility: hidden; position: absolute; z-index: 3; } .submenu a { display: block; width: 180px; padding: 5px; text-decoration: none; border: 1px solid #ece9d8; background: #b4c1cf; color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; text-align: left; } .submenu a:hover { background: #ccc; color: #333; } </style> <script type="text/javascript"> <!-- var menuE = [], currentE = null, timer = null; window.onload = function(){ var e=document.getElementById('jumpmenu').getElementsByTagName('DIV'); for (var i=0,j=0; i<e.length; i++){ if (e[i].className=='menu') { var mainE=getChild(e[i],'main'); var subE=getChild(e[i],'submenu'); if (mainE && subE){ menuE[j++]=e[i]; mainE.onmouseover = function(){ show(this);} mainE.onmouseout = function(){ hide(this);} subE.onmouseover = function(){ cancel();} subE.onmouseout = function(){ hide(this);} };};} } function show(e) { cancel(); var subE = getChild(e.parentNode, 'submenu'); if (currentE && currentE != subE) currentE.style.visibility = 'hidden'; subE.style.visibility = 'visible'; currentE = subE; } function hide(e) { var subE=getChild(e.parentNode,'submenu'); if (currentE == subE) timer = window.setTimeout(hidden,100); } function cancel() { if (timer) {window.clearTimeout(timer); timer=null;} } function hidden(){ if (currentE) { currentE.style.visibility = 'hidden'; currentE = null;} } function getChild(elm, cnam){ var el = elm.firstChild; var elm_c = null; while (el){ if (el.className==cnam) { elm_c=el; break;} el=el.nextSibling; } return elm_c; } // --> </script> </head> <body> <div id="jumpmenu"> <div class="menu"><img src="./A.jpg" width="80"></div> <div class="menu"> <a href="#" class="main"><img src="./B.jpg" width="117"></a> <div class="submenu"> <a href="#">メニュー１</a> <a href="#">メニュー２</a> <a href="#">メニュー３</a> </div></div> <div class="menu"><img src="./C.jpg" width="23"></div> <div class="menu"> <a href="#" class="main"><img src="./D.jpg" width="117"></a> <div class="submenu"> <a href="#">メニュー４</a> <a href="#">メニュー５</a> </div></div> <br style="clear:left;"> </body> </html>
その他の回答 (4)
- fujillin
- ベストアンサー率61% (1594/2576)
No4です No4の回答ははじめの<div id="jumpmenu">タグを閉じ忘れてます。^^;ゞ すみませ～ん。 念のため…
- fujillin
- ベストアンサー率61% (1594/2576)
ＩＥ6.0.28で実験しましたが、再現しません。 『下の画像』がないので、HTMLに以下を付け加えています。 </td></tr></table> <img src="a.jpg" width="800" /> </div> DOCTYPE宣言なし、HTML 4.01 Strict、etc、XHTML 1.0などで実行しても全て下のa.jpgの上に表示されます。 ご質問文にはないCSSが関係していることはありませんか？
お礼
確かに、表示はされるんです。 言い方が悪かったかもしれません。すいません。 ただ、クリックできないんです。 クリックしようとしてドロップダウンメニューにマウスを持っていくと メニューが消えてしまうんです。 IE6だけ・・・。 半ば諦めかけてます・・・。
- sample_
- ベストアンサー率76% (20/26)
cssにz-indexというプロパティがあって、表示が重なった場合にどの順に表示するかという奥行きを設定することができるので、プルダウンメニューを表示しているCSSにz-indexを設定して下の画像より前にくるようにすればよいと思いますよ。
お礼
z-indexプロパティは試しましたが z-indexプロパティで指定しても、firefox、IE7は正常に動作しますが IE6だとやはりダウンメニューが下の画像に隠れてしまいます。
関連するQ&A
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- テーブルの隙間について
WEBのデザインを、本を読みつつ学んでいるのですが テーブルに関して疑問があるので、質問させていただきます。 【cssの中身】 /* ヘッダー */ .head { background-color:#ccc; width:100%; height:70px; margin-left:auto; margin-right:auto; } .head h1 { font-size:14px; font-family:Verdana,Osaka,MS UI Gothic,; color:#000; margin-bottom:2px; } .head td{ vertical-align:middle; } .head1 { width:40px; text-align:right; } .head2 { text-align:left; padding-right: 4px; } .date{ font-size: 12px; color: #666; font-family : Verdana,Osaka,"MS UI Gothic",serif; } /* メニュー */ .menu1 div{ float: left; } .menu{ width: 100%; background-color: #666; font-size: 12px; font-weight: bold; border-top: solid 1px white; } .menu1 div{ width: 80px; border-right: solid 1px white; text-align: center; padding-top: 5px; padding-bottom: 5px; } .menu2{ text-align: right; } .menu2 div{ margin-right: 10px; color: #fff; } .menu1 a{ color: #999; text-decoration: none; } .menu1 a:hover{ color: #fff; } 【ページの中身】 <a name="top"> <table class="head" cellspacing="0"> <tr> <td class="head1"> <img src="icon.jpg" border="0" alt="*" width="35" height="36"> </td> <td class="head2"> <h1>********</h1> </td> </tr> </table> </a> <table class="menu" cellspacing="0"> <tr> <td class="menu1"> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> </td> <td class="menu2"> <div>Last update:00.00</div> </td> </table> このような形で、ヘッダーとメニューを作っているのですが、メニューの線とヘッダーとの間に1pxほどの隙間（白い部分）が出来てしまいます。これをなくすことはできないのでしょうか？メニュー部分のテーブルに cellspacing="0"を入れると隙間が無くなると本に書いていたのですが、ほんの少しだけ隙間が残ってしまいます。 宜しくお願いします。
- ベストアンサー
- HTML
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- ドロップダウンメニューの制作で
こんにちわ。 http://javascript.eweb-design.com/0701_pdm.html のサイトを参考に ほとんどソースを変えずドロップダウンメニューを制作しようとしていますが HTMLの定義を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にすると、上記のサイトのソースだとできないのです。 この定義にてどうしても制作したいのですが、どこを変えればいいのでしょうか？ 参考にし、以下のようにソースを書きました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.display = "none"; else ID01.style.display = "block"; flag = !flag; } //--> </SCRIPT> <link href="css/test.css" rel="stylesheet" type="text/css"> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD> <DIV style="background-color:#ffcccc; width:160px"> <div class="test"><p><a href="javaScript:pullDown01()">テスト</a></p></div> </DIV> <DIV id="ID01" style="display:none;"><div class="test2"><p><a href="#">テスト</a></p></div></div> </TD> </TR> </TBODY> </TABLE> <BR><BR><BR><BR> <BR><BR> </BODY> </HTML>
- ベストアンサー
- JavaScript
- ドロップダウンメニューについて
apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>
- 締切済み
- ホームページ作成ソフト
- ドロップダウンの残像
どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。
- ベストアンサー
- HTML
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>
- 締切済み
- CSS
- ドロップダウンメニューを作るこの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
- リンク先から戻ったら、表示がおかしい。
未完成品です。 サイトの各ページからメインページに戻ると、文字の色が変わったり、 大きさが変わります。 どこに不具合があるか、初心者なのでよくわかりません。 いじりすぎて、構成もめちゃくちゃだと思いますが、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ゲームのすべて</title> </head> <!--全体の背景--> <body bgcolor="#696969" text="#FFFFFF" link="#0000FF" alink="#DC143C" vlink="#8B008B"> <title>デザイン</title> <style type="text/css"> <!-- body { line-height:150%; font-size: 12px; color: #222222; margin:10px 0px; } .menu_c { font-size:12px; color:#cccccc; } .menu_c a { color:#ffffff; text-decoration: none; } .menu td { padding:2px 8px; } .side { background:#D3D3D3; margin:0px 0px 10px 0px; padding:5px 8px; border-left: #80838F 1px solid; border-right: #80838F 1px solid; border-bottom: #80838F 1px solid; } h3 { color:#ffffff; font-size:12px; margin:0px; padding:2px 12px; background:#808080; } h4 { color:#ffffff; font-size:12px; margin:0px 0px 0px 8px; padding:2px 12px; background:#808080; } .comb { margin:0px 1px 10px 8px; padding:5px 10px 5px 4px; background:#D3D3D3; } --> </style> </head> <!-- ページの全体幅テーブルタグ --> <table width="780" align="center"> <tr><td> <!--一番上のところ--> <table width="100%" > <tr> <td width="18%"><img src="logo.gif" width="132" height="40"></td> <td width="82%" align="right"><a href="index">ホーム</a> <hr noshade size=1></td></tr> </table> <br> <table width="100%" border="0" cellspacing="0" bgcolor="#DCDCDC" class="menu"> <tr><td width="72%">ああああああああああああああ</td> <td width="28%" align="right">デザイン</td></tr> </table> <table width="100%" border="0" cellspacing="0" class="menu"> <tr><td bgcolor="#808080" class="menu_c"><a href="#">ホーム</a> | <a href="#">おもなゲーム</a> | <a href="#">ソフト</a> | <a href="#">作られる過程</a> </td></tr> <tr><td><a href="#">ホーム</a> > ページナビ</td></tr></table> <!--左サイドメニュー--> <table width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-bottom: #B6B6B6 1px solid;"> <tr><td width="25%" height="70" valign="top" bgcolor="#696969"> <h3>おもなゲーム</h3> <div class="side"> ・<a href="page1.html#1">PS3</a><br> ・<a href="page1.html#2">PSP</a><br> ・<a href="page1.html#3">PSP go</a><br> ・<a href="page1.html#4">Xbox360</a><br> ・<a href="page1.html#5">Wii</a><br> </div> <h3>ソフト</h3> <div class="side"> <br> </div> <h3>おもなゲーム</h3> <div class="side"> ・<br> ・<br> ・<br> ・<br> </div> <h3>プログラマー</h3> <div class="side"> </div> <!--左サイドメニュー 終--> <!--右サイドメニュー 始--> <br></td> <td width="75%" valign="top"> <h4>自己紹介</h4> <div class=comb>ああああああああああああああああああああああああああああああああ<br> aaaaaaaa<br> aaaa </div> </td></tr></table> </td></tr></table> <table width="100%" > <tr><td align="center"><a href="index.html">ホーム</a> | <a href="page1.html">おもなゲーム</a> | <a href="page2.html">ソフト</a> | <a href="page3.html">作られる過程</a> | <a href="page4.html">プログラマー</a></td></tr> <tr><td align="center">Copyright © Your site. All Rights Reserved. </td></tr> </table> </html>
- 締切済み
- HTML
- テーブル内に隙間が。
テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 （html/cssの書き直さなくてはならない箇所はどこでしょうか） 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>
- ベストアンサー
- ホームページ作成ソフト
お礼
大変ありがとうございました。 思ったとおりに実装できましたので ご報告いたします。 長い間、間隔があいてしまったことを お詫び申し上げます。