• 締切済み

CSS、IE6-7で要素が消えてしまいます。

CSS初心者です。 過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！ お願い致します。 当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。 シンプルな構造のページのはずなのですが、以下の HTML / CSS で リストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { 　　width: 100%; 　　text-align: center; 　　position: absolute; 　　bottom: 30px; 　　} #nav { 　　position: static; 　　width:700px; 　　height: 50px; 　　text-align:left; 　　margin:0px auto; 　　} html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; 　　} #nav ul li { float:left; width: 140px; 　　} #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; 　　} #nav ul li a:hover { color: #000; background-position: bottom; 　　} .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！

  • CSS
  • 回答数2
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

いやはや・・・なんでそんな複雑なHTMLやCSSになるのか?? 　カスケーディングスタイルシートのカスケーディングを使ってないし、デザインのためだけのclass名やid・・・。HTMLのマークアップは文書構造にしたがって。class名も一般的なものを--どんなクラス名が良いかはHTML5の要素名を見ればわかります。 HTML <body> ＿<div class="section"> ＿＿<div class="header"> ＿＿</div> ＿＿<div class="article"> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿＿<li><a href="">テスト</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> とかでよい。【タブはアンダーバーに置換してある】 CSSは、 div.section div.nav, div.section div.nav ul, div.section div.nav ul li{margin:0;padding:0;} div.section div.nav ul, div.section div.nav ul li{display:block;list-style:none;} div.section div.nav{position:absolute;top:0;left:0;height:30px;} div.section div.nav ul{ margin-left:auto;margin-right:auto;width:730px;} div.section div.nav ul li{width:140px;float:left;text-align:center;line-height:30px;margin-left:5px;} div.section div.nav ul li a{display:block;text-decoration:none;width100%;height:100%;background-color:gray;} div.section div.nav ul li a:visited{color:blue;} div.section div.nav ul li a:focus, div.section div.nav ul li a:hover{color:magenta;} div.section div.nav ul li a:active{color:green;} とか・・・・ 　hover,activeなどの指定はご自由に・・・。プルダウンなども追加できます。 　後でわかりやすいように、セレクタはグループ化し、同じ宣言は繰り返さないようにすると良いでしょう。この程度のCSSで長々と羅列すると、メンテナンスのとき大変です。スクロールしなくても設定のすべてが見渡せることは重要です。 テストしてませんから微調整が必要です。また、IE6以下にも対応させるならdiv.navをbody直下に置いたほうが良いかもしれません。 古いIEは、サイズやposition指定時の基準を「自分を包む直近のstatic以外のブロックを参照する」に従わない重大なバグがありますから・・

  • noris02
  • ベストアンサー率74% (56/75)
回答No.1

