• ベストアンサー

スタイルシートのpositionプロパティについて

インラインフレームの位置を絶対指定したいのですが上手くいきません。 IFRAME{position : absolute; left : 100px; top : 100px; bottom : 100px; right : 100px; } これで親ウインドウ4辺に対して100px間隔のあるものが出来ると思ったのですが、 左と上の位置だけ正しい、小さなフレームになってしまいます。 インラインフレーム自体のサイズを指定すると、ウィンドウの大きさによっては 切れてしまうのでなるべく避けたいのです。 何が間違っているのでしょうか?良きアドバイスお願いします。

  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • inuichi
  • ベストアンサー率51% (14/27)
回答No.1

leftとright、topとbottomは同時には設定できません。 その為、最初の2つが優先されて適用されたのだと思います。 センタリングするだけでよければ、 IFRAME{ margin: auto } でできますが。 100pxにこだわるなら、 javascriptなどでウィンドウサイズをだしておいて、 それをcssで呼んで、そこから、 インラインフレームの縦、横サイズを それぞれウィンドサイズ-200pxにするように設定して、センタリングする といったようことが必要になってくると思います。

spaspa
質問者

お礼

ありがとうございます。 背景、インラインフレーム、画像を組み合わせて変わった見え方にしようと思っていたのですが、 なんとか使えるメドが立ちました。

