- ベストアンサー
autoを使ってもブラウザの中央に寄らない
先週からHTMLを学び始めた初心者です。外部スタイルシートを使ってHPを作成しています。同じ様な過去の質問を見たのですがどうも分かりません。申し訳ありませんが教えて下さい。 ベースボックスでautoを使ってブラウザの中央に位置させようとしても、左に寄ってしまいます。何故でしょうか？ cssには以下のように書いています。 body{ line-height:140%; font-size:12px; color:#000000; margin:0px; } .base{ width:680px; margin:0px auto 0px auto; background:url(img/base.gif); } .header{ height:93px; background:url(img/header.gif); background-repeat:no-repeat; } .left{ width:205px; float:left; background:url(img/haikei.gif); margin:0px 0px 0px 2px; } .center{ width:430px; padding:0px 15px 0px 5px; float:left; } .footer{ clear:left; height:65px; background:url(img/haikei.gif); background-repeat:no-repeat; } HTMLは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>123株式会社</TITLE> <LINK rel="stylesheet" HREF="1111.css" type="text/css"> </HEAD> <BODY> <DIV CLASS="base"> <DIV CLASS="header"></DIV> <DIV CLASS="left"></DIV> <DIV CLASS="center"></DIV> <DIV CLASS="footer"></DIV> </DIV> </BODY> </HTML>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- koutarou504
- ベストアンサー率44% (182/407)
何故？ ＩＥのバグです・・・。 とりあえず、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> と DOCTYPE を互換モードから標準モードに変えれば ＩＥ６ではバグ改良済みだそうですが。 でそのまま互換モードとする必要があったり （ＩＥ拡張機能を使いたい場合など） ＩＥの古いバージョンへの配慮を考えると 大外に <div style="text-align:center;">～</div> で囲ってあげる事で中央寄せは対応できます。 （バグをそのまま利用） 一応、この様な事が他の類似の質問に対する回答で書かれていて それを今回の提示された物に対して検証，例示したのが 今回の回答です。 つまり、ブラウザにはバグがあり、 しかしそのバグがそのまま使われているので 複数の仕様（文法）を意識して記述するしかないという事です。
お礼
koutarou504様、ご丁寧なご回答をいただきありがとうございました。今までの類似質問・回答を読んでもよく分からなかったことが理解できました。面白くなってきたのでもっと勉強しようと思います。どうもありがとう。
関連するQ&A
- display blockできません
初めまして、現在左側の5段メニューボタンを作成中なのですが、 テキストで書いたリンクの文字が出てきたり、 display blockできなかったり、 IEでは5段積みでも、firefoxではつぶれた5段積みで 表示されてしまいます。 私のCSSの書き方がおかしいのでしょうか？ どなたかご指導をお願い致します。宜しくお願い致します。 html <div id="left"> <div class="left_style6"> <p><a href="##.htm">aaa</a></p> </div> <div class="left_style7"> <p><a href="##.htm">bbb</a></p> </div> <div class="left_style8"> <p><a href="##.htm">ccc</a></p> </div> <div class="left_style9"> <p><a href="##.htm">ddd</a></p> </div> <div class="left_style10"> <p><a href="##.htm">eee</a></p> </div></div> css .left_style6 { background: url(img/aaa.gif) no-repeat; width : 170px; height : 30px;} .left_style6 p a { margin: 1px 0 0 5px ; display : block; } .left_style7 { background: url(img/bbb.gif) no-repeat; width : 170px; height : 30px;} .left_style7 p a { margin: 1px 0 0 5px ; display : block; } .left_style8 { background: url(img/ccc.gif) no-repeat; width : 170px; height : 30px;} .left_style8 p a { margin: 1px 0 0 5px ; display : block; } .left_style9 { background: url(img/ddd.gif) no-repeat; width : 170px; height : 30px;} .left_style9 p a { margin: 1px 0 0 5px ; display : block; } .left_style10 { background: url(img/eee.gif) no-repeat; width : 170px; height : 30px;} .left_style10 p a { margin: 1px 0 0 5px ; display : block; }
- ベストアンサー
- CSS
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- HTML
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
- IE以外のブラウザーで
はじめまして。 ホームページの作成をDW5.5で行っています。 以下のソース、cssにてアップしたところ、header menuの部分の画像が IEだとちゃんと横並びに表示されるのですが、Firefox、Safariなどでは menuが縦に並んでしまいます。 どのように修正すればいいのか、ご指導いただけませんでしょうか？ ＜＜ソース部＞＞ <body> <div id="header"></div> <div id="head_navi"> <ul> <li id="head_bu1"><a href="../index.html"></a></li> <li id="head_bu2"><a href="../about.html"></a></li> <li id="head_bu3"><a href="#"></a></li> <li id="head_bu4"><a href="#"></a></li> <li id="head_bu5"><a href="#"></a></li> <li id="head_bu6"><a href="../policy.html"></a></li> <li id="head_bu7"><a href="#"></a></li> <li id="head_bu8"><a href="#"></a></li> </ul></div> </body> ＜＜css部＞＞ *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } /* ■ヘッダー */ #header{ width:1000px; height:320px; background-color: #000000; } #head_navi{ width:1000px; height: 40px; background-color: #666; } #head_navi ul{ overflow:hidden; float:left; padding-left: 21px; } #head_bu1 a{ display:block; width:112px; height:38px; float: left; background:url(../img/header_1_off.png) no-repeat left top; } #head_bu1 a:hover{ background:url(../img/header_1_on.png) no-repeat left top; } #head_bu2 a{ display:block; width:113px; height:38px; float: left; background:url(../img/header_2_off.png) no-repeat left top; } #head_bu2 a:hover{ background:url(../img/header_2_on.png) no-repeat left top; } #head_bu3 a{ display:block; width:117px; height:38px; float: left; background:url(../img/header_3_off.png) no-repeat left top; } #head_bu3 a:hover{ background:url(../img/header_3_on.png) no-repeat left top; } #head_bu4 a{ display:block; width:122px; height:38px; float: left; background:url(../img/header_4_off.png) no-repeat left top; } #head_bu4 a:hover{ background:url(../img/header_4_on.png) no-repeat left top; } #head_bu5 a{ display:block; width:101px; height:38px; float: left; background:url(../img/header_5_off.png) no-repeat left top; } #head_bu5 a:hover{ background:url(../img/header_5_on.png) no-repeat left top; } #head_bu6 a{ display:block; width:126px; height:38px; float: left; background:url(../img/header_6_off.png) no-repeat left top; } #head_bu6 a:hover{ background:url(../img/header_6_on.png) no-repeat left top; } #head_bu7 a{ display:block; width:134px; height:38px; float: left; background:url(../img/header_7_off.png) no-repeat left top; } #head_bu7 a:hover{ background:url(../img/header_7_on.png) no-repeat left top; } #head_bu8 a{ display:block; width:133px; height:38px; background:url(../img/header_8_off.png) no-repeat left top; } #head_bu8 a:hover{ background:url(../img/header_8_on.png) no-repeat left top; }
- ベストアンサー
- ホームページ作成ソフト
- 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
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- DIV内の padding について
下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }
- ベストアンサー
- 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
- h1にタイトル画像を指定しているのですが・・
h1にテキストでは、ページのタイトルを入れて、CSSで背景を指定しています。 【HTML】 <div id="header><h1>タイトル</h1></div> 【CSS】 #header h1{ text-indent: -9999px; background-image: url(../images/share/title.gif); background-repeat: no-repeat; height: 43px; width: 317px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; text-align: left; } FirefoxとIEでは表示されているのですが、Operaで見ると表示されていません。Operaで表示させることは難しいのでしょうか？
- 締切済み
- HTML
- CSSでドロップシャドウ
CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }
- 締切済み
- HTML
お礼
pingu98様、早速のご回答感謝しております。DTDのURLを書き込みましたところ無事にセンタリングできました。ありがとうございました！ただの英文字の羅列に見えたものが意味のあるものとして頭に入ってきました。