CSSを使った枠の設定方法についての質問

2010/01/24 08:19

このQ&Aのポイント

CSSを使って枠の設定をしたく、うまくいかない箇所があるため、質問させていただきます。
質問内容は、780pxの枠の中に左側に170pxの枠を作成し、右側に600pxの枠を作成したいが、うまくいかないというものです。
ご指導いただける方、よろしくお願いいたします。

pcckit
お礼率76% (477/626)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/01/24 10:45 回答No.2

サンプルです。＞私としては780pxで作成した枠の中に、　★子孫ブロックにabsoluteを使うのでpositionにstatic以外を指定する。＞(枠内)左側に170pxの枠を作成して、　★position:absoluteで配置する。後続の要素は、これがないように振舞う＞その右側に、600pxの枠を作成したかったのですが、　★よって、左側のmarginのみ指定すればよい。【注意】ソース内の[全角スペース２個]は、タブ(\t)に置換すること　　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ※Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックすみ ※W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )で検証済み ※The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )で検証済み <!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"> 　　<title>サンプル</title> 　　<meta http-equiv="Content-Style-Type" content="text/css"> 　　<style type="text/css">  　　</style> 　　<link rel="START" href="../index.html"> </head> <body> 　　<h1>サンプル</h1> 　　<div id="main"> 　　　　<ul class="nav"> 　　　　　　<li>見出し1</li> 　　　　　　<li>見出し2</li> 　　　　　　<li>見出し3</li> 　　　　</ul> 　　　　<div class="bodyText"> 　　　　　　<h2>見出し1</h2> 　　　　　　<p>段落</p> 　　　　　　<p>段落</p> 　　　　　　<h2>見出し2</h2> 　　　　　　<p>段落</p> 　　　　　　<p>段落</p> 　　　　　　<h2>見出し3</h2> 　　　　　　<p>段落</p> 　　　　　　<p>段落</p> 　　　　</div> 　　</div> </body> </html>

質問者

お礼 2010/01/24 19:39

詳しく、ご指導くださいまして真にありがとう御座いました。お蔭様でとても参考になりました。ありがとう御座います。また、ご縁がありましたときはよろしくお願いいたします。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/01/24 11:32 回答No.3

IEとの表示差があるのでスタイルシートのみ修正 <style type="text/css">  </style>

ログインすると、全ての回答が全文表示されます。

noname#140925

2010/01/24 09:27 回答No.1

[参考]とほほのスタイルシート入門 position http://www.tohoho-web.com/css/reference.htm#position mainにrelative、waku1もrelative、waku2にabsoluteを指定して、位置指定すれば左右に表示出来ますよ。 <html><head> <style TYPE="text/css">  </style> </head><body> <div class="main"> <div class="waku1">waku1</div> <div class="waku2">waku2</div> main </body></html>

質問者

補足 2010/01/24 16:39

skyfang様。この度は私のような初心者に詳しく解説頂きまして真にありがとう御座います。お手数では御座いますが、再度ご指導のほどお願いできませんでしょうか？前回とは少し変わるのですが、私としては以下のようにしたいと考えております。 http://desktop10.web.fc2.com/ skyfang様にご指導いただいた内容はもちろん前回質問させて頂いた内容で御座いましたが、私の勘違いで少し質問の内容を間違えてしまったようです。大変に失礼をいたしました。大変にお手数では御座いますが、再度のご指導のほどお願いできませんでしょうか？よろしくお願いいたします。

ログインすると、全ての回答が全文表示されます。