画像が少し下にずれる問題について
- CSS初心者がホームページ制作中に、Chromeで画像が下にずれる問題に遭遇しました。
- IEでは正しく表示されるのに、FirefoxやChromeではカーソルオーバー用の画像が下にずれて表示されます。
- 原因を特定できずに困っています。解決方法をご教示いただけると幸いです。
- ベストアンサー
Chrome だと、画像が少し下にずれてしまう
こんにちは！ CSS初心者で、今回初めてＣＳＳを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています（ナビは、リストをfloatで横並びに表示しています）。 ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なＣＳＳコードですが（多分、無駄なコードがいっぱいありそう・・・） のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi ul{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</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><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->
- korika99
- お礼率95% (19/20)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そんな長くて煩雑だと・・・途中で読む気がうせてしまいました。すみません。 IEでのみ表示が違う原因で、最も多いのは互換モードでの動作です。--IEの解釈が間違っている-- HTMLを標準モードで起動するように書き換えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ・・・ 詳しくは、 DOCTYPE スイッチ - Google 検索 ( 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.1480.11553.1.12817.18.15.2.0.0.0.682.3732.0j10j1j1j1j2.15.0...0.0.TUp2L8opvrs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=d0414a132c82753&biw=1024&bih=619 ) など HTML5を目前とした今は、transitinalは過去の技術です。1999年のHTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」といわれ続けてきたことですから。 HTMLを Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) などでチェックしながら、ウェブ標準にまず直してください。 それでスタイルシートを記述すれば、どのブラウザでも標準モードで起動し、ブラウザによる差は消えるでしょう。 なお、スタイルシートはHTMLが文書構造だけ記述してあれば、もっとシンプルに簡単になるし、わかりやすくなります。 昨日回答した (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7464353.html ) なんて、HTMLは極めて簡単で、スタイルシートもわかりやすいかと。 たぶん、あなたの期待されていることをHTMLさえ正しければ・・・HTMLは半分、スタイルシートは1/10で済むと思います。 ★継承されるプロパティは、一度しか書かない ★同じ設定をする要素はグループ化する。 ★デザインのためにidやclassは書かない これだけで、随分とスリムになりメンテナンスも容易になります。 「例」 (CSS)縦メニューを一枚画像で作るには・・ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7464353.html ) 具体的には、HTMLは <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> だけでよいのです。
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
＞ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや ＞Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 間違っているのはIEだね・・・（IEのバージョンにもよる） ＞多分、無駄なコードがいっぱいありそう・・・） ですね・・・ 半分以下に簡素化できますよ。 まずは、#1さんの通りDTD標準準拠に変更 作り直した方が後々の問題を回避できるけど、 とりあえずの応急処置なら、 #g_navi li a{ padding-top : 20px; #g_navi ul li a:hover{ height : 80px; 実際の画像サイズが不明なので、良くわからないが、 この部分の高さが矛盾なのでは？ 計算上では、21px程度のズレかな・・・ 何故、a:hoverの時だけ height : 80px; なのかな？？？
お礼
わかりづらい、内容にも関わらず、回答していただいて ありがとうございました。 問題点は、標準モードに切り替えることでクリアできました。 ご指摘の・・・ #g_navi li a{ padding-top : 20px は、テキスト文字（「ご案内」等）が、垂直の中央にこさせるために 入れてます。 #g_navi ul li a:hover{ height : 80px の件ですが、これを入れないと、画像が切れて表示されてしまうのです。 ナビのベースの画像の高さが80px、ロールオーバー用の画像の高さは80pxです。 表示させたい位置は、縦横間でセンターなのですが 80pxの指定を入れないと、ナビの「ご案内」等のテキスト部分にしか画像が反映されず、 そこからはみ出している画像部分は切れてしまうのです。 もっと、知識＆技能があれば解決する問題なのでしょうが＞＿＜； ご指摘ありがとうございました。
関連するQ&A
- グローバルナビの画像のサイズ変更方法
グローバルナビのサイズ指定をして大枠の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
- 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; }
- 締切済み
- CSS
- 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
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- 画像をずらして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
- 困っています。教えてください!
ブラウザ表示すると、変な場所にリンクがつきます。 置き換えた画像にリンクがつきません。 ナビゲーションを画像にして横に並べたいです。 以下にコードあります。 どこが間違っていますか？ 教えてください。 お願いいたします! -----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
- 自作の一段組みのソースを使い、二段組みのサイトを
作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 以下がソースです。なお、所々、一段組みのソースのままになっているところがあり、かつ、かなり長いですが、ご了承ください。最終的には、サイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。 ～html～ <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1 style="display:none">タイトル</h1> <ul id="topmenu"> <li class="logo1"><a href="#">お問い合わせ</a></li> <li class="logo2"><a href="#">サイトマップ</a></li> </ul> </div> <!-- サイドメニュー (スワップイメージを使っています)--> <div id="menu"> <ul> <li><a href="#"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71"id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> <li><a href="#"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71"id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> ※以下省略 </ul> <div> <!--main--> <div id="main"> <div id="introduction"> <h2><img src="images/introduction.png" alt="introduction" /></h2> </div> <!-- コンテンツ --> <div id="content"> <h2>h2タイトル(1)</h2> <dl class="info"> <dt>1月1日</dt> <dd>あああ</dd> <dt>1月2日</dt> <dd>いいい</dd> ※以下省略 </dl> <h2>h2タイトル(2)</h2> <dl class="info"> <dt>1月1日</dt> <dd> ううう</dd> <dt>1月2日</dt> <dd>えええ </dd> ※以下省略 </dl> </div> <!--contentsはここまで--> </div> <!--mainはここまで--> <!-- フッター --> <div id="footer"> <ul id="lastmenu"> <li class="logo3"><a href="#">よくある質問</a></li> <li class="logo4"><a href="#">プライバシーポリシー</a></li> </ul> <p>Copyright BBB. All right reseved.</p> </div> </div> <!--containerはここまで--> ～css～ body {background-image: url(images/sora.jpg)} /* コンテナ */ div#container {background-image: url(images/background0.png); width: 980px; margin-left: auto; margin-right: auto; overflow:hidden; position:relative} /* ヘッダー */ div#header {background-image: url(images/header.png); background-repeat:no-repeat; height: 169px; margin-bottom: 30px} ul#topmenu {font-size: 1.2em; padding-left: 580px; padding-top: 130px} ul#topmenu li {float:left; margin-left:15px; margin-right:15px; font-weight:bold} .logo1 {list-style:none; background-image: url("images/mail.png"); background-position: left center; background-repeat: no-repeat; padding-left:35px} . logo2 { list-style:none; height:25px; background-image: url("images/zisyaku.png"); background-position: left center; background-repeat: no-repeat; padding-left:30px } /* メニュー */ #menu {margin-left: 40px; width:260px} #menu li{list-style:none; margin-bottom: 4px} /* メイン */ div#introduction {margin-left: 132px; margin-bottom: 10px} /* コンテンツ */ div#content {width: 475px; border: 2px solid #400000; padding-top: 28px; padding-right: 60px; padding-left: 50px; padding-bottom: 20px; margin-left: 135px; margin-bottom: 80px; font-weight: none;} div#content h2 {color: #400000; font-size: 1.8em; letter-spacing: 0.5em; border-bottom-width: 3px; border-left-width: 14px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #008080; border-left-color: #008080; padding-left: 10px; margin-bottom: 15px} dl.info dt,dl.info dd {font-size:1.2em; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #400000} dl.info dt {clear: left; float: left; padding-left: 17px; color: #000; width:8.2em; background-image: url("images/yazirusi2.gif"); background-position: 0% 58%; background-repeat: no-repeat;} dl.info dd {margin-bottom: 0.8em; margin-left: 9.2em; margin-bottom: 1.5em} /*メインはここまで*/ /* フッター */ div#footer {background-image: url(images/footer.gif); position:absolute; bottom:0px; height:60px; width:980px;} ※以下省略。
- ベストアンサー
- CSS
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- HTML
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
お礼
とても丁寧な回答、ありがとうございました。 わかりづらいCSSながらも、解説していただいてとても助かりました。 おっしゃる通り、標準モードに切り替えることで、今回の問題は解決しました。 多分、スタイルシートやhtmlの知識が、不充分なのが一番原因なんですよね。 今後は、教えて頂いたサイトと、別で回答されている内容を参考に スタイルシートとhtmlの簡素化を目指して、文書構造もきれいな ＨＰを作っていきたいと思います。