- ベストアンサー
コンテンツの配置について
Yahoo!のようにコンテンツ全体を中央によせ、さらに、 それぞれのボックスの表示位置を縦横で指定したいのですが 以下のようなソースではうまくいきません。 対処方法をご教示下さい。 よろしくお願いします。 <STYLE TYPE="text/css"> <!-- #main{ position:relative; top:10px; text-align:center; width:100%; } #contentsA{ text-align:center; width:800px; } #contentsB{ position:relative; hight:200px; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは こういうことがしてみたい？ (divがどのようになってるか見るためにdiv { border:1px solid; }をつけています） <style type="text/css"><!-- body{ text-align:center; } #contentsA{ margin:auto; margin-top:10px; width:800px; position:relative; } #contentsB{ text-align:left; position:absolute; top:100px; left:300px; width:300px; height:200px; } div{ border:1px solid; } --></style> <title></title> </head> <body> <div id="contentsA"> <div id="contentsB"> <img src="image3.gif" border="0" width="50" height="50"> <img src="image2.gif" border="0" width="50" height="50"> <img src="image1.gif" border="0" width="50" height="50"> </div> </div> posotionを使うとcontentsAの高さは0になってしまうのでcontentsAのcssに別途height指定(px)する必要があります
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは text-align:center;やmargin:auto;のように・・・ってことですか？ そういうのはおそらく無かったと思います(知らないだけかな?) positionを使ってのセンタリングは大抵 left:50%; width:300px; margin-left:-150px; のようにして leftで中央位置に持ってきてmarginで幅の半分左にずらしてやるということをしていると思います 中のコンテンツが2つ以上あればfloatさせたりmarginの相殺など考えたりしないといけないのでposition:absoluteのほうが使いやすい時もありますけど1つしかないのであれば以下でも出来ます #contentsB { text-align:left; width:300px; height:200px; margin:auto; margin-top:100px; } どちらにしてもmarginの量を決めるのにwidth設定は必要になります(デフォルトは100％ですので)
お礼
ありがとうございました。 非常に助かりました。
- waracabin
- ベストアンサー率64% (40/62)
************************************************************** <!-- #main{ top:10px; text-align:center;←←←(2)古いブラウザのためのセンタリング width:100%; } #contentsA{ margin:0 auto;←←←(1)通常のセンタリング text-align:left;←←←(3)一部ブラウザは真ん中寄せを継承してしまうので、なおしてあげる width:800px; } #contentsB{ hight:200px; } --> ************************************************************** ヤフーのように、 １．まずメインのボックス(1)をつくって、それをセンタリングする ２．そのボックス(1)のなかに、さらにボックス(2,3,,,)をつくり、それをボックス(1)の中で自由に配置したい ……ということでよろしいでしょうか？ CSSでの配置はブラウザによる問題が大きく、書籍通りにならないことがよく起こります(当方もコレをやろうとして、最初は激しく混乱しました。。。 参考サイトとしては、 ○http://www.stylish-style.com/csstec/basic/p-boxc.html ○http://www.koikikukan.com/archives/2006/10/24-003838.php ……こちらをご参照ください。
お礼
早速のご回答ありがとうございまいた。 残念ながら御記載頂いたソースではうまく表示できませんでした。 ご紹介頂いたサイトは参考にさせて頂きます。
補足
ご回答ありがとうございました。 希望する配置で表示できました。 追加で教えていただきたいのですが、 #contentsBで、Leftで横位置を指定していますが、 単純に中央寄せするにはどうすればよいでしょうか？ お手数お掛けしますがよろしくお願いします。