とりあえず、 #wrap { height:400px; width: 100%; ←height変更 background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { 　　width: 100%;height:50px;　　←height追記 　　text-align: center; 　　position: absolute; 　　bottom: 30px; 　　} にしてみて、表示されるか試してみて。 以下関係なさそうだけどメモ 1、#nav ul li a { 内　　text-indent:-9999;　を画面内にいれて云々 2、absolute＋floatのバグは 関係なさそうな気がするんだけど念のため 対処は <br style="clear:both">

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ＩＥ6とＩＥ７での表示の違いについて

    CSSでリストメニューを作成しています。 IE7では正常に表示できて、IE6ではリスト欄が 正常に表示できない現象に陥っており 原因はhoverにあるのではないかと、 csshover.htcをbehavior:url(csshover.htc);で取り込んでみたのですが改善されませんでした。 csshoverの絶対パスや相対パスについてはいずれも試してみたのですが やはり思うようにはいきませんでした。 下記にスタイルシート内容を添記します。 ie7では使用できて、ie6では使用できない部分など お気づきの点ありましたら、お力添え願います。 /* CSS Document */ body{ padding: 0px; } /* 背景 */ .nav-container-outer{ background: green; padding: 0px; height: 26px; background: url(images/menubg.png); } /* 幅寄せ左 */ .float-left{ float: left; } /* 幅寄せ右 */ .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /* メニュー */ #nav-container a{ padding:7px 0px 5px 0px; margin: 0px 0px 0px 0px; width: 130px; color: #FFFFFF; font-size:10px; font-family: 'HG丸ゴシックM-PRO'; text-decoration: none; background: url(images/menu.png); background-repeat: no-repeat; background-position: top; font-weight: none; } /* メニュー選択時 */ #nav-container a:hover{ color: #FFFFFF; background: url(images/menu-sel.png); background-position: center; } /* サブメニュー */ #nav-container div, #nav-container ul{ padding:0px 4px 10px 0px; margin:0px 0px 0px 0px; width: 175px; background: url(images/menusub.png); background-repeat: repeat-y; background-position: -1px 1px; border-bottom: 1px solid black; } /* サブメニュー項目 */ #nav-container div a, #nav-container ul a{ padding:2px 2px 2px 2px; margin: 4px 0px 0px 0px; width: 174px; background-color: #FFFFFF; background: url(images/menusub-sel.png); background-repeat: no-repeat; background-position: 0px 22px; font-size:10px; border-width:0px; border-style:none; color: #000000; } /* サブメニュー選択時 */ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(images/menusub-sel.png); background-repeat: no-repeat; color: #000000; } /* サブメニュー内見出し */ #nav-container .item-secondary-title{ cursor:default; padding: 4px 0px 8px 7px; color: brue; font-family: 'HG丸ゴシックM-PRO'; font-size:10px; width: 172px; background: url(images/menusub-t.png); background-repeat: no-repeat; background-position: -1px 0px; font-weight: bold; } /* 罫線 */ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /* メニュー項目間 境界*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }

    • 締切済み
    • CSS
  • 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
  • ドロップダウンメニューについて質問です。

    横並びのナビゲーションに更にドロップダウンをつけたいのですがうまくいかないので質問させていただきます。 メニューはそれぞれバッググラウンドで使ってます。 横並びのナビげーションはできました。 ロールオーバー時の画像の入れ替えもできました。 コレクション部分のドロップダウンがうまくいきません。 ドロップダウンで3つでるようにしたいと思うのですが 現状のHTML&CSSを記載します。 よろしくお願いいたします。 html <div id="navi"> <ul> <li class="nav_03"> <ul class="sub"> <li class="nav_001"></li> <li class="nav_002"></li> <li class="nav_003"></li> </ul> </li> </ul> </div> CSS #navi { height: 10px; width: 650px; margin-top: 34px; margin-left: 154px; margin-bottom: 75px; } #navi li { float:left; list-style-type: none; } .nav_03 a { height: 10px; width: 54px; background-image: url(../images/navi/catalog.jpg); background-repeat:no-repeat; display:block; text-indent:-9999px; margin-right: 42px; } .nav_03 a:hover { height: 10px; width: 54px; background-image: url(../images/navi/catalog_r.jpg); background-repeat:no-repeat; display:block; text-indent:-9999px; margin-right: 42px; #navi ul.sub li { float: none; height: 10px; width: 54px; list-style-type: none; } #navi ul.sub li a { background: none; height: 10px; width: 54px; } #navi ul.sub .nav_001 li a:hover { background-image: url(../images/navi/tops_r.jpg); height: 10px; width: 54px; display: block; background-repeat: no-repeat; position: absolute; z-index: 10; } #navi ul.sub .nav_001 li a{ background-image: url(../images/navi/tops.jpg); height: 10px; width: 54px; display: block; background-repeat: no-repeat; } /*サブメニューを、カーソルが乗るまで非表示にしておく設定*/ ul .nav_04 li ul { display: none; } /*サブメニューを、カーソルが乗った時に表示する設定*/ #navi ul li:hover .sub .nav_001{ display: block; position: absolute; z-index: 100; background-image: url(../images/navi/tops.jpg); height: 10px; width: 54px; display: block; float:left; line-height: 180%; } #navi ul li:hover .sub .nav_002{ display: block; position: absolute; z-index: 100; background-image: url(../images/navi/bottoms.jpg); height: 10px; width: 54px; display: block; float:left; line-height: 180%; }}

  • 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
  • IE6,IE7だとメニューが写真の裏に表示される

    こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!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="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }

  • CSSリストタグ

    <div class="test_box_1"> <ul> <li>テキスト <img src="img/icon.gif" width="20" height="20"></li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> </div> こういった記述をして、リストの横にアイコン画像を出そうとしたのですが、 アイコンを入れると、バランスが崩れます。 （アイコンを入れた下に余白ができてしまったり。） アイコンの高さを小さくしてみたりといろいろやってみたのですが できません。 制御する方法はあるのでしょうか？ ちなみに、CSSはこのように記述しています。 .test_box_1 ul { list-style-type: none; width: 100%; margin: 10px 0px 0px 10px; } .test_box_1 li { display: block; width: 30%; background-image: url(../images/list_arrow2.gif); background-repeat: no-repeat; background-position: 0px 3px; padding-left: 10px; float: left; } よろしくお願いします！

    • ベストアンサー
    • HTML
  • 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; }

  • CSSロールオーバーについて教えて下さい。

    CSSで横並びのメニューを作っているのですが、背景はそのまま表示され、a:hover時の画像がFirfoxだとずれてしまい、IEだと正しく表示されます。 以下、CSSですが、どこがいけないのでしょうか？ ご教授お願いします。 #gnavi { width: 600px; margin: 0; padding: 0; } #gnavi ul, #gnavi ul li { float: left; list-style-type: none; } #gnavi ul { width: 600px; height: 80px; background: url(./img/gnavi/g_navi.jpg) no-repeat; } #gnavi ul li a { display: block; width: 120px; height: 80px; text-indent: -9999px; font-size: 0; line-height: 0; } #gnavi ul li.gn01 a.active, #gnavi ul li.gn01 a:focus, #gnavi ul li.gn01 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat: no-repeat; background-position: left bottom; } #gnavi ul li.gn02 a.active, #gnavi ul li.gn02 a:focus, #gnavi ul li.gn02 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -120px -80px; } #gnavi ul li.gn03 a.active, #gnavi ul li.gn03 a:focus, #gnavi ul li.gn03 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -240px -80px; } #gnavi ul li.gn04 a.active, #gnavi ul li.gn04 a:focus, #gnavi ul li.gn04 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -360px -80px; } #gnavi ul li.gn05 a.active, #gnavi ul li.gn05 a:focus, #gnavi ul li.gn05 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -480px -80px; } ※メニューはw:600px h:160pxの画像にて背景を利用し各メニュー部分をスライドさせて表示をしようと考えております。 ※各メニューの大きさはw:120px h:80pxです。 以下、HTMLへのタグです。 <div id="gnavi"> <ul> <li class="gn01"><a href="#container" title="トップページ" class="active">トップページ</a></li> <li class="gn02"><a href="#container" title="サービス内容">サービス内容</a></li> <li class="gn03"><a href="#container" title="納品までの流れ">納品までの流れ</a></li> <li class="gn04"><a href="#container" title="会社概要">会社概要</a></li> <li class="gn05"><a href="#container" title="お問合せ">お問合せ</a></li> </ul> </div> 色々と試してはいるのですが、どうも表示が上手く行かず、もしかしたら自分で解決をしようと試み、初心？基本的なことを忘れて入るのではと思い、皆さんに構文を見て頂きご指摘を頂ければ幸いです。 どうぞ、宜しくお願いします。

    • ベストアンサー
    • HTML
  • cssのfloatで右にメニューを出す方法を勉強し

    cssのfloatで右にメニューを出す方法を勉強しています。 ヘッダの左にロゴ（クリックをするとTOPへ飛ぶ） 右にメニューを横並びで表示したいです。 ＿＿＿＿＿＿＿＿＿ ■　　　■■■■ ロゴ　　メニュー ＿＿＿＿＿＿＿＿＿ のようにしたいのです。 例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、 メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると ☆★☆★css☆★☆★ /* abc */ #header ul.abc{ float:right; margin: 0 ; padding: 0 ; width: 400px; } #header ul.abc li { float:left; display: inline; } /* 01 */ #header ul.abc li.01 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.01 a { display: block; background: url(../img/01.jpg) no-repeat top left; } #header ul.abc li.01 a:hover { display: block; background: url(../img/01_om.jpg) no-repeat top left; /* 02 */ #header ul.abc li.02 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.02 a { display: block; background: url(../img/02.jpg) no-repeat top left; } #header ul.abc li.02 a:hover { display: block; background: url(../img/02_om.jpg) no-repeat top left; /* 03 */ #header ul.abc li.03 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.03 a { display: block; background: url(../img/03.jpg) no-repeat top left; } #header ul.abc li.03 a:hover { display: block; background: url(../img/03_om.jpg) no-repeat top left; /* 04 */ #header ul.abc li.04 { width:100px; height:50px; margin:0 0 0 0; } #header ul.abc li.04 a { display: block; background: url(../img/04.jpg) no-repeat top left; } #header ul.abc li.04 a:hover { display: block; background: url(../img/04_om.jpg) no-repeat top left; ☆★☆★html☆★☆★ <div id="header"> <div class="logo"><a href="">ロゴ</a></div> <ul class="menu"> <li class="01"><a href=""01</a></li> <li class="02"><a href="">02</a></li> <li class="03"><a href="">03</a></li> <li class="04"><a href="">04</a></li> </ul> <div class="clear"></div> </div> これは例なんですが、 この記述できると思ったのですが、うまくいかず困っています。 何か足りないのでしょうか？それともcssで何か勘違いをしているのでしょうか？ お手数をおかけしますが、ご教授お願いします。

    • ベストアンサー
    • CSS
  • ＣＳＳレイアウト　マージンについて

    下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。 下記のようなレイアウトにてうまくmarginなどを行う場合は どのようにしたらよろしいでしょうか？ なお簡単にタグを記載してくださいますと幸いです。 ＣＳＳ body { 　　　margin:3em; color:#339900; background:#ffffff; } h1 { padding:0.1em; text-align:center; leter-specing:1em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .mainspace { background:#aaaaaa; width:480px; 　　　　　　margin-right:10px; 　　　　　　margin-left:10px ; position:absolute; left:260px; } .leftmenu { background:#bbbbbb; width:200px; position:absolute; left:50px; } .rightmenu { background:#cccccc; width:200px; position:absolute; right:50px; } ＨＴＭＬ <h1>メインタイトル</h1> <div class="mainspace"> <h2>サブタイトル</h2> <p> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> </p> </div> <div class="leftmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <div class="rightmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する