- 締切済み
cssでロールオーバーした画像が、一部だけずれてしまいます。
cssで、ulやdisplay:blockを使って、画像が８個横に並んだメニューを作り、ロールオーバーさせていたのですが、横に並んだメニューの一番左の画像だけが、マウスのオンオフに関係なく、なぜか3pxほど下に沈んでしまうのです。 始めは普通に表示されていたのですが、メニューより下の項目を色々いじっている間に、いつの間にやら下がっていました。 もしや、変なマージンやパディングがいけないのではと思い、メニュー以下の項目を全部消してみたのですが、元には戻りませんでした。 cssバグなども色々調べてみたのですが、もう本当にわかりません。 cssやhtmlをここに書きたいのですが、文字数制限にひっかかってしまうので、何かこういった現象の原因になりそうな要因、できれば解決方があれば教えていただけると幸いです。 お力を貸していただければと思います。 よろしくお願いします。
- Tylar
- お礼率25% (3/12)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
position:relative;を使ってたりしませんか？
- key-child
- ベストアンサー率54% (25/46)
> 文字数制限にひっかかってしまうので 何も全部出す必要はない。現象が起きる最小のソースを希望。 それを作成することにより、自分で解決する場合もある。 > なぜか3pxほど下に沈んでしまうのです どのブラウザで調べたか、書いた方がいい。
関連するQ&A
- cssを使ったロールオーバについて どちらの記述が良いでしょうか？
cssを使ったロールオーバについて どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。 とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- CSSで横並びのロールオーバーの表示がおかしいです
知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。 当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。 症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。 オンマウスも効いていません。 使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。 以下ソースです。 /*---HTML*/ <?xml version="1.0" encoding="shift_jis "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <title>###</title> </head> <body> <div id="main"> <div id="menu"> <ul> <li class="menu1"><a href="#">sample</a></li> <li class="menu2"><a href="#">sample</a></li> <li class="menu3"><a href="#">sample</a></li> <li class="menu4"><a href="#">sample</a></li> <li class="menu5"><a href="#">sample</a></li> </ul> </div> </div> </body> </html> /*---CSS*/ #menu{ width: 950px; height: 60px; margin-top: 20px; margin-bottom: 20px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; } #menu li{ width: 190px; margin: 0px; padding: 0px; float: left; text-indent: -9999px; } #menu a{ display: block; width: 100%; height: 60px; background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a{ background-position: 0px 0px;} .menu2 a{ background-position: -190px 0px;} .menu3 a{ background-position: -380px 0px;} .menu4 a{ background-position: -570px 0px;} .menu5 a{ background-position: -760px 0px;} #menu a:hover{ background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a:hover{ background-position: 0px -60px;} .menu2 a:hover{ background-position: -190px -60px;} .menu3 a:hover{ background-position: -380px -60px;} .menu4 a:hover{ background-position: -570px -60px;} .menu5 a:hover{ background-position: -760px -60px;} ご指摘を宜しくお願いいたします。
- ベストアンサー
- ブログ
- CSS による画像を使ったロールオーバー
よろしくお願いします。 CSSを使って、画像のロールオーバーをしようとしています。 HTMLの構成としては、 タイトル画像（幅800px）の下に、CSSを使って作った ロールオーバーするメニューを横並びで配置したいと思っています。 http://edo-freiheit.sakura.ne.jp/eblog/2006/06/css_2.html のサイトを参考に（ほとんどまる写しですが）して、 作成してみたのですが、HTML全体を左寄せしても、中央寄せ してもロールオーバーしたメニューの項目の左側に隙間というか 余白が入ってしまい、上のタイトル画像とズレが生じててしまいます。 この余白をなくす方法がありましたらお教え下さい。
- ベストアンサー
- HTML
- ロールオーバーで画像がずれない方法
初めてWebサイトを作成しており、今はグローバルナビゲーションを作成していますが、ロールオーバーしたときに、位置が微妙にずれてしまいます。 ちなみに画像の作成は、フォトショップCS6で次のように作成しました。 (1)カンバスサイズを、幅800px、縦60pxで作成 (2)長方形ツールを使い、境界線ありの画像を5つ作成し、手動で横に整列させる。 ※一つ当たりのサイズは幅160px、縦30pxなので、全体の幅は800、縦30です。 (3)ロールオーバー用の画像のために、上記5つのボタンを複製し、色を変える (4)通常表示用とロールオーバー用の画像を、手動で上下に連結させる ※これで幅800px、縦60pxになったので、カンバスサイズと同じサイズになりました。 (5)手動にて連結した画像をカンバスサイズの位置に合わせる (6)テキストツールで会社概要など5つ作成し、上5つの画像の中心に合わせる (7)上5つにある会社概要などの文字を一括コピーする。 (8)一括コピーした文字を、手動で下5つの画像の中心へ合わせる ※大変でしたが、グリッド機能を使って、調整しました。 以上のような流れで全体のグローバルナビゲーションのボタンを作成し、そして次の用にHTMLとCSSを入力したのですが、ロールオーバーした時に、ボタンも文字も微妙にすれてしまいます。 フォトショップの使い方が悪いのか、HTMLとCSSの使い方が悪いのか、どちらなのかわかりません。 いろいろな方からご教示を頂きたいです。本当にお願い致します！！ <!-- /以下HTML --> <ul id="globalnavi"> <li id="menu1"><a href="#"></a></li> <li id="menu2"><a href="#"></a></li> <li id="menu3"><a href="#"></a></li> <li id="menu4"><a href="#"></a></li> <li id="menu5"><a href="#"></a></li> </ul> <!-- /以下CSS --> #globalnavi { margin: 0; padding: 0; } #globalnavi li { width: 160px; height: 30px; float:left; text-align: center; line-height: 3.5; margin:0; padding-left:0; } #globalnavi a { float:left; display: block; text-decoration: none; width: 160px; height: 30px; background-image: url(./img/menu-all.gif); background-repeat: no-repeat; margin:0; padding-left:0; } #menu1 a { background-position: 0px 0px; } #menu2 a { background-position: -160px 0px; } #menu3 a { background-position: -320px 0px; } #menu4 a { background-position: -480px 0px; } #menu5 a { background-position: -640px 0px; } #globalnavi a:hover { text-decoration: none; background-image: url(./img/menu-all.gif); background-repeat: no-repeat; margin:0; padding-left:0; } #menu1 a:hover { background-position: 0px -30px; } #menu2 a:hover { background-position: -160px -30px; } #menu3 a:hover { background-position: -320px -30px; } #menu4 a:hover{ background-position: -480px -30px; } #menu5 a:hover{ background-position: -640px -30px; }
- ベストアンサー
- CSS
- Dreamweaver MX でリストを作成すると左に余白がでてしまう。
DreamWeaver MX でCSSで画面左の位置にサイドメニューを作っています。 メニューは縦並びです。 メニューの項目を<ul><li>○○○</li></ul>のような形で記述し、CSSでulとliの左マージン・左パディングをそれぞれ０pxに指定しています。 ブラウザではメニュー項目の左に余白もなく問題なく表示されているのですが、DreamWeaver上の編集画面ではメニューの項目の左に余白がでてしまい、その分右にずれてレイアウトが崩れてしまいます。 編集画面でも左に余白がでないようにするには どうすれば良いでしょうか？ お手数ですがご解答頂けますと幸いです。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳの関与した表以外の表を作りたい
ホームページ作成初心者です。コンテンツ部分に表（テーブル）を作りました。 ＣＳＳでパディング、マージンだけ指定してます。 ほとんどの表はこれでいいのですが、これとは別に表を作りたいのです。 その場合ＣＳＳが関与してしまいますが関与しないようにするにはどうすればいいのでしょうか？ 何種類か作らないといけないので困っています。できれば横に２列（個）、下に３列（個）を 少しだけ間を空けてくっつけたいのですが作りかたが分かりません。画像添付しました。 どなたかご教授ください。
- ベストアンサー
- ホームページ作成ソフト
- CSSでメニューボタンを横一列にしたかったのですが、一ヶ所に固まります。
CSSでメニューをつくろうとおもい、画像で作ったのですが、、それをul li でリスト化し、 div#nav ul { list-style-type: none; } div#nav ul li{ display: inline; left: 10px; top: 50px; width: 710px; } といったかんじで 横一列のメニューを作ったのですが、 left: 10px; top: 50px; の設定がいけないのか、全部の画像が左 10px 上から50pxのところにあつまってしまい、横一列に並んでくれません。 どうすればよこいちれつにならんでくれるようになりますか？もしくは、もっとよい画像を用いたメニューのつくりかたはありますでしょうか、お願いいたします。
- ベストアンサー
- CSS
- CSSでメニュー横並びの方法
ただいま、自社サイトを制作中なのですが、 グローバルメニューを横に並べるところでつまづいています。 イメージしているグローバルメニューはこんな感じです。 http://antenna7.com/ 文字だけ画像で下のラインはcssのborderで入れたいと考えています。 またメニュー数は5つで1つの幅は180px、それぞれに15pxずつ間隔を 空けたいと考えています。(1番左は15px空けない) 自分なりに調べたのですが、<ul><li>でやるべきなのかどうなのか、 どのように組めばよいのか分かりません。 皆様、お忙しいところ申し訳ございませんが、至急よろしくお願い致します。
- 締切済み
- HTML
- 画像にロールオーバーするとメニューが出てくる
画像にロールオーバーするとプルダウンメニューが出てくるものを作りたいと思っています。 さらに、画像に対してのメニューの位置も色々に設定したい(画像の上、下、左、右など)のですが、可能でしょうか。 可能であればどのように作ればよいのか教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSのロールオーバーがIEで崩れます
CSSのロールオーバーでメニューを制作しています。 背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。 （IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。） しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。 ロールオーバー自体でなく、他の部分がおかしいのでしょうか？ ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。 タイトル画像が120x26で、その横に絶対配置で並べています。 ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、 問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。 （メニュー項目の数等一部省略しているところがあります。） よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> ～略～ </div>
- ベストアンサー
- CSS
