ホームページ margin

質問

#test1 {
width: 443px;
height:58px;
position: top;

margin: -1px 538px 8px ;
}

#test2 {
width: 289px;
height:59px;
position: top;

margin: -1px 1238px 8px ;

}
（画像はヘッダー部分です。）
この二つはどちらも上下のmarginは同じ数値にしてあるのになぜ赤はこんなにも下にさがるのでしょうか？

赤を青の場所に持ってきたいのですがどうすればいいでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

positionにtopという値はありません。
　⇒Full property table - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/propidx.html )
　　static | relative | absolute | fixed | inherit
です。
詳しくは、
　⇒'position'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#propdef-position )

#test1 {}
#test2 {}
　こんなCSS書いてたら、自分を含めて誰にも分からない。原因はもちろんHTMLにあるのですが・・
　推測の域を出ませんが、ブロック要素になっている。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
整形
　　デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
　7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )より

＞（画像はヘッダー部分です。）
　でしたら、HTMLは
<div class="header">
　<h1>見出し</h1>
　<h2>見出し</h2>
</div>
　のようになっているはずですね。
・・『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』

　そしてスタイルシートは
div.header{position:relative;}
div.header h1,div.header h2{height:59px;line-height:59px;text-align:center;}
div.header h1{margin:0 300px 0 0;width:440px;}
div.header h2{position:absolute;top:0;right:0;width:300px;}
/* 色づけ */
div.header h1{background-color:red;}
div.header h2{background-color:aqua;}
とかになります。

　これだと、
・スタイルシート見ただけでHTMLの構造が分かるし、HTML見なくてもスタイルシート書ける。
・HTMLには文書構造しか書いてないので、メンテナンスが楽
・デザインは自由に変更できる。

お礼

わかりました、ありがとうございますｍ(_ _ )ｍ