解決済み

CSSのボックスの配置他について

  • すぐに回答を!
  • 質問No.3901625
  • 閲覧数102
  • ありがとう数2
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 100% (2/2)

<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タグを使っても問題ないでしょうか?

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

  • 回答No.1

ベストアンサー率 58% (284/486)

一部修正をしてみました。

・ #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とで機能を振り分けていくと良いでしょう。
お礼コメント
joef_f

お礼率 100% (2/2)

ありがとうございました!!
投稿日時 - 2008-03-28 16:50:46
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