擬似フレームでのページ内リンクについて
- 擬似フレームの横分割のレイアウトで、左に位置固定された折りたたみ式メニュー右にメイン画面を置いてあります。左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。
- 折りたたみメニューの左側にあるaタグをクリックすると、右側の本文の該当する項目にスクロールするようにしたいんですが、いくつか試してみたもののうまくいきませんでした。
- どのように設定すれば、折りたたみメニューを使用したページ内リンクが正しく機能するのでしょうか？
- ベストアンサー
擬似フレームでのページ内リンクについて
擬似フレームの横分割のレイアウトで、 左に位置固定された折りたたみ式メニュー 右にメイン画面を置いてあります。 左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。 どうやったらできるでしょうか？ 折りたたみメニュー ・外部js function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } ・外部CSS body { font-size: 82%; color: #505050; position: relative; padding: 0px 20px 0px 150px; } #PAGETOP { margin: 0px auto; max-width: 700px; } #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } .box{ line-height: 1.2; background-color: #FFFFFF; border: 1px solid #000000; padding: 1em; margin-top: 0.5em; } #MEIN {line-height: 1.5;} 以下、text.htmlのソース ----------------------------------------- （中略） <body> <div id="PAGETOP"> <div id="HEADER"> （中略） </div> <!-- 左メニュー --> <div id="MENU"> <div class="box"> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー1</a></li> <div id="o0" style="display:none"> <ul> <li><a href="text.html#abc.html">ABC</a> <li><a href="text.html#def.html">DEF</a> </ul> </div> </div> </div> <!-- 右メイン --> <div id="MEIN"> <h2 id="abc">ABC</h2> （中略） <h2 id="def">DEF</h2> （中略） </div> <div id="FOOTER"> （中略） </div> </div> </body> 検討よろしくお願いします。
- hainaina
- お礼率65% (13/20)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 補足の構文で「ABC」「DEF」どちらにも綺麗に飛びますよ。 スクロールバーを発生させないと分かりづらいんだと思います。 「ABC」と「DEF」間にじゅうぶんな間隔を空けて検証しました。
その他の回答 (1)
- torayoshi
- ベストアンサー率62% (910/1449)
え～と… ページ内リンクということは、メニューの「ABC」をクリックすると メインの「ABC」の頭に飛ぶで良いんですか？ だと仮定すると、 <li><a href="text.html#abc">ABC</a> になると思いますが。 ただ、質問の構文だと左右に分かれずうまく検証出来ませんでした。
補足
すみません。ミスです。 以下のソースでいかがでしょうか？ text.htmlのソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> #PAGETOP { margin: 0px auto; max-width: 700px; } #HEADER {margin-bottom: 1.5em;} #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } </style> <script type="text/javascript"> <!-- function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj)obj.style.display=(obj.style.display=="none")?"block":"none"; } } // --> </script> </head> <body> <div id="PAGETOP"> <div id="HEADER"> </div> ----左メニュ----- <div id="MENU"> <h2>menu</h2> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー</a></li> <div id="o0" style="display:none"> <ul> <li><a href="#abc">ABC</a> <li><a href="#def">DEF</a> </ul> </ul> </div> ----右メイン------ <div id="KIZI"> <h2 id="abc">ABC</h2> <div class="text"> テキストテキスト </div> <h2 id="def">DEF</h2> <div class="text"> テキストテキスト </div> </div> </div> </body> </html>
関連するQ&A
- ｃｓｓでの擬似リンク（a:hover）の複数指定
cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうｋまく行きません。 FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。 ■css /* menu-1 */ #menu-1 { width: 200px; height: auto; margin: 0; padding:0; } #menu-1 ul.support, #menu-1 li.support { margin: 0; padding: 0; list-style: none; } #menu-1 li.support { width: auto; height: auto; padding: 5px 10px; } #menu-1 a, #menu-1 a:link, #menu-1 a:visited { padding: 0.2em 10px; height:1.4me; color: #ff0000; text-decoration: none; } #menu-1 a:hover { color: #9f0f0f; text-decoration: underline; } /* menu-2 */ #menu-2 { width: 200px; height: auto; } #menu-2 ul, #menu li.list1, #menu li.list2 { margin: 0; padding: 0; list-style: none; } #menu-2 ul li.list1, #menu-2 ul li.list2 { width: auto; height: auto; } #menu-2 ul li.list1 { font-weight: bold; } #menu-2 .list1 a, #menu-2 .list1 a:link, #menu .list1-s a:visited { text-decoration: none; color: #0e2159; } #menu-2 .list1 a:hover { color: #9f0f0f; text-decoration: underline; } #menu-2 li.list2 a, #menu-2 li.list2 a:link, #menu li.list2-s a:visited { text-decoration: none; color: #000000; } #menu-2 li.list2 a:hover { color: #9f0f0f; text-decoration: underline; } ■html <div id="menu-1"> <a href="#"> <ul> <li class="support">テスト</il> </ul> </a></div> <div id="menu-2"> <a href="#"> <ul> <li class="list1">スタイル１</il> <li class="list2">スタイル２</il> </ul> </a></div>
- ベストアンサー
- HTML
- 自社Webページ内の階層リンクへ飛ばない
自社Webページ内の階層リンクへ飛ばなくなり困っています。 ドリームウィーバーでページを構築していますが、気づいたら同サイト内のリンクに飛ばなくなっていました。 <div id="menu"> <ul> <li><a href="#">トップページ</a></li> <li><a href="houjin.html">●●</a></li> <li><a href="tenpo.html">●●</a></li> </ul> </div> div#menu ul { margin:0 auto; padding:10px 0; } div#menu li { font-size:85%;/* 12px相当 */ color:#2e2930; text-align:center; list-style-type:none; } div#menu li a { display:block; width:200px; color:#2e2930; line-height:60px; } /* マウスオーバー時 */ div#menu li a:hover { color:#f1f1f1; background:#2D2D2D url("img/bg_menu.gif") 0 0 repeat; } </li>が抜けていたので付け足しても変わりません。 他のページへのリンク（別窓で開く）は有効です。 考えられる原因を教えていただけると幸いです。 どうぞよろしくお願い致します。
- ベストアンサー
- CSS
- CSS IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- ツリーメニューで子のページのとき親が開く
他のプログラムと連携しています 現時点ではクリックすれば親が開き子の部分が出てくるようにしています。 子のページのＵＲＬを見たときに ツリーのその親は自動的に開きたいのです。 show('1');のこの”１”は他のプログラムから出力しているものです。 子のものも同じように値を出力できるのですが JavaScriptでどのように書けば親が開くのかよくわかりません＾＾；。 よろしくお願いします。 //javascript// function show(inputData) { var objID=document.getElementById( "obj_" + inputData ); var buttonID=document.getElementById( "button_" + inputData ); if(objID.className=='close'){ objID.style.display='block'; objID.className='open'; buttonID.src='images/close.gif'; } else{ objID.style.display='none'; objID.className='close'; buttonID.src='images/open.gif'; } } //HTML// <ul> <li><input type="image" src="images/open.gif" id="button_1" onclick="show('1');"> <a href="javascript:show(1)">Ａメニュー</a> </li> <div id="obj_1" style="display:none;position:relative;" class="close"> <ul><li><a href="11.html" >Ａ-1メニュー </a></li> <li><a href="12.html">Ａ-2メニュー </a></li> <li><a href="11.html" >Ａ-3メニュー </a></li> </ul> </div> </ul> <ul> <li><input type="image" src="images/open.gif" id="button_2" onclick="show('2');"> <a href="javascript:show(2)">Ｂメニュー</a> </li> <div id="obj_2" style="display:none;position:relative;" class="close"> <ul><li><a href="21.html">Ｂ-1メニュー </a></li> <li><a href="22.html">Ｂ-2メニュー </a></li> <li><a href="23.html">Ｂ-3メニュー </a></li> </ul> </div> </ul>
- 締切済み
- JavaScript
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルが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
- ドロップダウンメニューについて
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>
- 締切済み
- ホームページ作成ソフト
- 折り畳みメニューを使った場合の画像の空きについて
使用ソフトはドリームウィーバーです。 折り畳みメニューを使いたく、以下のとおり書いたのですが、 なぜか、サブメニューの画像が開いたときに微妙に空きがでます。 マージン0にしてあるのですが、どうしても画像と画像の間があいてしまいます。 どうやったら詰められるのでしょうか？ 教えていただけますか？ <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ width : 110px; cursor : pointer; } .sub{ display : none; margin: 0px; padding: 0px; } ul{ margin:0px; padding: 0px; } ul li{ margin:0px; list-style-type: none; padding: 0px; height: 22px; width: 110px; } ul li img{ margin:0px; padding: 0px; } --> </style> </head> <body> <noscript>※JavaScriptを有効にしてご覧下さい。</noscript> <div class="menu" onclick="javascript:msl('sub_a')" ondblclick="javascript:kks('sub_a')"><img src="シモン/html/images/menu01.gif" /></div> <ul class="sub" id="sub_a"> <li><img src="シモン/html/images/menu01_01.gif" /></li> <li><img src="シモン/html/images/menu01_02.gif" /></li> <li><img src="シモン/html/images/menu01_03.gif" /></li> <li><img src="シモン/html/images/menu01_04.gif" /></li> <li><img src="シモン/html/images/menu01_05.gif" /></li> </ul>
- ベストアンサー
- JavaScript
- 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;}
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
お礼
解決できました。 私のタグミスだったみたいです。 つまらない質問に回答していただき、ありがとうございました！！