- ベストアンサー
ホームページの位置が、インターネットエクスプローラで表示すると右に寄ってしまい、真ん中に位置がきません。どのようにすればよいか教えてください。
- ホームページの位置が、インターネットエクスプローラで表示すると右に寄ってしまい、真ん中に位置がきません。どのようにすればよいか教えてください。
- 現在、ホームページを作成中ですが、使用しているテンプレート「http://homepage.decoweb.jp/template/view/H200051」をインターネットエクスプローラで表示すると、ホームページの位置が右に寄ってしまい、真ん中に位置しません。ホームページの位置をちょうど真ん中にするための方法を教えてください。
- インターネットエクスプローラでホームページを表示すると、ホームページの位置が右に寄ってしまい、真ん中に位置しません。テンプレート「http://homepage.decoweb.jp/template/view/H200051」を使用しています。ホームページの位置がちょうど真ん中にくるようにするためにはどのようにすればよいでしょうか？
- shironeko3
- お礼率84% (22/26)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!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-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"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- FC２で画像とHPが表示されない！
ホームページ作成初心者です。よろしくお願い致します。 ■手順■ (1)XHTML＋CSSデザインテンプレートからDL URL→http://pondt.com/con_tpl/standard/ (2)DLサンプルをFC2にて編集 ＜HTML文＞ index.htmlというサンプルファイルをそのまま使用 ＜画像＞ 表示されている画像をアップロード ※解凍後、端からテンプレートフォルダ内の画像をアップロードしました。 ■エラー■ 画像が表示されず文字のみのページになってしまいます。 ■HTML文■ ====ここから================================================== <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>ホームページのタイトルを入れてください</title> <meta name="keywords" content="ホームページのキーワードを入れてください" /> <meta name="description" content="ホームページの紹介文を入れてください" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="head"> <h1>キーワードをいれてください</h1> <h2><a href="./">STANDARD 03（タイトルを入れてください）</a></h2> <div id="head_menu"> <ul> <li><a href="./">HOME</a></li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a>コンテンツ</a> <ol class="sub"> <li><a href="contents01.html">ここのメニューは</a></li> <li><a href="contents01.html">コンテンツ01</a></li> </ol> </li> <li><a href="contents01.html">コンテンツ</a></li> </ul> </div> </div> <div id="contents"> <div id="top"> <p class="line"><img src="img/line01.gif" alt="ライン" width="796" height="3" /></p> <div id="main_image"> <p> 文章が入ります。<br /> TEL 00-000-0000<br /> 削除も可能です。 背景の画像は差し替え可能です。<br /> </p> </div> <p><img src="img/line01.gif" alt="ライン" width="796" height="3" /></p> <div id="top_btm"> <div id="left"> <h3><img src="img/top/st_info.gif" alt="インフォメーション" width="440" height="26" /></h3> <div id="info"> <div id="main"> <h4>2009/01/18</h4> <p>検索エンジン対策としてキーワードを入力できるようにしました。</p> <h4>2008/06/01</h4> <p>本テンプレート配布開始</p> </div> </div><!-- info 終わり --> </div><!-- left 終わり --> <div id="right"> <div id="bnr_sps"> <p class="bnr01"><a href="contents01.html">おすすめ！！（画像差し替え可能）</a></p> <p class="bnr02"><a href="contents01.html">コンテンツ01はこちら（画像差し替え可能）</a></p> </div><!-- bnr_sps 終わり --> </div><!-- right 終わり --> </div><!-- top_btm end --> </div><!-- top 終わり --> <div id="foot_up"></div> </div><!-- contents 終わり --> <div id="copy">Copyright (C) <script language="javascript">document.write(new Date().getFullYear())</script> サイト名を入れてください. All Rights Reserved. </div> </div> <!--↓著作権表示※削除しないでください↓--> <div id="p-copy"> <p><a href="http://pondt.com/" target="_blank">ホームページテンプレートのpondt</a></p> </div> </body> </html> ====ここまで================================================== テンプレート(サンプル表示)通り表示するには、自分でカスタマイズする必要があるのでしょうか？？ローカルで開くぶんには表示されるのでHTML文的には合っていると思ったのですが・・・。 色々調べたのですが、解決しませんでした。 どなたか分かる方いらっしゃいましたらご助言していただけると助かります。よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー15 メニュー作成について
いつもお世話になっております。 以下のような、どなたかのご回答をもとに、ホームページビルダー15で同じような折りたたみ式のメニューを作成したいと考えおります。 参考にしたいメニューはこちらです↓ http://okwave.xrea.jp/jquery/test6797636/e.html ですが、自分の作ろうとしているメニューはCSSプロフェッショナルテンプレートの「企業」から作ったものであり、なかなかうまくいきません。 以下、自分の記述を記載いたしますが、以下のようにしたいと思います。 通常は、 メニューA メニューB メニューC というように、なっており、メニューBをクリックしたときにだけ メニューA メニューB B-1 B-2 B-3 メニューC と、サブメニューが表れ、メニューBをクリックするまでサブメニューも表示されたままにしておきたいと思います。（もちろん、メニューA～Cも、どのページでも表示されるようにする） どこに、どのように記述を入れれば、ボタンのデザインなども崩さず、思い通りのメニューになるのか、ご教示いただければと思います。 どうぞよろしくお願いいたします。 *********自分の記述（ヘッダー情報も含まれていますが無視してください）*********** <!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-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"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.8.0 for Windows"> <title>TOP</title> <link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts"> <link rel="stylesheet" href="container_1A_2c_left.css" type="text/css" id="hpbcontainer"> <link rel="stylesheet" href="main_1A_2c.css" type="text/css" id="hpbmain"> <link rel="stylesheet" href="user.css" type="text/css" id="hpbuser"> </head> <body id="hpb-template-01-01-02" class="hpb-layoutset-02" bgcolor="#ffffff" background="blue_p7b.gif"> <div style="top : 2px;left : 100px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <div id="hpb-container"> <!-- header --><br> <!-- header end --><!-- inner --> <div id="hpb-inner"> <!-- wrapper --> <div id="hpb-wrapper"><!-- main end --> </div> <!-- wrapper end --><!-- navi --> <div id="hpb-nav"> <h3 class="hpb-c-index"></h3> <ul> <li id="nav-toppage"><a href="a.html"><span class="ja">メニューA</span><span class="en">TOP PAGE</span></a> <li id="nav-concept"><a href="b.html"><span class="ja">メニューB</span><span class="en">CONCEPT</span></a> <li id="nav-service"><a href="c.html"><span class="ja">メニューC</span><span class="en">SERVICE&PRODUCTS</span></a> </ul> </div> </div> </div> </div> </body> </html>
- ベストアンサー
- その他（ビジネス・キャリア）
- スマホサイトのホームページの背景が途切れる
スマホサイトを作成しているのですが、 なぜかフッター部分が途中で途切れてしまいます。 考えられる原因はなんでしょうか。 【meta】 <meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=no"> 【html】 <footer> <div class="footerWrapper"> <div class="footer clearfix"> <div class="inner fL"> <a href="http://XXXXXXXXXjp/"><img src="http://XXXXXXXXX/img/footer_logo.png" width="228" height="22" alt="テスト"></a> <ul class="mt15"> <li><a href="http://XXXXXXXXX.jp/shopinfo/">テスト１</a> | </li> <li><a href="http://XXXXXXXXX.jp/menu/">テスト２</a> | </li> <li><a href="http://XXXXXXXXX.jp/school/">テスト３</a> | </li> <li><a href="http://XXXXXXXXX.jp/prof/">テスト４</a> | </li> </ul> </div> <div class="inner fR"> <ul class="mt10"> </ul> </div> </div> <!-- /.footer --> <div class="copy mt35"> <p class="taC white"><small>テスト</small></p> </div> </div> </footer> 【CSS】 .footerWrapper { margin: 35px auto 0 auto; width: 100%; height: 148px; background: url(../img/footer_back.png) left top repeat-x; padding-top: 20px; /*-------------------------------------------------------- スマホ対応 --------------------------------------------------------*/ min-width:1000px; } .footer { width: 70%; margin: 0 auto; clear:both; } .footer .inner.fL { width: 620px; }
- 締切済み
- HTML
- スタイルシートについて
宜しくお願い致します。 個人のホームページを作成しているのですが、ヘッダーの下にメニューボタンを横並びに置きたくて参考書通りにしているつもりなのですができません。ソースは HTMLソース <div id="content"> <p>what new</p> </div> <div id="sidebar"> <ul id="sidemenu"> <li><a href="link.html">トップページ</a></li> <li><a href="link.html">コンセプト</a></li> <li><a href="link.html">メニュー</a></li> <li><a href="link.html">ブログ</a></li> <li><a href="link.html">リンク</a></li> </ul> </div> CSSソース div#content{ font-size:0.75em; width:564px; } ul#sidemenu li{ list-style-type:none; float:left; } です。ど素人なものでどこが間違っているのかさえわかりません。 ご教授頂ければ幸いです。 どうぞ宜しくお願い致します。
- 締切済み
- グラフィックソフト
- Ajaxを使った検索サイト作成
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- AJAX
- 検索サイト作成について
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- JavaScript
- wordpressで
wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>（RSS 2.0）" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>（Atom）" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。
- 締切済み
- PHP
- WEBサイト作成時ヘッダーで読込が反映されない部分
ヘッダー部分について質問させていただきます。 一旦、サイトをDW（ドリームウィーバーCS6）やHPB（ホームページビルダー14）で読み込んで、デスクトップに保存後、確認すると、この部分は何故か表示されていませんでした。データとしても、その後は表示されなくなったようです。 この理由が分かりません。 <!-- #BeginLibraryItem "/Library/header.lbi" -->～<!-- #EndLibraryItem -->が原因だとは推測がつきます。詳しい方がいましたら、よろしくお願いします。 念の為に、下記にHTMLとCSSを出来る限り記載しておきます。 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <meta name="Keywords" content="キーワード"> <meta name="Description" content="キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base1.css"> <script type="text/javascript" src="util.js"></script> <script src="swfobject_modified.js" type="text/javascript"></script> </head> <body id="home"> <div id="topmess"><p><strong>ストロング</strong></p></div><!-- #BeginLibraryItem "/Library/header.lbi" --><div id="header"> <h1><a href="https://www.google.co.jp/">題名</a></h1> <ul> <li id="top"><a href="https://www.google.co.jp/">1</a></li> <li id="com"><a href="https://www.google.co.jp/">2</a></li> <li id="pro"><a href="https://www.google.co.jp/">3</a></li> <li id="con"><script type="text/javascript">mailwrite()</script></li> </ul> </div><!-- #EndLibraryItem --><div id="main" class="clearfix"> <table> <tbody> <tr> <td style="text-align:left;"><a href="http://www.10.jpg" target="_parent"><img src="side_coupon04.jpg" width="197" height="98" alt="4"></a></td> <td style="text-align:center;"><a href="http://www.20.jpg" target="_parent"><img src="side_coupon05.jpg" width="197" height="98" alt="5"></a></td> <td style="text-align:right;"><a href="http://www.30.jpg" target="_parent"><img src="side_coupon06.jpg" width="197" height="98" alt="6"></a></td> <td style="text-align:right;"><a href="http://www.40.html" target="_parent"><img src="side_coupon07.jpg" width="197" height="98" alt="7"></a></td> </tr> </tbody> </table> <br> <br> <img src="pro_img14.jpg" width="791" height="80" alt="TEL" class="btmgn20"> <p><font color="BLUE" size="10">TEL: 0123-456-789</font></p><br> <img src="pro_img11.jpg" width="791" height="150" alt="8" class="btmgn20"><br> <img src="pro_img9.jpg" width="791" height="367" alt="9" class="btmgn20"><br> <table> <tbody> <tr> <td style="text-align:left;"><a href="https://www.google.co.jp/" target="_parent"><img src="img12.jpg" width="395" height="120" alt="A"></a></td> <td style="text-align:right;"><a href="https://www.google.co.jp/" target="_parent"><img src="img13.jpg" width="395" height="120" alt="B"></a></td> </tr> </tbody> </table> </div> <!-- #BeginLibraryItem "/Library/footer.lbi" --><div id="footer"> <div id="ft"> <div class="leftarea"> <h3>見出し3</h3> <p>住所<br /> TIME 1：30～24：40<br /> ※<br /> TEL：0123-456-789<br /> FAX：0123-456-789 </p> </div> <div class="rightarea"> <ul> <li class="fst"><a href="https://www.google.co.jp/">8</a></li> <li><a href="https://www.google.co.jp/">9</a></li> <li><a href="https://www.google.co.jp/">10</a></li> <li><script type="text/javascript">mailwrite()</script></li> </ul> <address>コピーライト</address> </div> </div> </div><!-- #EndLibraryItem --> <script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script> </body> </html> CSS /* ------------------------------------------------------------------------------------------------------------ 1. Normalize (No need to edit) -------------------------------------------------------------------------------------------------------------*/ html, body, div, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre,img, ol, ul, li, dl, dt, dd, span, abbr, acronym, address, cite, code, del, dfn, em, ins, kbd, q, samp, strong, sub, sup, var, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, applet
- ベストアンサー
- ホームページ作成ソフト
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルが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
お礼
ありがとうございました。 勉強します！