• 締切済み

ブログのメニューバー内に画像表示をしたいのですが

どうかお助け下さい。 以下の画像のように、メニューバー内のテキスト隣に画像表示をしたいのですが・・・ http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/2012y06m13d_134350964.jpg http://news4vip.livedoor.biz/ どうしてもうまくいきません。 以下のURL先にあるメニューバー表示方法を使ったのですが・・・ http://10plate.blog44.fc2.com/blog-entry-176.html どうしても↓のようにズレが出てしまいます。 http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/2012y06m13d_134411361.jpg 具体的には以下のように設定しました。 ▼HTMLタグ <ul id="menu_bar"> <li><a href="<%url>" style="width:120px;">トップページ</a></li> <li><a href="http://pachislo777question.blog.fc2.com//?xml" style="width:70px;"><Img Src="http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/RSS.png" Width="30" Height="30">RSS</a></li> <li><a href="<%url>" style="width:120px;">???</a></li> <li><a href="<%url>" style="width:120px;">???</a></li> <li><a href="<%url>" style="width:120px;">???</a></li> <li><a href="<%url>" style="width:120px;">???</a></li> </ul> 画像に対してAlignタグでテキストを回り込ませると、”RSS”のテキストが自動で中央中段表示になっているようで、どうしても崩れてしまいます。 又、ボタン自体を画像表示させようとも考えたのですが、やはり崩れるようで諦めました・・・ どのようにすればメニューバー内に画像を表示させる事ができるでしょうか？ どうぞよろしくお願いします。

みんなの回答

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

画像は背景画像にする。 <li>の背景にするか、<a>の背景にするか？は、ケースバイケース <li style="background: url(http://blog-imgs-54.fc2.com/p/a/c/pachislo777question/RSS.png) no-repeat 2% 50%;"><a href="http://pachislo777question.blog.fc2.com//?xml" style="width:70px;">RSS</a></li>

GIGAmegane
質問者

補足

