CSS絶対配置の問題について
- CSSの絶対配置において、左側にロゴを配置する際にIE5.5、IE6、IE7では効かず、右側に配置されてしまう問題が発生しています。
- FireFoxやChrome、IE8では左側に表示されるが、IE5.5、IE6、IE7では絶対配置が効かず、右側に配置されてしまう。
- HTMLのコードとCSSのスタイルを正しく指定しているのに、IE5.5、IE6、IE7での絶対配置がうまくいかない状況で困っています。
- ベストアンサー
CSS 絶対配置が効かなくて困っております。
お世話になります。 ホームページ制作にて行き詰ってしまい、ご教授をいただきたく質問させていただきます。 【問題点】 CSSの絶対配置にて左側にロゴを配置しておいるのですが、IE5.5、IE6、IE7で確認した場合は、絶対配置が効かず？右側の位置に配置されてしまう状態で困っております。FireFoxやChrome、IE8などは問題なく左側に表示されるのですが・・ 【HTML】 <body> <div id="wrapper"> <div id="header"> <div id="logo"> <img src="common_img/logo.gif" /></div> </div> </div> </body> 【CSS】 body { font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; background-color: #FFF; text-align: center; line-height: 1.7; font-size: 93%; } #wrapper { margin: 0px; padding: 0px; } #header { height: 80px; width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; zoom: 1; } #logo { position: absolute; top: 20px; } 参考までに画像とテストURLを貼らせていただきます。少しでも参考に参考になればご確認ください。 ご教授いただけることを心からお待ちしております。
- piguemon
- お礼率71% (28/39)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
おはようございます。 #logoに left: 0; の指定を入れてみてください。 ０の数字はもちろんお好きな数字で調整してくださいませ～ あと、要らないお世話だけど・・・ margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; これは margin:0 auto; と書くとすっきりしていいかもしれませんね！！
関連するQ&A
- CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px; margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }
- ベストアンサー
- CSS
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- CSSレイアウトについて
はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }
- 締切済み
- その他([技術者向] コンピューター)
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- HPの作成を教えてください。
HP作成を見よう見まねで作成しているのですが最初からつまずきました。 作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。 何分初心者なので分かりやすく教えて頂ければ助かります。 body , html { height: 100%; margin: 0; padding: 0; text-align: center; /* 標準文字色 */ font-size : 100%; background-image : url(../imege/bg01.png); background-repeat : repeat-x;background-position : left top; } /* Safari用ハック 文字サイズ調整 */ /*\*/ html:\66irst-child body{ font-size: 90%; } /* end */ } img{ border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; } #container { width: 100%; position: relative; height : 100%; min-height: 100%; background-image : url(../imege/fbg01.png); background-repeat : repeat-x;background-position : left bottom; } #header{ width: 100%; height : 84px; margin-top : 0px; margin-bottom : 0px; text-indent : -9999px; } #contents { padding-top : 84px; padding-bottom: 100px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; margin-left : auto; margin-right : auto; } #header-in{ width : 900px; height : 84px; position : relative; margin-left : auto; margin-right : auto; margin-top : 0px; margin-bottom : 1px; } #contents-in{ margin-left : auto; margin-right : auto; width : 900px; position : relative; margin-top : 0px; margin-bottom : 0px; } #footer-in{ margin-left : auto; margin-right : auto; margin-bottom : 0px; width : 900px; height : 100px; position : relative; margin-top : 0px; } #header-logo{ width : 500px; height : 84px; float : left; z-index: 2; } #header-logo2{ width : 200px; height : 84px; float : left; z-index: 2; } <div id="container"> <div id="header"> <div id="header-in">ヘッダー <div id="header-logo">トップロゴ</div> <div id="header-logo2">お問い合わせ</div> </div> </div> <div id="contents"> <div id="contents-in">コンテンツ</div> </div> <div id="footer"> <div id="footer-in">フッター</div> </div> </div> よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSのpositionでフッターが最下に配置されてくれない
CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか？ WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA--> コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。
- 締切済み
- HTML
- HTML、CSSのチェックをお願いします。
独学でGoogleトップページのデザインを真似てみました。 ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。 自分で真似たので、表示される結果としてはイメージ通りではあるのですが 実際、回りくどい方法をとっていないか？もっと適切な方法がるのでは？といった事が分からないので チェックして頂きたいと思います。 CSSに関しては外部ファイルへ記述します。 以下のソースになります。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- body{ margin: 0; /* ヘッダーをぴったり上部付けたいので */ } #header{ color: #DDD; background-color: black; position: fixed; width: 100%; height: 50px; /* ヘッダー内に高さ50pxの画像を配置したい為 */ z-index: 100; /* wrapperより上にかぶってほしい為。数値自体は適当 */ top: 0; } #wrapper{ width: 800px; margin: 0 auto; background-color: #dbcfc3; margin-top: 50px; height: 1300px; /* 縦スクロールを表示したい為 */ } #header h1, #header ol, #header li,#header img{ margin: 0; font-size: 17px; float: left; } #header ol{ padding: 0; list-style-type: none; } #header li{ margin-left: 5px; } #header a:visited, #header a:link{ color: #DDD; } --> </style> </head> <body> <div id="header"> <img src="" alt="てすと"><!-- srcには高さ50pxの画像を使用予定 --> <h1>あいうえお</h1><!-- SEO的にH1を使った方がいいとの記述が多い為。サイトタイトルを記入予定 --> <div> <ol> <li><a href="http://www.google.co.jp">google</a></li> <li><a href="http://www.yahoo.co.jp">yahoo</a></li> </ol> </div> </div> <div id="wrapper"> content </div> </body> </html> どんな些細な事でも構わないので、よろしくお願いします。
- 締切済み
- HTML
- CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- 背景について・・・
いつもお世話になっております。 今添付画像のようなサイトを付くろうと思っております。 http://snapkidz.biz/wp/ 今回うまくいってない部分は、背景です。 firefoxでみると崩れなどはないのですが、ipadでみるとかなりheadとmainの部分に隙間がうまれてしまいます。 この背景のひき方は間違っているんでしょうか？ html/ [header] <body> <div id="page"> <div id="wrapper"> <div class="header"> <h1><a href="#"><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/logo_03.gif" width="171" height="76" alt="Art・・"></a></h1> </div> [フッダー部分にpageとwrapperの/divの記載はあります。] [CSS] html,body{margin:0;padding:0;} #page{height:580px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/theme_top_01.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;padding-top:10px;} #wrapper{width:100%;margin:0 auto;} .header{width:980px;height:100px;margin:0 auto;} .header h1{margin:0;} #main{height:1317px;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/body_02.jpg);background-repeat:no-repeat;margin:0 auto;background-position:center;position:relative;top:450px;} こっちのほうが楽だよ！とか普通はこうだ！などありましたら勉強不足な自分に教えてください。 宜しくお願いします。
- ベストアンサー
- CSS
お礼
maillibra9様 早速のご教授誠にありがとうございます！ ご教授いただいたとおり設定を行い確認したところ、見事解決いたしました！ なるほど、Leftの値を指定しないとIEのヴァージョンによっては、影響があるのですね。 解決策がわからず、絶対配置を利用するのを辞めようかと悩んでおりました。 本当にありがとうございます。 とても勉強になりました。 また、CSS記述の件もありがとうございます。 なるほど確かに！みやすくてすっきりします。 CSSが未熟なため、HP作成ソフトで記述された状態のままのCSSを利用することが多く、 このようなアドバイスをいただけると大変助かります。 さっそく今後は、簡略して記述をしていきたいと思っております。 同じように悩んでいる人がいたら、私もぜひアドバイスを出来たらと思っております。 本当にありがとうございました。