- ベストアンサー
レイヤーを画面の左右中央に重ねて配置したい
質問No.1083158:レイヤーを画面の中央に配置したい を見て、おお、これだ!と思って試してみましたが、レイヤーを重ねることはできませんでした。 "position:absolute;"を指定しないとレイヤーを重ねられない(ですよね?)、でもそうするとセンタリングできない、ということでしょうか? 現在は、レイヤーの幅を100%にして「中身」をセンタリングしたものを重ねていますが、これだと他の要素(特にリンク)の上に重ねられないのでレイアウトに制約があります。 上下方向の位置とサイズを指定した複数のレイヤーを重ねる方法はないのでしょうか?
- maomao55
- お礼率89% (59/66)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
divタグの重ね方がカギです。style="position:relative;width:幅px;height:高さpx"を外枠に付加して、さらにその外側をalign="center"で囲います。 例: <div align="center"> <div style="position:relative;width:200px;height:200px;background:black"> <div style="position:absolute;left:0px;top:0px;width:200px;height:200px;background:blue"> a </div> <div style="position:absolute;left:20px;top:20px;width:40px;height:40px;background:red"> b </div> </div> </div>
関連するQ&A
- 可変幅でabsolute指定で中央配置できません
可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか?困っています、どなたかお助けください。 例えば画像が固定のサイズであれば width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500pxとはなりません。 よろしくお願い致します。
- ベストアンサー
- CSS
- レイヤーを画面の中央に配置したい
新規Webサイトをつくるにあたって、レイアウトに、テーブルではなく、レイヤーを使用しようと思っています。 画面の中央に配置したい場合、テーブルならalign="center"で、できますが、レイヤーの場合はどのように設定すればよいでしょうか? 当方Dreanweaverを使用しています。HTMLやCSSの書き方でお教えいただいても結構です。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSS ブロックの配置について
ヘッダの部分なんですが、左上にロゴ、その隣に少しスペースを空けて二つブロック要素を配置したいんですが、(テーブルで言うと2行3列と言った感じです)position: absoluteで指定すると絶対値で指定されてるので、ウィンドウ幅を変えたりしても、それに合わせてサイズが変わらないんですが、変わるようにはどう記述したらいいんでしょうか?position: absolute以外で記述すると思ったところに配置されません。どなたかアドバイスいただけませんか?宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで左右の中央配置
CSSでのレイアウトを考えております。 ┌──────────────┐ │MainBox(W760px) │ │┌─────┐┌─────┐│ ││boxA ││boxB ││ ││(W300px) ││(W300px) ││ │└─────┘└─────┘│ │ │ └──────────────┘ ↑このようなかんじなのですが、 boxAとboxBの配置はabsoluteを使って成功したのですが、MainBoxごとプラウザの横幅を変えても左右の中央配置にしたいのですが、どのようにしたらよろしいのでしょうか? 同じような質問を参考にしてみたのですが、うまくいきませんでした。すいませんが、どなたか助けてください。
- ベストアンサー
- HTML
- 中央寄せに対するabsolute配置
中央寄せされたページの右上あたりに画像を配置したいのですが、 重要でないものなのでHTMLの下のほうに書いています。 普通に position:absolute; で持ち上げると、画面左上が基準であるためモニターサイズによって中央寄せ部分との位置関係が狂ってしまいますよね? かといってmarginにマイナスを指定したくありません。 そこで、画像の入った要素を最上部(top:0px)の中央(left:50%)に絶対配置し、そこからimgを絶対配置でleft:100pxのように右に動かしてみました。 IEやFirefox、Opera、Chromeなど、思いつくブラウザで見たところ問題ないのですが、Dreamweaver CS4のライブビューで見るとずれています。 たしかWebkitがエンジンだったと思うのですが、もっと賢いやり方はありませんか?
- ベストアンサー
- HTML
- レイヤーの固定の方法
レイヤーの対して、「position:absolute」を指定すると、親要素の位置を 基準に配置場所が決まりますよね。 ある画像を画面のセンター揃えにした場合、自動的に画面のセンターに表示 されるようになります。これだと画面のサイズによって画像の座標が変わって しまいます。 今は<BODY>タグが親要素となっているため、レイヤーの位置が画面のサイズに よって違ってしまいます。(つまり画面の上から40px、横から100pxという指定) 画面のサイズによって座標が変わる親要素からレイヤーの位置を指定したいのですが、その方法がわかりません。 解決策を教えてください。 果たしてこの説明で意味が伝わったでしょうか??心配…。
- 締切済み
- CSS
- ホームページを画面中央に配置するには?
Dreamweaver8を使用しています。 スタイルシートを使用してレイアウトしています。 bodyの中にcontainerというタグを挿入し、すべてのコンテンツを入れて、幅を700に設定しています。 このとき、広い画面でみて、HPが中央に配置されるようにするにはどうすればよいでしょうか? 現状では左端に寄っています。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- GIMPのレイヤーの配置方法
GIMP2 for Windowsのレイヤーの配置方法について 質問があります。 普通は、マウスやキーボードで決めますが、ピクセル数を入力して 決める方法はないでしょうか。 上下・左右のピクセル数を指定して、その位置を基点にレイヤーを 配置したいのです。
- ベストアンサー
- フリーウェア・フリーソフト
- CSSで画像・テーブルをウインドウの中央(上下・左右共)に表示したい!
前回は文字を一番下の中央に表示させたい質問をして、 回答を頂き出来るようになったのですが、今度は画像や テーブルをCSSを使ってウインドウの中央(上下・左右共) に表示させる方法が分らず困っています。 ご存知の方がおられましたら回答を宜しくお願いします。 このようにやってみましたが、画像やテーブルの縦の長さ に関係なく50%位置に配置されてしまい、上下に中央では なくなってしまいました。 position: absolute; top: 50%; width: 100%; text-align: center; いじょう宜しくお願いします。
- ベストアンサー
- HTML
- 要素の配置方法について・・・
要素を直接配置する方法として、 CSSのpositionで指定する方法がありますよね。 今、XHTML1.0Trasionalでホームページを作っているのですが、 position:relative; top:0px; left:0px; と指定してもうまくいきません。(ピクセルは今だけ0にしました) position:absolute;でもやってみたのですが、 変わりませんでした。 だれか、この解決策を知っている方はおらっしゃるでしょうか? 知っていたのなら、ぜひお教えください。 ただ単に、私が間違っていたと言う事もありえますので、 うちでは、ちゃんとなったよ! という人もおられましたら、 是非ご回答お願いします。
- 締切済み
- HTML
お礼
簡潔でかつ非常にわかりやすい例をありがとうございました。目からウロコが落ちるとはこのことですね。
補足
早速試してみました。 Windows版IE5.5、Firefox1.0.7とMAC版IE5.1.7、Netscape7.1で全て完璧に表示できました、感謝!。 position:relativeはいまひとつ使い方がわからなかったのですが、こういうふうに使えるんですね。 また、レイヤーを重ねるにはz-indexで指定するしかないと思いこんでいました(^_^;) 本当にありがとうございました。