関連するQ&A

  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • HPにブログを埋め込む

    HPにブログを埋め込む サイトを運営しています。 その中の「Blog」についてなのですが、インラインフレームによって、ブログを埋め込んでいます。 <iframe src="ブログのURL" frameborder="5" style="height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> とすると、ヘッダー(メニューバーとツイッター)が表示されないので、 ヘッダーを読み込むタグをインラインフレームのあとにしてみると、今度はヘッダーにより、スクロールバーが隠れるのです。 そのため、今は <iframe src="ブログのURL" frameborder="5" style="height:77%;width:100%;position:absolute;top:100px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> として、100pxから初め、77%で埋め込んでいるのですが、もっといい方法はないでしょうか? また、別に、インラインフレームで埋め込まなければいけないわけではありませんので、ほかにもっと良い方法があるなら、教えていただきたく思います。 ご協力お願いします。

    • ベストアンサー
    • HTML
  • スタイルシートでスクロールは可能ですか?

    以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>   <TITLE>Test</TITLE>   <STYLE type="text/css">   #left {    position:absolute;    top: 130px;    left: 100px;    width: 300px; overflow: scroll;   }   #main {    position:absolute;    top: 130px;    left: 400px;   }   #right {    position:absolute;    top: 130px;    left: 700px;   }   #footer {    position:absolute;    bottom: 0px;    left: 100px;   }   </STYLE> </HEAD> <BODY> <div id="left">  left<br/> <br/>  left<br/> </div> <div id="main">  main </div> <div id="right">  right </div> <div id="footer">  footer </div> </BODY> </HTML>

  • CSSのposition値の上書き(打消)について

    現在、スタイルシートにてサイトを制作中です。 トップページとその他のページでposition: absolute; で配置を変えたいDIV要素があり、 以下のようなCSSを記述してテスト中です。 (※トップページにはbodyに#topというIDを割り振ったとします。) <style>  div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;}  body#top div#test {bottom: 80px; right: 15px;} </style> <div id="test"></div> 上記のように、トップページのみに body#top div#test として上の要素のサイズなどを 継承していますが、 position の値のみを top → bottom に、left → right に変更して設定にしようとしております。 通常ページでは position を left と top からの位置で適用しておりますが、 トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。 しかし上記のように継承して記述しても、 トップページではどうしても left と top からの指定となってしまい、 bottom: 80px; right: 15px; という新たなposition値は無視されてしまうようなのです。 横幅などは通常下にあるものが上書きされるのですが、この場合には駄目な様です・・・。 ここで難しいのは、top → bottom に、left → right に変更したいという点にあると思います。 つまり上書きは出来ないため、上の要素のtop 、 left はそのまま継承されてしまうようです。 top 、 left 、bottom 、 right のすべてを body#top div#test に記述しても駄目なので、 どうにかして継承元の top と left の設定を下位で継承させない (無効にする?)ような方法はありませんか? 参考本やネット上の情報でも、このあたりの記述は無く、 今まであまりこのように position をページごとに別の方向から指定するように スタイルシートを書いたことが無いため、完全にわからない状態です。 お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。

    • ベストアンサー
    • CSS
  • positionプロパティの設定について

    下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------

    • ベストアンサー
    • HTML
  • スタイルシートでうまくフッター部分を配置設定する方法を教えてください。

    スタイルシートに詳しい方に教えていただきたいのですが、 今ホームページを作っていて、 フッター部分の設定に困っています。 タイトルカラム 左カラム コンテンツカラム フッターカラム というページ構成で 絶対指定で top と left を使って 各要素の位置指定をしているのですが、 フッター部分だけうまくいきません。 フッターに 「Copyright (C) ●● All Rights Reserved.」 という文言をタイトルカラムと同じ width で入れたいのです。 なぜか title カラムの下に表示されたり、 画面の一番上に表示されたりするのです。 bottom を使用するのかな? と思ったのですが、それでもうまくいきませんでした。 できるだけページ全体を table タグを使って デザインしたくなくて、スタイルシートであれこれ やっているのですが、苦戦しています(汗)。 スタイルシートを下記しますので、 お知恵をお貸しくださいませ。 -------------------- div.title { position: absolute; top: 0px; left: 20px; width: 800px; background-color: #ffffff; height: 412px; } .left { width:185px; position: absolute; top: 415px; left: 20px; background-color:#ffffff; } .content { position: absolute; top: 415px; left: 205px; width: 600px; text-align: left; } .footer { position: absolute; bottom: 0px; left: 20px; width: 800px; text-align: left; height: 100px; }

    • ベストアンサー
    • HTML
  • positionについて下記の認識で正しいでしょう

    positionについて下記の認識で正しいでしょうか? ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } _______________ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic(初期値)以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。(個人的に単独で使う事はほぼないです) ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか?

    • ベストアンサー
    • CSS
  • スタイルシートのpositionプロパティを使ってレイアウトすると…

    スタイルシートのpositionプロパティを使って、テーブルでレイアウトされたように左にメニュー、右に内容という感じに区切られたページを制作しようと思いました。 実際には下記のような感じでかきました。 --------------------------------- DIV.menu { position: absolute; margin: 0; padding: 0; left: 5px; } DIV.main { position: absolute; margin: 0; padding: 0; left:150px } --------------------------------- 表示については問題ないようなのですが、テキスト部分をドラッグして選択しようとしたとき、うまく選択できない現象が出てしまいました。 WindowsIE6.0、NN7.0で確認しましたが、問題の現象が起こるのはIE6.0の方でNN7.0は問題ありませんでした。 仕様と思って諦めるしかないのでしょうか? 解決方法などありましたらご教授ください。

    • ベストアンサー
    • HTML
  • スタイルシートのpositionについて

    久しぶりの投稿となります。 まだまだ未熟なのですがスタイルシートでデザインし、それを使ってブログにする。ということを考えています 例えば #blog{border:inset 10px #000000; width:500px; height:100px; background-color:#FFFFFF; position:absolute; top:100px; left:200px; } こんな感じでHTMLに組み込むと横幅500px縦100pxの上から100px、左から200pxの位置にある 枠で囲った表が出ると思うのですが、ここまではいいのです。 ここで文字を入れて過度に改行すると枠も自動的に伸びますよね? つまり縦100pxを超える文字列を記述したときなどです。 これもいいのです。 ブログですから当然記事も2つ以上一つのページに表示することになるので #blog2{border:inset 10px #000000; width:500px; height:100px; background-color:#FFFFFF; position:absolute; top:300px; left:200px; } とすれば#blogは上から100pxの高さで高さが100pxの枠が表示されると思うので#blog2は#blogの100px下に同じ条件で現れると思います。 これもいいのですが、#blogで100pxを超えて300pxの高さになる文章を書いたとします。 そうなると#blog2の上にかぶさってしまいますよね? そうならないためにはどうしたらいいのでしょうか。。。 固定でいつも上の記事(#blog)の100px下。という感じに出来ないでしょうか? 出来るならば4つくらい記事を書いても記事と記事との間にスペースが生まれるのでいいなぁと思ったのですが。。。 こうなると#blog(記事の一番目)の100px下に#blog2(記事の二番目)、その下100pxに#blog3(記事の3番目)さらにその下に#blog4(記事の四番目)というように。 説明がよくわからないと思うのでどのようにしたいか伝わらなかった場合どんどんお申し付けください。 よろしくお願いします

    • ベストアンサー
    • HTML
  • positionについて

    positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか? また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }

    • ベストアンサー
    • CSS