- ベストアンサー
CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- takagoo100
- お礼率85% (739/868)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
position:relative;はもとの位置から指定した値だけ動かすためのものです。 http://www.stylish-style.com/csstec/base/position.html .upsampleを50px動かしたとしても.downsampleは動かないので、両方のスペース分とってposition:relative; top:100px;とすれば解決できます。 できますが、もしもposition:relative;でやる必要がない場合は .sample2 { color:#ff0000; position:absolute; top:10px; left:10px; } .sample3 { color:#ff0000; position:absolute; top:30px; left:30px; } .upsample { height:50px; background-color:#00ff00; font-weight:bold; position:relative; margin-top:50px; } .downsample { height:50px; background-color:#00ff00; font-weight:bold; position:relative; margin-top:50px; } というようにmarginを使うほうがわかりやすいかもしれないです。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
このソースは全体像の一部抜粋なのかもしれないので判断つきかねますが、素朴な疑問です。 もし単純に入れ子構造の親のコンテナブロック（.upsample、.downsample）の上部余白を50px、子のブロックをそれぞれ親の上と左の基点から10px（.sample2）／30px（.sample3）の位置にレイアウトしたいだけなら、親側の位置はtopではなく単にmargin-topプロパティで指定すれば済むのでは？ top/left/bottom/rightプロパティは"position:absolute;"と組み合わせて使う分いはわかりやすいですが、relativeの時はあまり出番がない様に思います（勿論レイアウトによりケースバイケースですが）。今回の様な場合の位置決めであればmarginの方が（あれこれ計算しないで済む分）楽なので。
お礼
ご返答ありがとうございます。 実は、プログラム（PHP）を利用してこのCSSをブロックごとに 切り抜いて他のブロックと組み合わせる（入れ子）ような処理を行いたいと思ってるのですが、 まだいろいろ試してみると理想通りにならないですね・・・ ただとりあえず今回の質問にはしっかりお答え頂いたので ありがとうございました。
こんにちは。 同じようなＨＴＭＬファイルを作って試して見たところ、.sampleの「top 40px;」の部分を、「top:40px;」としたところ、無事に見ることが出来ました。 従って、原因はtopの表記を間違えていた事だと思います。
お礼
ご返答ありがとうございます。 こちらでもそのように直したらちゃんと表示されました。 ありがとうございます。 もしよろしかったらrit_13444さんにもANo.1の自分の再疑問に お答え頂けないでしょうか？よろしくお願いします。
top:40px; と書かなければならないのが top 40px;となっています。 あと、.sample2と.sample3のleftの表記も間違ってますよ。 これを直すとちゃんと表示されると思います。
お礼
ご返答ありがとうございます。 言われてみればたしかに間違ってました・・・ 仰る通り直したらできました。ありがとうございます。 ところでついでで申し訳ないのですが、 これをさらに拡張して、 「sample.css」 .sample2 {color:#ff0000; position:absolute; top:10px; left:10px; } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px; } .upsample {height:50px; background-color:#00ff00; font-weight:bold; position:relative; top: 50px; } .downsample {height:50px; background-color:#00ff00; font-weight:bold; position:relative; top: 50px; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="upsample"> position:relative <div class="sample2"> upsample2 </div> <div class="sample3"> upsample3 </div> </div> <div class="downsample"> position:relative <div class="sample2"> downsample2 </div> <div class="sample3"> downsample3 </div> </div> </body> </html> と、upsampleとdownsampleを上下に並べた場合に 希望する結果としてupsampleとdownsampleの間に50pxの空間を空けたいと 思ってたのですが、upsampleの上の空間はちゃんと50px空いていますが、 upsampleとdownsampleの間は空いていないのです・・・ どうやらupsampleのposition:relative; top: 50px;を認識してない気がするのですが、 どうしたら認識させることができるのでしょうか？ もしよろしかったらこれもお答えして頂けないでしょうか？
関連するQ&A
- position:relativeについて教えてください
初めて質問します。 ２つの横にならんだセルをDIVによって表示しようと思い <DIV style="width:112px;height:20px;background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="width:112px;height:20px;background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> というスタイルシートを作成しようとしたのですが、実際にはテスト１０まであり、一行がいかんせん長いので次のようにしてみました。 <DIV style="width:112px;height:20px;"> <DIV style="background-color:red; position:relative;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow; position:relative;left:112px;top:-20px;">テスト２</DIV> 同じように使われている記述でまとめることができるんだ、と思い、ポジションの記述もまとめてみたのですが、 <DIV style="width:112px;height:20px;position:relative;"> <DIV style="background-color:red;left:0px;top:0px;">テスト１</DIV> <DIV style="background-color:yellow;left:112px;top:-20px;">テスト２</DIV> この記述だと、セルが下にくっついてしまい、うまく表示できません。 positionは必ず記述しないといけないのでしょうか。できたらもっと１行を短くしたいのですが… 解決方法がわかる方いらっしゃいましたら、宜しくお願いします。
- ベストアンサー
- HTML
- ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSでdivが縦にはみ出る問題
HTMLとCSSについての質問です <div class="wrapper"> <div class"first"></div> <div class"second"></div> <div class"third"></div> </div> このようなHTMLがあります。 その際にfirst,secondのクラスはwrapper内に収まるのですが、最後のthirdクラスのみwrapperクラスから下にはみ出て表示されてしまいます。 thirdクラスもwarpper内に収めたいのですが、どうすれば良いのでしょうか？ ちなみに今はレスポンシブのcssを書いていますが、PC版のCSSではしっかりとwrapperクラス内にすべてのdivが収まっています。 CSSは以下の通りです。 .wrapper{ position:relative; } .first{ position:absolute; top: 0; left: 0; } .second{ height: 500px; } .third{ height: 500px; } アドバイスよろしくお願いします。
- 締切済み
- CSS
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!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"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css"> <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } { top: 50px; left: 150px; background-color: #FFEAEF } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } --> </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- CSSでテーブルを使わずにレイアウト
以下のソースでなんとかレイアウトできたのですが 左よせではなくセンターよせにしたいのですがどのように記述すればよいでしょうか？CSSの対応していないブラウザの場合にメニューを下部メニューにしたいため p.menu は下部に記述しています。 -- css -- body { width:700px; margin:0px; font-size:12px; color:#ffffff; } p.head { height:15px; margin:0px auto; background-color:#0000ff; } .text { width:500px; text-align:left; margin:0px 0px 0px auto; background-color:#aa0000; } p.menu { width:200px; background-color:#dddddd; position:absolute; left:0px; top:15px; } -- html -- <body> <p class="head"> タイトル </p> <div class="text"> あいうえおかきくけこ </div> <p class="menu"> <a href="">menu1</a> </p> </body>
- ベストアンサー
- HTML
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSの背景を半透明
http://www.tacky.cc/program/htm_tips/html/style01a.htmのサイトからサンプル抽出して、色々手を加えていますが、 よく分からなくなってしまいました。そこで質問ですが、下記のプログラムでわからない事があります イメージとしては、アップルの場所は忘れましたが、透明の画像が、3.4重に重なっている感じにしたいと思っています。 <HTML><HEAD> <STYLE TYPE="text/css"> <!-- DIV.sample01 { background-color:#000000; position:relative; top:-70px; right:-00px; height:20px; width:1100px; filter:Alpha(opacity=50); z-index:0; color:#000000; font-size:x-small; padding:3px;} } DIV.sample02 { background-color:#ffffff; position:relative; top:-1100px; right:-100px; height:-100px; width:250px; filter:Alpha(opacity=60); z-index:2; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここから黒の色--> DIV.sample03 { background-color:#2E2921; position:relative; top:-500px; right:-100px; height:300px; width:500px; filter:Alpha(opacity=60); z-index:3; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここまで黒の色--> DIV.sample04 { background-color:#F7CE71; position:relative; top:3000px; right:-10px; height:180px; width:200px; filter:Alpha(opacity=40); z-index:1; color:#000000; font-size:x-small; padding:3px;} } --> --> </STYLE></HEAD> <BODY> <BASEFONT SIZE="2"> <table><tr><td> <DIV CLASS="sample01"> <DIV CLASS="sample02"> <DIV CLASS="sample03"> <DIV CLASS="sample04"> </table></td></tr> </BODY></HTML> このようなプログラムにしましたが、何も表示されなくなってしまいました。 原因はpositionの指定が悪いと思います（pxを変更後おかしくなりました）で、「top:*px;」「right:*px;」 「height:*px;」「width:*px;」の意味がわかりません。高さや長さというのはわかりますが、 それから、「DIV.sample*」の中に「background-color:#F7CE71;」があるのに、さらに「color:#000000;」の二つある 意味がわかりません。サンプルをコピーして、手を加えたので、理解していない部分があるので、参考になる アドバイスお願いします。
- ベストアンサー
- HTML
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
お礼
ご返答ありがとうございます。 仰る通りmarginを使ってやったらできました。 ありがとうございます。