![]()
- IE6で、背景画像とコンテナを常に中央表示させたい
bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari では上手くいっているのですが、 IE6だけ、うまく行きません。（何故かずれてしまいます） コードは以下です ------------------------------------------------------- ●HTML <body> <div id="container"></div> </body> ●CSS body{ background: url(画像のパス) no-repeat; background-position: center top; text-align: center; } container{ width: 900px; margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている？？ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。
- ベストアンサー
- noname#179453
- HTML
- 回答数1
- ハイパーリンクをインプットボタンで作るには
HTML初心者です。 <a href="input.php?action=rewrite">修正する</a> 上記のハイパーリンクをインプットボタンでリンクさせたいのですが <input type="button" class="button" value="修正する" onClick='window.open("input.php?action=rewrite")'> だと新しいウィンドウが開いてしまいますし <input type="button" class="button" value="修正する" onClick=("input.php?action=rewrite")> だとリンクできません。 どのようにすれば良いのでしょうか？ よろしくお願いします。
- ベストアンサー
- shorinji36
- HTML
- 回答数5
- IE7で行間 助けてください
行間の差がありすぎます。IE7で１行程度の行間が出来ます。行間の差を少なくしたいです。 検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>
- ベストアンサー
- takumana20
- HTML
- 回答数1
- IEだけ背景が出てこない。。。
みなさま、こんにちわ。いつもお世話になっています。 みなさんにお尋ねします。 CSSで背景を指定しているのですが、IEだけなぜか表示できません。 html側はこうしています。 <div class="ttlh2"> <h2>新着情報</h2><p>News</p> </div> そしてCSS側はというと、 .ttlh2 { width:676px; height:34px; display:block; background:url(../img/sub_h3_bg.gif) 0 0 no-repeat; margin-bottom:5px; } .ttlh2 h2 { font-size:16px; float:left; background:none; display:inline; font-weight:normal;} .ttlh2 p { font-size:16px; float:right; color:#FFFFFF; margin:6px 5px 0 0; display:inline; background:none;} というようにしました。Firefoxなどでは問題なく表示できるのですが、IEだけ見えません。 何が問題なのでしょうか。 ご存知の方いらっしゃいましたらご助言ください！
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- chimin-chimin
- HTML
- 回答数5
- base.cssの参考になるサイトを教えて下さい。
base.cssの参考になるサイトを教えて下さい。 cssを独習中です。参考書に書かれているbase.cssだけではよくわかりません。 参考書には若干の修正は必要だがいったん作成しておけばどのサイトでも適用できると書いてあるのでこれというのを作成しておきたいのですが、サイトによって内容がさまざまな為どれを参考にしていいのか困ってます。
- base.cssの参考になるサイトを教えて下さい。
base.cssの参考になるサイトを教えて下さい。 cssを独習中です。参考書に書かれているbase.cssだけではよくわかりません。 参考書には若干の修正は必要だがいったん作成しておけばどのサイトでも適用できると書いてあるのでこれというのを作成しておきたいのですが、サイトによって内容がさまざまな為どれを参考にしていいのか困ってます。
- base.cssの参考になるサイトを教えて下さい。
base.cssの参考になるサイトを教えて下さい。 cssを独習中です。参考書に書かれているbase.cssだけではよくわかりません。 参考書には若干の修正は必要だがいったん作成しておけばどのサイトでも適用できると書いてあるのでこれというのを作成しておきたいのですが、サイトによって内容がさまざまな為どれを参考にしていいのか困ってます。
- base.cssの参考になるサイトを教えて下さい。
base.cssの参考になるサイトを教えて下さい。 cssを独習中です。参考書に書かれているbase.cssだけではよくわかりません。 参考書には若干の修正は必要だがいったん作成しておけばどのサイトでも適用できると書いてあるのでこれというのを作成しておきたいのですが、サイトによって内容がさまざまな為どれを参考にしていいのか困ってます。
- ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/ Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。
- ベストアンサー
- chaos_brionac
- CSS
- 回答数1
- 特に指定する値がない場合のcssについて
現在作成しているホームページで、以下のようなソースを書きました <div id="wrapper"> <div class="box1 clearfix"> <div class="right1">floatで右寄せ</div> <div class="left1">floatで左寄せ</div> </div> <div class="box2 clearfix"> <div class="right2">floatで右寄せ</div> <div class="left2">floatで左寄せ</div> </div> </div> 初めは特にdivを入れ子にする必要はないと思っていたのですが clearfixの指定をかけるには必要だったので、<div class="box">で囲むことにしました。 ですが、box1やbox2に、特に指定する値がなくて悩んでいます。 特に指定することがない場合にはcssには何も書かなくてよいものなのでしょうか？ 今は取り敢えず何か指定してないと落ち着かない気がして width指定だけ書いているのですが、幅はwrapperで指定していますし特に必要ない気もします。 このような場合には何も指定をしないか、取り敢えずwidthだけでも指定しておくかどちらの方が良いのでしょうか？ よろしくお願いします。
- 特に指定する値がない場合のcssについて
現在作成しているホームページで、以下のようなソースを書きました <div id="wrapper"> <div class="box1 clearfix"> <div class="right1">floatで右寄せ</div> <div class="left1">floatで左寄せ</div> </div> <div class="box2 clearfix"> <div class="right2">floatで右寄せ</div> <div class="left2">floatで左寄せ</div> </div> </div> 初めは特にdivを入れ子にする必要はないと思っていたのですが clearfixの指定をかけるには必要だったので、<div class="box">で囲むことにしました。 ですが、box1やbox2に、特に指定する値がなくて悩んでいます。 特に指定することがない場合にはcssには何も書かなくてよいものなのでしょうか？ 今は取り敢えず何か指定してないと落ち着かない気がして width指定だけ書いているのですが、幅はwrapperで指定していますし特に必要ない気もします。 このような場合には何も指定をしないか、取り敢えずwidthだけでも指定しておくかどちらの方が良いのでしょうか？ よろしくお願いします。
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- chimin-chimin
- HTML
- 回答数5
- IEで画像が見られない！
ホームページを作っています。 とある画像（JPEG画像）を載せました。 サファリやファイヤーフォックスでは見られるのですが、 なぜがIEで見ることができません。 ディレクトリの階層などはあっています。 原因が分からず困っています。 どなたかご教授のほど、よろしくお願いいたします。
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- chimin-chimin
- HTML
- 回答数5
- CSSでテーブルのように画像を均等表示させるには？
お世話になります。CSS初心者です。 もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。 添付画像のようなレイアウトでサイト制作しています。 このように#rightbox内に10の画像を均等に表示させたいと思っています。 かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。 このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。 参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。 ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。
- CSSでテーブルのように画像を均等表示させるには？
お世話になります。CSS初心者です。 もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。 添付画像のようなレイアウトでサイト制作しています。 このように#rightbox内に10の画像を均等に表示させたいと思っています。 かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。 このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。 参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。 ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。
- MacのSafariのletter-spacing
テキストに「0.5em」などの値を指定してletter-spacingをあてていますが、 MacのSafari(Version5)では、それが反映されていないような気がします。 Windowsでは1行に収まっている文章が、MacのSafariでは文字間が詰まっておらず 改行されてしまっています。 何か指定の仕方があるのでしょうか？ それかMacのSafari(Version5)に適用できるハックなどはありますでしょうか？ よろしくお願いします。
- ユーストリームをHPに掲載
来月に友人がイベントをおこなうのですが、その際にユーストリームを使って 動画配信をおこなうらしく、その配信した動画を私個人のホームページでリアルタイムで掲載してほしいと頼まれました。 ただ私自身がユーストリームを使ったことがないので、どのような手順で 掲載するのかまったく分からないため困っております。 友人もそこまで詳しくないみたいで、聞いても分かりませんでした。 HTML内にどういった情報を組み込めばユーストリームを掲載できるのでしょうか？ 分かりやすいサイトでも結構ですのでご教授願います。
- CSSでテーブルのように画像を均等表示させるには？
お世話になります。CSS初心者です。 もしかしたらweb制作者様にとっては簡単なことかもしれませんが、いろいろ調べてもよく理解できなかったので、どうか教えてください。 添付画像のようなレイアウトでサイト制作しています。 このように#rightbox内に10の画像を均等に表示させたいと思っています。 かつてテーブルタグといったものが使われていましたが、現在テーブルは推奨できないということで、外部CSSファイルでレイアウト表示させたいと考えています。 このようなレイアウトで表示させる場合、どのようなCSSの記述が好ましいでしょうか。 参考書などで調べたところ<ul>と<li>要素を使用するのが一般的だということでしたが、正直よく分かりませんでした。どうかご教授お願いします。 ちなみにこの画像のリストはクリックするとThickboxで大きな画像が表示されるようにしたいです。