- 締切済み
IE6でナビ下に隙間ができてしまいます。
横並びのナビの下に隙間無く内容を入れたいのですが、IE6だとナビ下に２ミリ位の隙間ができてしまいます。 いろいろ調べてIE6対策でline-height: 0・margin: 0を追加してもうまくいきません。 何が間違っているのか、ご支持お願いします。 <body> <div id="wrapper"> <div id="headnavi"> <ul> <li id="A"><a href=""><span>A</span></a></li> <li id="B"><a href=""><span>B</span></a></li> <li id="C"><a href=""><span>C</span></a></li> <li id="D"><a href=""><span>D</span></a></li> <li id="E"><a href=""><span>E</span></a></li> <li id="F"><a href=""><span>F</span></a></li> </ul> </div><!-- / #headnavi --> <div id="pro_back"> <p>○○○○○</p> </div><!-- / #pro_back --> </div><!-- / #wrapper --> </body> </html> *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } body { width: 100%; font-size: 75%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 180%; color: #333; } #wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } #pro_back { width: 960px; height: 623px; background-image: url(images/pro_back.gif); background-repeat: no-repeat; margin: 0; } #headnavi { width:960px; height: 33px; margin: 0; } #headnavi ul { line-height: 0; margin: 0; } #headnavi ul li a { display: block; width: 172px; text-decoration: none; height: 33px; } #headnavi ul li a span { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; } ul li#A a { position: absolute; left: 890px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/topbotan.gif); margin: 0; } ul li#B a { position: absolute; left: 632px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/link.gif); margin: 0; } ul li#C a { position: absolute; left: 474px; top: 0px; background-repeat: no-repeat; background-image: url(images/mail.gif); margin: 0; } ul li#D a { position: absolute; left: 316px; top: 0; background-repeat: no-repeat; background-image: url(images/illustration.gif); margin: 0; } ul li#E a { position: absolute; left: 158px; top: 0; background-repeat: no-repeat; background-image: url(images/designwork.gif); margin: 0; } ul li#F a { position: absolute; left: 0px; top: 0; background-position: 0 0; background-repeat: no-repeat; background-image: url(images/profile.gif); margin: 0; }
- kanaflan
- お礼率81% (72/88)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
失敗１)デザインのためにHTMLを書かない!! 何のためにスタイルシートを使うのか？ 文書構造とプレゼンテーションを分離するためです。 ごく簡単な例を例を挙げておきます。たったこれだけです。 ・DOCTYPEスイッチ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=f&aqi=g1&aql=&gs_l=hp.3..0.1849.9080.1.9617.16.13.1.2.2.0.226.1573.3j9j1.13.0...0.0.D-ytW0KCBrY&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=bb279f01abc1fd92&biw=1024&bih=619 )で、標準モードで起動させること。 でないと、苦労します。そもそもウエブ標準で作成すること。 HTMLはHTML4.01strictで記述しましょう。 ・HTMLに文書構造と関係ないものは書かない。下記ソース参照 ・スタイルシートはHTMLの文書構造を元に記述する。 この順番を間違えたらダメです。HTMLを書くときデザインは考えない。そうしないと先でデザインを変えるとき泣きますよ。 ★多分原因はIE6のブロックサイズの計算方法の差です。 ★下記ソース中の最後のdiv.section h2に対するmargin:0を消すと隙間が広がります。 (注意) *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } の指定は絶対にすべきではあません。これをするとブラウザが本来もつスタイル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )をすべて消してしまいます。そのため、すべてのスタイルを追記しなければならなくなり、煩雑になります。 元々オーサリングツールの仕業ですが、HTMLとスタイルシートの基本を知らない人がそのまま流用しているものです。 (注意) 今回は、IE6を対象とするので<li>のIDは放置しています。(IEを無視するなら、つけなくて良いです。)つけるのならサンプルのように具体的にわかるものにしておきましょう。スタイルシートを先で書き直すときに楽です。なお、本来は要素セレクタで記述すべきです。 div.header div.nav ul li a[href="./b"]{background-image:url(images/link.gif)} というふうに。 (注意) スタイルシートに、同じプロパティの設定は２回書かないようにすると小さくなります。 ・継承するプロパティは上位に書いて継承させる。 その後で詳細度の高いセレクタで上書きする。 ・同じプロパティを記述するセレクタはグループ化する。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み--HTML4.01strict+CSS2.1 タブは＿に置換してありますから、戻してテストすること。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ちなみに、IE5でもきちんと表示されます。また、リキッドデザインにしてありますからスマホでもスクロールなしでＯＫなはずです。ウィンドウ幅も変えて試してください。 なお、スマホなど新しいブラウザのみをターゲットにするならCSS3のbackground-sizeで背景を伸縮できます。 もう一点、IE6はマイクロソフト自身が撲滅キャンペーン( http://www.ie6countdown.com/ )をしているブラウザです。シェアもとても低い( http://lhsp.s206.xrea.com/misc/browser-share-version.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=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;}/* 全称セレクタで消すことは避ける。 */ p{margin:0;line-height:1.5em;text-indent:1em;} div.header,div.section,div.footer{ ＿width:100%;margin:0 auto;min-width:640px;max-width:960px; } div.header div.nav{height:33px;line-height:33px;} div.header div.nav ul,div.header div.nav ul li{ ＿display:block;list-style:none;margin:0;padding:0; } div.header div.nav ul li{float:left;width:20%;position:relative;} div.header div.nav ul li a{ ＿display:block;width:100%;height:100%; ＿background:url(images/topbotan.gif) no-repeat blue; } div.section{background:url(images/pro_back.gif) no-repeat 50% 50%;min-height:623px} div.section h2{margin:0;line-height:1.6em;} div.header div.nav ul li a span{visibility:hidden;} #goLink a{background-image:url(images/link.gif)} #goMail a{background-image:url(images/mail.gif)} #goIllustration a{background-image:url(images/illustration.gif)} #goDesignwork a{background-image:url(images/designwork.gif)} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"><!-- navigationは他にも登場しうるのでidにはしない --> ＿＿＿<ul> ＿＿＿＿<li><a href="./a"><span>トップへ</span></a></li> ＿＿＿＿<li id="goLink"><a href="./b"><span>リンク集</span></a></li> ＿＿＿＿<li id="goMail"><a href="./d"><span>メール</span></a></li> ＿＿＿＿<li id="goIllustration"><a href="./e"><span>イラスト</span></a></li> ＿＿＿＿<li id="goDesignwork"><a href="./f"><span>デザイン</span></a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>○○○○○</p> ＿</div> ＿<div class="footer"> ＿＿<p>文書情報</p> ＿</div> </body> </html>
関連するQ&A
- IEの時に空白ができてしまします。
CSSを使ってホームページ制作をしはじめたのですが、まだまだ勉強不足の為修正の仕方がわかりません。申し訳ございませんがどなたか詳しいかた教えて頂けないでしょうか。 内容はと言いますとリモートロールオーバーを設定している際にＩＥで#Content01 ul li#menu01～03 aの背景画像の下に空白ができてしまうのです。FireFoxでは思い通り表示できているのですが。。。 ---ＨＴＭＬ--- <div id="Content01"> <!- コンテンツ01 -!> <ul> <li id="menu01"><a href="#"><span>あああああ</span></a></li> <li id="menu02"><a href="#"><span>いいいいい</span></a></li> <li id="menu03"><a href="#"><span>ううううう</span></a></li> </ul> </div> ---ＣＳＳ--- /* コンテンツ01 */ #Content01{ position:relative; background:url(../.jpg) no-repeat right top; width:800px; height:300px; } #Content01 ul li#menu01 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu02 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu03 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li{ position:relative; margin:0px; right:40px; top:0px; } #Content01 ul li a span{ display:none; } #Content01 li{ list-style:none; } #Content01 ul li#menu01 a:hover span{ position:absolute; top:0px; right:-40px; display:block; width:600px; height:300px; text-indent:-9999px; } #Content01 ul li#menu02 a:hover span{ position:absolute; top:-100px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu03 a:hover span{ position:absolute; top:-200px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu01 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu02 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu03 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 a:hover{ border:none; } このような記述を致しております。 色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- 困っています。教えてください!
ブラウザ表示すると、変な場所にリンクがつきます。 置き換えた画像にリンクがつきません。 ナビゲーションを画像にして横に並べたいです。 以下にコードあります。 どこが間違っていますか？ 教えてください。 お願いいたします! -----HTML----- <div id="navi"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="price">Price</a></li> <li><a href="#" id="catalog">Catalog</a></li> <li><a href="#" id="access">Access</a></li> <li><a href="#" id="reserve">Reserve</a></li> </ul> </div> -----CSS----- #navi { width:950px; height:48px; } #navi ul { list-style:none; margin:0px; padding:0px; } #navi li { text-indent:-9999px; float:left; width:135px; margin:0px; padding:0px; } #navi li a { display:inline; } #navi ul li a#home { display:block; width:148px; height:48px; margin-left:100px; margin-top:30px; background:url(images/home.gif) no-repeat; } #navi ul li a#price { display:block; width:135px; height:48px; margin-left:116px; margin-top:30px; background:url(images/price.gif) no-repeat; } #navi ul li a#catalog { display:block; width:154px; height:48px; margin-left:120px; margin-top:30px; background:url(images/catalog.gif) no-repeat; } #navi ul li a#access { display:block; width:135px; height:48px; margin-left:140px; margin-top:30px; background:url(images/access.gif) no-repeat; } #navi ul li a#reserve { display:block; width:155px; height:48px; margin-left:150px; margin-top:30px; background:url(images/reserve.gif) no-repeat; }
- ベストアンサー
- CSS
- IE6以下でメニューリストの下に隙間が入ります
お世話になってます。 あるサイトをCSSで作製しているのですが、メニューリストの下にIE6以下だと余計な余白？が入ります。 他のブラウザやIE7では大丈夫です。 http://takeoff-agp.beautypal.net/sample/test/test.html ここにサンプルを載せました。 CSSは・・・ * { font-style: normal; border: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,p { margin: 0px; padding: 0px; } body { text-align: left; color: #505050; background: #FFFFFF; font-family: "Meiryo", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, sans-serif; font-size: 12px; line-height: 1.7; } #wrapper { text-align: left; width: 880px; margin-right: auto; margin-left: auto; background-repeat: repeat-y; background-image: url(../images/bg-wrapper.gif); } #header { height: 110px; width: 860px; background-image: url(../images/bg-header.gif); background-repeat: no-repeat; margin-right: 10px; margin-left: 10px; border-bottom: 3px groove #999999; } #header h1 { margin-left: 10px; } #topnavi { height: 30px; width: 860px; border-bottom: 1px solid #990033; border-top: 1px solid #990033; margin-right: 10px; margin-left: 10px; } #topnavi ul { list-style: none; } #topnavi ul li { float: left; height: 30px; } #topnavi ul li a { float: left; height: 30px; } です。 javascriptでロールオーバーしています。 <a>にfloat: left;とheight: 30px;を入れてる為、二番目のボタンに<a>を入れると直ります。 ですが、現在いるページに<a>をつけるのはおかしいですよね？＾＾； 分かりずらい文章で大変申し訳ございませんが、とても困っているので、宜しくお願いします。
- ベストアンサー
- 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
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- javascriptで文字サイズの変更
HP初心者です。 書籍通りに作ってみてのですが文字は変更されるのですが、 作った大中小の画像？までクリックするとズレてしまいます。 文字だけが変更されるのを希望してます。 ↓見てやって下さい http://www.d-judge.jp/d-judge/test.html ソースは HTML↓ <div id="header"> <div class="font_size"> <ul> <li><img src="images/txt_size.gif" alt="文字サイズ" width="68" height="14" /></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('l')" class="textL"><span>大</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('m')" class="textM"><span>中</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('s')" class="textS"><span>小</span></a></li> </ul> </div> <p>ああああああ テストです。</p> </div> css↓ /* 文字サイズ ----------------------------*/ #header .font_size { margin: 2.5em 0px 0px; position: absolute; left: 86px; top: -2px; width: 250px; text-align: right; height: 24px; } #header .font_size li { padding: 0px 0px 0px 1em; float: left; list-style: none; } #header .font_size li img { margin-top: 5px 0; } #header .font_size ul li a { height: 24px; width: 24px; display: block; } #header .font_size ul li a span { display: none; } #header .font_size ul li .textL:link, #header .font_size ul li .textL:visited, #header .font_size ul li .textL:active { background-image: url(images/text_L.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textL:hover { background-image: url(images/text_L_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:link, #header .font_size ul li .textM:visited, #header .font_size ul li .textM:active { background-image: url(images/text_M.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:hover { background-image: url(images/text_M_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:link, #header .font_size ul li .textS:visited, #header .font_size ul li .textS:active { background-image: url(images/text_S.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:hover { background-image: url(images/text_S_o.gif); background-repeat: no-repeat; background-position: left top; } javascript↓ /*フォントサイズ変更*/ function changeFsize(fontsize) { var change = document.getElementsByTagName("body")[0]; switch(fontsize) { case "s": var percent = "62.5%"; break; case "m": var percent = "75%"; break; case "l": var percent = "85%"; break; } change.style.fontSize = percent; } です。 どなたかお分かりになる方宜しくお願いしますm(＿ ＿ )m
- ベストアンサー
- JavaScript
- どなたか！IEでのみ表示が異なります。
いつもお世話になります。 前回質問させていただきhttp://oshiete1.goo.ne.jp/qa4513912.html よい回答いただき、少し前進したのですが、ここでまた問題が！ 自己解決はとても難しくお手上げ状態なのです！ どなたかお知恵を貸してください。 1枚画像でmap、reserve、manu、aboutという横並びリンクバーを作成し、 (1)デフォルト(2)カーソルを合わせた時(3)現在のページはココですよ～ の状態（4×3）を1枚の画像で作り、htmlに、ページの現在位置を表すためのバーのスタイルをclass指定し（3）、 ulをposition指定にし、liをfloat:left;で作ったところ、 operaとfirefoxでは意図通りに表示されるのですが IE（6.0）でのみ(3)の部分が、一番左（about）の画像で表示されるのです。 （1）（2）は大丈夫です。 （というか、operaとfirefoxは（3）の表示の場合は a:hoverは表示されないですね・・） 長くなってすいませんが、navbarのところのみですが記載しますので どなたかご確認くださいませんか？ よろしくお願いいたします。 ■html <ul id="navbar"> <li><a href="map.html" class="map selected"><span>地図</span></a></li> <li><a href="#" class="res"><span>ご予約・貸切</span></a></li> <li><a href="#" class="manu"><span>メニュー＆料金</span></a></li> <li><a href="#" class="about"><span>樹海について</span></a></li> </ul></div> ------------------------------------------------------------ ■css ul#navbar { position: absolute; top: 100px; left: 300px; width: 476px; height:50px; } ul#navbar li{ float:left; width:119px; height:50px; } ul#navbar a{ display:block; width:119px; height:50px; background-image:url(bar_all.gif); background-repeat: no-repeat; } ul#navbar li a span{ display: none; / } /* 初期状態 -------------------------------------------*/ a.map{ background-position: 0px 0px; } a.res{ background-position: -119px 0px; } a.manu{ background-position: -238px 0px; } a.about{ background-position: -357px 0px; } /* オンマウス ------------------------------------------ */ a:hover.map{ background-position: 0px -50PX; } a:hover.res{ background-position: -119px -50px ; } a:hover.manu{ background-position: -238px -50px; } a:hover.about{ background-position: -357px -50px; } /* selected -------------------------------------------*/ a.map.selected{ background-position: 0px -100px; } a.res.selected{ background-position: -119px -100px; } a.manu.selected{ background-position: -238px -100px; } a.about.selected{ background-position: -357px -100px; }
- 締切済み
- CSS
- IE6で隙間ができてしまう
IE6でヘッダーとコンテンツの間に隙間ができてしまいます。 IE7、Firefox、Safariでは問題なく表示されています。 [HTML] <div id="top"> <div id="topcont"> <h1><a href="http://www.AAA.com/"><img src="img/AAA.gif" />AAA</a></h1> </div></div> <div id="navi"> <div id="navicont"> <ul> <li id="home"><a href="http://www.AAA.com/" title="AAA">AAA</a></li> <li id="BBB"><a href="http://www.AAA.com/BBB.html" title="BBB">AAAについて</a></li> <li id="CCC"><a href="http://www.AAA.com/CCC.html" title="CCC Lesson">CCC</a></li> </ul> </div> </div> [CSS] #top { background: url(img/IIIII.jpg) repeat-x; margin: 0px; padding: 0px; height: 80px; } #topcont { background: url(img/III.jpg) repeat-x; margin: 0px auto; padding: 0px; height: 80px; width: 900px; } #navi { background: url(img/NNN.gif) repeat-x; text-align: center; margin: 0px; padding: 0px; height: 35px; } #navicont { margin: 0px auto; padding: 0px; height: 35px; width: 900px; } 隙間を無くすにはどうすればよいのでしょうか。 わかる方いらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- HTML
- 画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- 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%; }}
- 締切済み
- HTML
お礼
ありがとうございました。 検証サービスサイト参考になりました。