ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：joef_f CSSのボックスの配置他について
困り度：
  • すぐに回答を！
 <head>
<title>Webサイト</title>

<style type="text/css">
<!--

#example { /* 親ボックス */
width: 750px;
height: 900px;
background-color: #FFEAEF;
position: absolute;
top: 50px;
left: 100px;
}
{
top: 50px;
left: 150px;
background-color: #FFEAEF
}


#boxL { /* ボックス左 */
width: 150px;
height: 600px;
background-color: #ffffff;
position: absolute;
top: 150px;
left: 1px;
}

#boxR { /* ボックス右 */
width: 599px;
height: 600px;
background-color: #ffffff;
position: absolute;
top: 150px;
left: 150px;
}

-->
</style>

</head>
<body>

<div id="example">
<div id="example1"><h1>ボックス1</h1></div>

<div id="boxL">ボックス左</div>
<div id="boxR">ボックス右</div>

</div>

</body>
</html>
とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？
質問投稿日時：08/03/28 11:51
質問番号：3901625
この質問に対する回答は締め切られました。

回答

良回答20pt
回答者：auty 一部修正をしてみました。

・　#example1が抜けていると思われたので追加しています。
・　配置を見やすくするため、色を変えたところがあります。

早速IE と Foxfireとで、違いが出てくることが分かります。
両者の実装に違いによります。

------------------------------------------------------------
<html>
<head>
<title>Webサイト</title>
<style type="text/css">
<!--
#example { /* 親ボックス */
width: 750px;
height: 900px;
background-color: #FFEAEF;
position: absolute;
top: 50px;
left: 100px;
}

#example1 {
/* position: absolute; */
top: 50 px;
left: 150 px;
background-color: #88EAEF
}

#boxL { /* ボックス左 */
width: 150px;
height: 600px;
background-color: #ffffff;
position: absolute;
top: 150px;
left: 1px;
}

#boxR { /* ボックス右 */
width: 599px;
height: 600px;
background-color: #ffffcc;
position: absolute;
top: 150px;
left: 150px;
}

#footer {
width: 750px;
height: 100px;
background-color: #cccccc;
position: absolute;
top: 750px;
left: 1px;
}
-->
</style>
</head>
<body>
<div id="example">
<div id="example1">
<h1>
ボックス1
</h1>
</div>
<div id="boxL">
ボックス左
</div>
<div id="boxR">
ボックス右
</div>
<div id="footer">
<strong>ここに必要ならタグと共に記入</strong>
</div>
</div>
</body>
</html>
------------------------------------------------------------

#example1 {
に
position: absolute;
を追加してみてください。更に違いが見えてきます。

＞＞＞　<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？

非推奨のものは出来るだけ使わないようにして、HTMLとCSSとで機能を振り分けていくと良いでしょう。
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/03/28 12:43
回答番号：No.1
この回答へのお礼ありがとうございました！！
 
スポンサーサイト（詳細）
このページのトップへ