HTMLでメニューコンテンツの画像が表示されない原因と解決方法
- HTMLでメニューコンテンツの画像が表示されない場合、以下の原因が考えられます。まず、画像のパスが正しく指定されているか確認してください。また、画像ファイルが存在するかも確認してください。さらに、画像のロードが遅くなっていないかもチェックしてください。これらの問題を解決するためには、パスが正しく指定されているか、画像ファイルが存在するか、ロード速度を改善する方法を試す必要があります。
- HTMLのメニューコンテンツで画像が表示されない場合、以下の対処法が考えられます。まず、画像のパスを正しく指定しているか確認してください。次に、画像ファイルが存在するかも確認してください。さらに、画像のサイズが大きすぎてロードが遅くなっている可能性もあります。これらの問題を解決するためには、パスを修正したり、画像ファイルを再アップロードしたり、画像のサイズを最適化する必要があります。
- HTMLでメニューコンテンツの画像が表示されない理由としては、以下のような原因が考えられます。まず、画像のパスが正しく指定されていないか確認してください。次に、画像ファイルが存在するかも確認してください。さらに、画像のサイズが大きすぎてロードが遅くなっている可能性もあります。これらの問題を解決するためには、パスを修正したり、画像ファイルを再アップロードしたり、画像のサイズを最適化する必要があります。
- ベストアンサー
練習でHTMLを作っています
HPを作っているのですがメニューコンテンツの画像が表示されませんでした。 どうしたら表示されるようになるのか教えていただけないでしょうか? <!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=text/html; charset=Shift_JIS> <title>猫の飼い方・育て方</title> <link rel="stylesheet" type="text/css" href="neko_index.css" </head> <body> <div id="container"> <div id="header"> <h1>猫を飼うためには</h1> </div><br> <div class="PR1"><!--PR1--> <img src="image/PR.gif"alt="PR"> <a href=""> </a></div> <!--PR1--> </div> <div id="contents"> <h4>このサイトの主旨</h4> 職業訓練の一環として練習のためにweb製作をしている。参考として色々な猫に関するサイトのいいところを参照させていただいている。 多々文章が類似している箇所があると思いますがご容赦ください。今のところあくまでも練習のためのサイトです。</p> <h4>飼い主と我が家の猫紹介</h4> <ul> <li>まめたろう・・・山形県在住 30才・男 アトピー・花粉症・鼻炎持ち元小児喘息患者。病弱だった為に動物を飼うことが間々らなかったが大人になったため自己責任の名のもとに猫を飼い始めて猫主夫になる。</li><br> <li>ノアくん・・・美形・性格おとなしくてやさしいおにーちゃん。里親サイトで譲っていただいた雑種猫♂</li><br> <img src="image/top_noha.jpg"alt="ノアくん写真"width="600" height="350"vspace="10"> <a href=""></a> <br> <li>春ちゃん・・・美醜猫系・足長・耳たれのアメショ＆マンチカンMIX♀のマンチカン。里親サイトで譲っていただいた。耳たれ具合からして大本の血筋はスコテッシュ不フィールドだと思う。</li> <img src="image/top_haru.jpg"alt="春ちゃん写真"width="600" height="350"vspace="10"> <a href=""></a> </ul> <br></div> <div id="menu"> <div id="image"> <ul> <li>メニュー</li> <li><a href="contents/neko_wo_kauhouhou.html"><img src"image/menu_nav1.gif"alt="猫の里親になろう"width="100"height="50">猫を飼う方法</a></li> <li><a href="contents/.html"> 猫の里親になろう！</a></li> <li><a href="contents/.html">子猫の飼い方</a></li> <li><a href="contents/.html">猫のお手入れ</a></li> <li><a href="contents/.html">猫の体のしくみ</a></li> <li><a href="contents/.html">猫の病気</a></li> <li><a href="contents/.html">猫の習性</a></li> <li><a href="contents/.html">猫の気持ち</a></li> <li><a href="contents/.html">去勢と避妊</a></li> <li><a href="contents/.html">猫の種類</a></li> <li><a href="contents/.html">猫に芸を覚えさせよう</a></li> </ul> </div> </div> <!--PR--> <div id="menu under PR"> <img src="image/PR.gif"alt="PR"> <a href=""> </a></div> <!--PR--> <div id="footer"> <ul> <li><a href="contents/.html">home <li><a href="contents/.html">猫を飼う方法</li></a> <li><a href="contents/.html">猫の里親になろう！</li></a> <li><a href="contents/.html">子猫の飼い方</li></a> <li><a href="contents/.html">猫のお手入れ</li></a> <li><a href="contents/.html">猫の体のしくみ</li></a> <li><a href="contents/.html">猫の病気</li></a> <li><a href="contents/.html">猫の習性</li></a> <li><a href="contents/.html">猫の気持ち</li></a> <li><a href="contents/.html">去勢と避妊</li></a> <li><a href="contents/.html">猫が妊娠したら</li></a> <li><a href="contents/.html">猫の種類</li></a> <li><a href="contents/.html">猫に芸を覚えさせよう</li></a></li> <div align="center"> <br>Copyright(C) 猫の飼い方・育て方.All right Reserved. </div> </div><!--これはfooterの終止タグ--> </div><!--これはcontainerのdiv--> </body> </html> ｃｓｓ #menu { background-color:#191970; line-height:1.5; width:200px; padding:10px 0; } #menu ul{ background-color:#191970; margin:0; padding:0 10px; width:180px; line-height:1.5; } #menu li{ background-image:url(image/menu_background.gif); margin:0; padding:0; margin-left:0px; list-style: none; } a:link { color:#0000cc; text-decoration: none; } #contents{ background-image:url(image/contents_background-img.jpg); line-height: 1.5; width:650px; float:right; margin-left:20px; margin-bottom:20px; padding-top:30px; padding-bottom:30px; padding-left:20px; padding-right:20px; } #footer{ width:900px; font-size:10px; float:right; } #footer ul{ width:900px; margin:0; padding:0; text-align:center; } #footer li{ list-style:none; display:inline; }
- bmxqw241
- お礼率23% (6/26)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<li><a href="contents/neko_wo_kauhouhou.html"><img src"image/menu_nav1.gif"alt="猫の里親になろう"width="100"height="50">猫を飼う方法</a></li> この部分ですよね？ <img src=" という感じで、srcの後ろの=が抜けています。 あと、画像の場所とかリンク先とか、./とか../とか使ってちゃんと書いたほうがいいと思いますよ。
その他の回答 (2)
- 沙羅 聖児（@sara_seiji）
- ベストアンサー率25% (25/98)
ちゃんと引用符で囲まれていないために表示されていないんだと思います。 ＞background-image:url(image/menu_background.gif); ここを background-image:url("image/menu_background.gif"); このように変更してください。
お礼
ご指摘ありがとうございました。なかなか慣れないと細かいミスは見つけられませんね。どうもありがとうございました。
- takyas
- ベストアンサー率57% (107/186)
imageフォルダに画像がサーバーにアップされていると仮定しますが、imageフォルダの階層は上のHTMLファイルがあるのと同じ階層ですか？ 参考 http://masaboo.cside.com/new_html1/ht_67.htm
お礼
参考URLありがとうございます。何かありましたらまたご指導お願いします。
関連するQ&A
- 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
- CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい
職場でネットショップのWEB管理をしているものですが、サイト上のヘッダーに画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたいのですが、なんせCSS初心のためどこをどう指定すれば画像なしの角丸タブメニューっぽくなるのかわかりません。できたら各メニューの下段にもサブメニューリンクを追加したいのですが・・・ どうか良きアドバイスよろしくお願いします。 感じとしてはここのサイトっぽいタブメニューができればと・・・ CSS <style type="text/css"> <!-- #demo-container{padding:2px 2px 0 60px;margin:0 0 15px 0;background:#67A897;width:870px;} ul#simple-menu{list-style- type:none;width:100%;position:relative;height:27px;font- family:"inpact",Arial,sans-serif;font-size:13px;font- weight:bold;margin:0;padding:11px 0 0 0;} ul#simple-menu li{display:block;float:left;margin:0 0 0 9px;height:27px;} ul#simple-menu li.left{margin:0;} ul#simple-menu li a{display:block;float:left;color:#fff; background:#4A6867;line-height:27px;text-decoration:none; padding:0 17px 0 18px;height:27px;} ul#simple-menu li a.right{padding-right:19px;} ul#simple-menu li a:hover{color:#;background:#708090;} ul#simple-menu li a.current{color:#708090;background:#fff;} ul#simple-menu li a.current:hover{color:#9370DB;background:#fff;} --> </style> HTML <div id="demo-container"> <ul id="simple-menu"> <li><a href="#" title="MENU1" class="current">MENU1</a></li> <li><a href="#" title="MENU2">MENU2</a></li> <li><a href="#" title="MENU3">MENU3</a></li> <li><a href="#" title="MENU4">NENU4</a></li> <li><a href="#" title="NENU5">NENU5</a></li> <li><a href="#" title="NENU6">NENU6</a></li> </ul> </div>
- ベストアンサー
- HTML
- ドロップダウンメニューについて
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>
- 締切済み
- ホームページ作成ソフト
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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 href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- HTML/CSSで配置の仕方がわかりません。
メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p> ← 問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }
- ベストアンサー
- HTML
- 横並びのメニューボタンについて
float:leftでメニューボタンを横並びにしています。 表示を100％にするとうまく並ぶのですが、 100％以上にすると左端に隙間が、 100％未満にすると、ある時点からメニューボタンが2列になってしまいます。 これを回避する方法はあるでしょうか。 <<html>> <body> <div id="wrap"> <img src="image/photo1.jpg"> <div id="navi"> <!-- ナビボタン ここから --> <ul class="menu"> <li><a href="index.html" >ホーム</a></li> <li><a href="page1.html" >ページ１</a></li> <li><a href="page2.html" >ページ２</a></li> <li><a href="page3.html" >ページ３</a></li> <li><a href="page4.html" >ページ４</a></li> <li><a href="page5.html" >ページ５</a></li> </ul> </div> <!-- /navi --> </div> <!-- /wrap --> </body> <<css>> body { text-align: center; background-color:#EEEEEE; font-size: 12px; margin-top: -10px } #wrap{ margin: 0 auto; text-align: left; background-color: #ffffff; width: 752px; border: 1px solid #404040; border-collapse: collapse; padding: 0; } .navi{ width:750px; } ul.menu { margin: -5 0 0 0px; padding :0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 125px; line-height: 30px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(menu1.jpg); background-repeat: no-repeat; color: #ffffff; font-size: 12px; } ul.menu li a:hover{ background-image: url(menu2.jpg); color: #404040; } よろしくお願いします。
- ベストアンサー
- HTML
- ブロック表示すると重なってしまいます！！
下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>
- ベストアンサー
- CSS
- グローバルナビの画像のサイズ変更方法
グローバルナビのサイズ指定をして大枠のwidthを1000pxにして、ひとつひとつのナビのサイズを200px×5で調節して1000pxでナビ同士の横の隙間を無くすように合わせたいです。 自分なりにやってみたのですが、どうしてもわかりません。 プログラミングをどのように変更すれば良いのでしょうか。よろしくお願いします。 html部分 <div id="globalnavi"> <nav> <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#">Portfolio</a></li> <li><a href="#"><span>Contact</a></li> </ul> </nav> </div> css部分 #globalnavi{ height:36px; width:1000px; margin-top:0px; margin-bottom:5px; background-color:white; } #globalnavi ul{ list-style-type:none; margin:0; padding:0; margin-top:1px; margin-bottom:4px; } #globalnavi li{ float:left; width:200px; height:20px; margin-bottom:10px; margin-top:5px; margin:0px; padding-left:10px; } #globalnavi a{ text-align:center; display:block; padding-top:8px; padding-bottom:15px; margin-bottom:-1px; width:160px; background-image:url(images/btn046_06.gif); background-repeat:no-repeat; color:blue; } #globalnavi a.home{ width:160px; background-image:url(images/btn046_05.gif); } #globalnavi a:hover{ background-image:url(images/btn046_10.gif); }
- ベストアンサー
- CSS
- firefoxでのリストについて
今までIEばかりでしたので、firefoxで表示した際のデザインの崩れについてなかなか理解できずにいます。 詳しい方にアドバイスを頂ければ幸いです。 divで１つ、大きな枠を作り、その中に2つのDIVを横に並べています。 左側のみwidthの指定をし、そのなかにリストで作ったメニューを入れています。問題はこのメニューで、メニューの下に画像や文字などを普通に続けて書きたいのですが、メニューの後に書いたものが、メニューの後ろ側に表示されてしまいます。 分かりにくいと思いますが、要するに、メニューと重なってしまう状態です。メニューの後に書いた文章が、メニューが存在しない場合の位置に表示され、その上にメニューが覆いかぶさるように重なって表示されています。 どうすればいいのでしょうか？ 下記がCSSとHTMLです。 CSSーーーーーーーーーーー #big{ margin:auto; padding: 0px; background-color:#ff0000; WIDTH: 800px; height: 100%; } #left{ FLOAT: left; WIDTH: 180px; height: 100%; margin-right: 50px; margin-left: 0px; text-align: center; background-color: #FFFFFF; } #center{ text-align: left; background-color: #ffffff; } ul.menu { margin-left: 0px; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; height: 40px; width: 150px; /* 幅 */ background-color: #ffffff; list-style-type: none; } ul.menu li { margin: 0; padding: 0; font-size: 15px; /* 文字サイズ */ font-weight: bold; } ul.menu li a { padding: 11px 20px; display: block; color: #000099; background-image: url(menubotan.gif); text-decoration: none; } ul.menu li a:hover { color: #d63300; background-image: url(menubotan2.gif); } htmlーーーーーーーーーーー <div id="big"> <div id="left"> <UL class="menu"> <li><a href="index.html">TOPページ</a></li> <li><A href="mainpage.html" target="_self">メインページ</A></li> <li><A href="matsuri.html" target="_self">祭りについて</A></li> <li><A href="sannka.html" target="_self">参加申し込み</A></li> <li><A href="kanbu.html" target="_self">幹部紹介</A></li> <li><A href="syozaiti.html" target="_self">所在地</A></li> <li><A href="pics.html" target="_self">動画・写真館</A></li> <li><A href="bbs.html" target="_self">掲示板</A></li> <li><A href="links.html" target="_self">リンク集</A></li> <li><A href="otoiawase.html" target="_self">お問い合わせ</A></li> </ul> <br> ここに書いた文字をメニューに続けて表示させたいのです。 </div> <div id="center"> メイン内容 </div> </div>
- ベストアンサー
- HTML
- リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
お礼
まさにその通りでした。私としたことが…(笑) ご指摘ありがとうございました。