• 締切済み

CSSのposition：fixedでIE6にも対応させたい　Part.2

前回の質問でアドバイスを元に作ってみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>XYXYXYXYXY</title> <style type="text/css"> * { margin:0; padding:0; color:#FFFFFF; } body { background-color:#000000; text-align:center; } div#pagebody { width:684px;margin:25px auto; } span#a1 { position: fixed; bottom:50px; left:0px; right:0px; } h1 { font-size:44px; font-weight:bold; padding:25px; } div#left { width:342px; float:left; } div#right { width:342px; float:right; } </style> <!--[if lt IE 7]> <style type="text/css"> html {overflow: hidden;} body { height: 100%; overflow: auto; } span#a1 { position: absolute; } </style> <![endif]--> </head> <body> <div id="pagebody"> <h1>XXXXXXXXXX</h1> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <span id="a1"><a href="#"><img src="3top.jpg" width="240" height="95" border="20"></a></span> </div> </body> </html> 上記でFirefoxはほぼ完璧のようです。 jpgが見れませんが実際jpgを用意すると見れます。 （tableが何故かセンタリングしていませんが、、、スクロールバーで確認するためにtableを入れただけです。） 問題のIE6です。 IE6ではセンタリングが全く作用していません。 （tableは何故かセンタリングが作用しています、、、スクロールバーで確認するためにtableを入れただけです。） かなりの初心者なので何故XHTMLが出てきたのかさっぱり理解できませんが あとはIEのセンタリングだけなのでアドバイスお願いします！

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

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

>かなりの初心者なので何故XHTMLが出てきたのかさっぱり理解できませんが >あとはIEのセンタリングだけなのでアドバイスお願いします！ うーんと、論理的なアドバイスは全くの無駄です。という風に読めますね。 では、kendooさん向きのアドバイスを センタリングを指示するタグとプロパティの組み合わせは「２つ」利用されています。それらを探し出し、消したりつけたり交換したりしてください。 文法違反だらけなのに、センタリングだけらしいので、センタリングさえできれば、ぐちゃぐちゃのものを承知で発表されるのかな？ >かなりの初心者なので何故XHTMLが出てきたのかさっぱり理解できませんが こんなの嘘ですよ。初心者ならもっとまともな物を書きます。せめて、初心者になられることを、初心者なら初心者らしく、基本から学ばれることをお奨めします。 文法チェックのページをご紹介しますね。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

  • yosoho
  • ベストアンサー率59% (19/32)
回答No.1

すいません、kendooさんの「前回の質問」がみつかりません。 どうされたいのかをもう一度お聞かせできないですか？ position: fixed;はIE6.0、7.0でサポートされてないので、 なにか他に方法は無いかなと思いましたもので・・・。

kendoo
質問者

お礼

ありがとうございます！！ part.1 http://oshiete1.goo.ne.jp/qa4437286.html さらに修正してPart.3を質問してみました！ http://oshiete1.goo.ne.jp/qa4453435.html アドバイスありましたらよろしくお願いいたします！

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

関連するQ&A

  • CSSのposition：fixedでIE6にも対応させたい

    初心者ですがお願いします！ まずタイトルの質問から外れて質問してしまいます。ごめんなさい！！ span＃a1　の左右をセンタリングさせたいのですがどう記述すれば良いのでしょうか？ <title>無題ドキュメント</title> <style type="text/css"> <!-- body { background-color:#33FFCC; } span#a1 { position:fixed; bottom:20px; left:？？？？？ right:？？？？？ background-color:#003399; } --> </style></head> <body> <span id="a1"><a href="#"><img src="top.jpg" width="240" height="95" border="0"></a></span> <table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> そしてタイトルの質問にいきます！ 上記のspan＃a1をIE6にも対応させたいのですがいったいどうすれば良いのでしょうか？ スクロールバーやマウスのホイールで、かくつきのなく表示させたいのですが できますでしょうか？

  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～

    • ベストアンサー
    • CSS
  • XHTML+CSS IE5.5で見ると崩れる

    皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!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" /> <title>練習</title> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう？わかる方おしていただけると助かります。

    • ベストアンサー
    • CSS
  • このcssをIEで見ると？

    お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSでのセンタリングができません。

    CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>

  • cssに関して

    <!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" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box { height: 100px; width: 700px; border: 1px solid #996600; } .comment { height: 50px; width: 300px; float: left; margin-top: 10px; border: 1px solid #993366; } --> </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。 しかし疑問が残ります。 本来はboxにpadding-top:10pxとすべきなんでしょうか。 それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px） ある程度経験のある方か、お詳しい方にご判断願いたいと思います。 なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・） よろしくお願いします。

    • ベストアンサー
    • HTML
  • DreamWeaverでテーブルをCSSにした場合にずれます。

    DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #wrap { width: 500px; } #content { float: left; width: 200px; background-color: #00CCCC; } #main { width: 300px; float: left; background-color: #99FF99; } #footer { clear: both; width: auto; background-color: #CCFF66; } --> </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。 ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。

    • ベストアンサー
    • HTML
  • IE6 で余分な border が表示されてしまいます。

    CSS と XHTML で FAQ を作っているのですが、IE6 で表示した場合に余分な border が入ってしまいます。 FireFox ではきちんと表示されます。 IE7 では確認していません。 ソースは以下の通りです。 <!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> <style type="text/css"> <!-- div.qa { font-size: 15px; letter-spacing: 1px; line-height: 130%; padding: 10px 2px; margin: 10px 0; border: 3px #46a double; } div.qa_left { float: left; width: 8%; text-align: right; } div.qa_right {} --> </style> </head> <body> <div class="qa"> <div class="qa_left"> Ｑ：<br /> Ａ： </div> <div class="qa_right"> 　質問です。<br /> 　答えです。 </div> <div class="clear">&nbsp;</div> <div class="qa_left"> Ｑ：<br /> Ａ： </div> <div class="qa_right"> 　質問です。<br /> 　答えです。 </div> </div> </body></html> 何か方法はありますでしょうか？ よろしくお願いします。

    • 締切済み
    • CSS
  • CSSでのセンタリング

    いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!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" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。

    • ベストアンサー
    • HTML
  • xhtml+cssのfloatの使い方、センタリングの方法

    xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 　　(下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に 　　さらにfloatさせてleft、lightの２つ横並びのボックスを 　　配置することは可能でしょうか？ 　　また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!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=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する