下記のように設定してみましたが、どうもうまくいきませんでした・・・ ■<li style="background: url(画像URL) no-repeat 2% 50%;"><a href="指定先URL" style="width:70px;">RSS</a></li> 宜しければコチラもお願いします。 http://oshiete.goo.ne.jp/qa/7531024.html

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • メニューバーが消えて困っています。

    メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記に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; }

    • ベストアンサー
    • CSS
  • Firefoxだとメニューバーが崩れてしまいます。

    movable typeでなんとかここまできました。 http://www.mamyu.jp これをFirefoxでみますと、メニューの部分だけ大幅に崩れてしまいます。 スタイルシートの問題だと思うのですが、 その部分は、 #nav { margin-left: 0; padding-left: 0; list-style-type: none; border-top: 0px solid #999999; border-right: 1px solid #999999; border-bottom: 1pxsolid #999999; background-image: url(images/beansmenu01.gif); background-repeat: repeat-x; background-position: bottom; height:25px; width: 849px; float: left; } #nav a { font-size: 12px; font-weight: bold; color: #0000CC; text-decoration: none; background-repeat: no-repeat; background-position: left top; display: block; height: 25px; width: 121px; padding-top: 6px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } #nav a:hover { color:#cc3300; background-repeat: no-repeat; } #nav li { float: left; width: 121; } としており、 テンプレート部分は、 <ul id="nav"> <li><a href="http://www.mamyu.jp/">ＴＯＰ</a></li> <li><a href="http://www.mamyu.jp/000">ブログ</a></li> <li><a href="http://www.mamyu.jp/001">政治信条</a></li> <li><a href="http://www.mamyu.jp/002">プロフィール</a></li> <li><a href="http://www.mamyu.jp/003">政治家養成塾</a></li> <li><a href="http://www.mamyu.jp/007">競馬場問題</a></li> <li><a href="http://www.j-beans.jp">ホームページ</a></li> </ul> としております。 これでどうしてFirefoxだと大きく崩れてしまうのか。崩れない方法はないものかわからないままです。それぞれのメニューバーの左側にでる○印がなんとも邪魔なのです。。。。

  • IE6で見るとメニューバーが崩れてしまいます

    ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }

  • 全体幅とメニューバーの幅が合いません

    レイアウトとしてヘッダーの下にメニューバーをおいています。 メニューバーは5項目あり、各項目幅151px。 右側に1pxのボーダーを入れています。 最後の項目の右側のボーダーは"なし"にしています。 (151 x 5) + 4 = 759 この幅に合わせて全体幅を759pxに設定しているのですが、幅が合いません。（メニューバーが少し短くなってしまいます） ちなみに各項目の幅を152にすると全体の幅は760でも大丈夫のようです。 ブラウザーで確認するとピッタリ来ています。 ただ『ページ編集』ではズレが生じています。 ホームページビルダー13を使用しています。 メニューバーは箇条書きを回り込みで横一列にしています。 ↓参考として <html> <div id="container"> <ul id="menu"> <li><a href="toppage">トップページ</a> <li><a href="konnichiha">こんにちは</a> <li><a href="ohayou">おはよう</a> <li><a href="konnbnwa">こんばんは</a> <li class="menulast"><a href="odaijini">お大事に</a> </ul> </div> <css> div#container{ width : 759px; } ul#menu li{ list-style-type : none; float : left; } ul#menu{ padding-left : 0px; margin-left : 0px; font-size : 0.75em; background-color : #0071e1; height : 30px; margin-top : 0px; margin-bottom : 30px; } ul#menu li a{display : block; line-height : 30px; color : white; text-decoration : none; text-align : center; width : 151px; background-color : #003a75; border-right-width : 1px; border-right-style : solid; border-right-color : white; } ul#menu li a:hover{ background-color : #0071e1; } ul#menu li.menulast a{ border-right-style : none; } なぜ759pxの幅では合わないのか悩んでおります。 どなたかアドバイスよろしくお願いします。

    • ベストアンサー
    • CSS
  • １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。

    はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }

  • 幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・

    お世話になります。 メニュー（リスト）のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。 　マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー１</a></li> <li id="02"><a href="#">メニュ－２</a></li> <li id="03"><a href="#">メニュ－３</a></li> <li id="04"><a href="#">メニュ－４</a></li> <li id="05"><a href="#">メニュ－５</a></li> <li id="06"><a href="#">メニュ－６</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} （何か、他に必要な情報があれば、言ってください！）

    • ベストアンサー
    • CSS
  • CSSで組んだメニューのセンターへの設置が出来ません

    初めてトピックを立てさせていただきます。宜しくお願いします。 CSSを使い、横型でオーバーフローするメニューを作っています。 ベースとなるバー画像の上に各コンテツへのリンクメニュー画像を バー画像の中心に置きたいのですが、「中心に置く」これが うまく行きません。丁度この教えて！gooのメニューバーと同じ様に したいのです。各コンテツンツ画像の幅を一定にした場合の設置、 バー幅一杯にメニューを配置した場合の方法は検索するとヒット するのですが、今回の様な場合の例となるサイトが無かったので この場をお借りしました。 JSという手もあるとは思うのですが、今回はCSSでの設置を したいと思っていますのでご協力お願いします。 動作環境 Mac OS 10.4.11 Safari 3.2.1 Firefox 2 ■ボディー部■ <ul id="menu"> <li><a href="./about.html" class="m_01">01</a></li> <li><a href="./about.html" class="m_02">02/a></li> <li><a href="./about.html" class="m_03">03/a></li> </ul> ■CSS部■ ul#menu{ background:url(img/m_off.gif) no-repeat; list-style:none; width:800px; height:30px; } ul#menu li{ list-style:none; float:left; } ul#menu a{ display:block; height:30px; text-indent:-100px; overflow:hidden; } /**//*/ overflow:auto; /**/ /*------off*/ a.m_01 { background:url(img/m_01.gif) no-repeat; width:101px;} a.m_02{ background:url(img/m_02.gif) no-repeat; width:108px;} a.m_03{ background:url(img/m_03.gif) no-repeat; width:80px;} /*------hover*/ a:hover.m_01{ background:url(img/m_01.gif) no-repeat 0px -30px;} a:hover.m_02{ background:url(img/m_02.gif) no-repeat 0px -30px;} a:hover.m_03{ background:url(img/m_03.gif) no-repeat -0px -30px;}

    • ベストアンサー
    • HTML
  • ページを開いた直後のサブメニューを非表示

    現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }

  • リンクページがちゃんと画像表示されない

    PHP5.0、Smartyで開発しています（個人サイト） リンクを押すと、リンクページ（自サイト）は表示されるのですが、 画像などが表示されないことがあります。 .tplファイルなので、↓の同じリンクをいくつものファイルに書きましたが、ふつうにちゃんと表示されるページもあれば、リンクページの画像落ちといったページにもなります。 これはどうしてでしょうか？ </div><!--header--> <ul id="menu"> <li><a href="{$info.back_url}">TOP</a></li> <li><a href="{$info.http_url}">記事一覧</a></li> <li><a href="{$info.http_url}/archive">過去ログ</a></li> <li><a href="{$info.http_url}/search">記事検索</a></li> <li><a href="{$info.http_url}/rss">RSS</a></li> <li><a href="{$info.https_url}/admin">管理者用</a></li> </ul> <img src="./image/main_img.jpg" alt="" width="760" height="340" id="main-img" />

    • ベストアンサー
    • PHP
  • メニューの横スクロールバーを消したい

    色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。 ※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。 ドロップダウンメニューをセンタリング表示しているのですが、 どうあっても横スクロールバーが出てしまいます。 下記サイトではoverflow:hiddenを使用すると書いていますが 使用するとドロップダウンが非表示になってしまうため難しいです。 http://www.coolwebwindow.com/csstips/csstechnic/000241.php 【html】 <div id="global-nav"> <ul class="menu" id="menu"> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li>ドロップダウン</li> </ul> </li> <li class="a">イメージ画像</a> <ul> <li><a href="dl-1.html">ドロップダウン</a></li> <li><a href="dl-2.html">ドロップダウン</a></li> <li><a href="dl-3.html">ドロップダウン</a></li> </ul> </li> </ul> </div> 【css】 div#global-nav { position:relative; width: 1000px; height: 40px; margin: 0 auto; background: #999; } ul.menu { 　　position: relative; 　　list-style:none; 　　left:50%; 　　float:left; 　　margin:0; padding:0; 　　text-align: left; } ul.menu * { 　　margin:0; 　　padding:0; } ul.menu a { 　　display:block; color:#000; text-decoration:none; } ul.menu li.a { 　　position: relative; left:-50%; float:left; } ul.menu ul { 　　position:absolute; top:40px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none; } ul.menu ul li { 　　position:relative; 　　border-top:none; 　　width:180px; 　　margin:0; } ul.menu ul li a { display:block; padding:3px 7px 5px; background-color:#d1d1d1; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul ul { left:180px; top:-1px; } ul.menu .menulink { width:180px; } ul.menu .menulink:hover, ul.menu .menuhover { background:url(images/header_over.gif); } ul.menuの中のleft:50%を消すと横スクロールバーが消える事はわかったのですが、 それだと中央揃えにならないので…。 どうか宜しくお願いします！

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する