Web標準コミュの順序入れ替えについて質問です。

ご質問失礼させて頂きます。
かなり長くて分かりにくいかもしれませんが、
もし、お読みいただける方がいらっしゃれば嬉しく思います。
*管理人様へ
適切な質問でなければ削除してください。

以下質問内容です。

この画像のような構成のサイトを作成したいのですが、
ＸＨＴＭＬの記述順序は、

1ヘッダー
2本文
3メインメニュー
4サブメニュー
5ナビゲーション
6フッダー

としています。（この順序が一番ユーザビリティなどを踏まえて最適と考えた為です。）

2の本文以外はテンプレート化する場合、
CSSの記述に非常に困っております。

現在はまず、divコンテナとして全てをくくり、
その次にdivコンテナ2として、
2本文、3メインメニュー、4サブメニュー、5ナビゲーション
をくくっています。

こうして、あとはCSSのpositionプロパティのabsoluteなどで
表示順番を入れ替えて画像の表示にしているのですが、
3のメインメニューの底と2の本文の底とコンテナ2の底を合わす方法が思いつきません。

2の本文は内容が多くなり下に長くなる可能性がある為、
2の本文が下に長くなった場合にはコンテナ2の底自体も自動的に
下に伸びて欲しく、
2の本文が3のメインメニューより短くなった場合には
3のメインメニューに合わせてコンテナ2の底が合って欲しいのです。

今現在は3のメインメニューが2の本文より下に長くなった場合はコンテナ2の底は3のメインメニューと合うのですが、
2のメインメニューが下に伸びた場合も
3のメインメニューの底と合う状態で、
コンテナ2の底を2の本文が突き抜けてしまいます。

XHTMLの記述順序やデザインを変更すれば解決できるのですが、
いずれもこのままで制作しなければなりません。

色々と検索して調べてはみたのですが、全く分かりませんでした。
もし、どなたか解決策を知っている方がいらっしゃればと思い、切実な思いでご質問をさせて頂いております。
よろしくお願い致します。

*まずはfirefoxでの反映を目指しております。
*#container2:after {
content:"";
display:block;
clear:left;
}
の手法を試してみたのですが、駄目でした。

コメント(20)

最初
全て
最新の40件

[1] mixiユーザー 06月14日 07:58

ソースがないとなんもいえません。

[3] mixiユーザー 06月14日 10:21

サンプルで作ったソースを作成します。以下XHTML
---------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>t</title>
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" media="all" href="css/index.css" />

</head>

<body>
<div id="container">
<div id="header">
<h1>ヘッダー</h1>
</div>

<div id="container2">


<div id="content">
<p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p></div>


<div id="navi">
<ul id="navigation">
<li><a href="#">ナビゲーション　ホーム</a></li>
</ul>
</div>


<div id="menu">
<ul>
<li>メインメニュー</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

<p class="banner">banner</p>
</div>


<div id="submenu">
<ul>
<li>サブメニュー</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>

</div>


<div id="footer">
<address>test</address>
<p>フッター</p>
</div>
</div>

</body>
</html>

-------------------------------------------

[4] mixiユーザー 06月14日 10:22

以下CSSです。
-------------------------------------------
@charset "utf-8";

/* initializes */
*{
margin:0;
padding:0;
border:0px solid #00f;
}

h1,h2,h3,h4,h5,h6,p,address{
font-size:100%;
font-weight:normal;
font-style:normal;
line-height:100%;
}

/* whole */
body{
margin-bottom:5px;
padding:0;
text-align:center; /*IEcentering*/
font-size:0.9em;
font-family:"Verdana";
line-height:1.3em;
height:auto;
color:#333;
background:#eee;
}

/* parts */
#container{
position:relative;
margin-left:auto;
margin-right:auto;
width:758px;
border:1px solid #ccc;
margin-bottom:5px;
padding-bottom:5px;
text-align:left; /*IEcentering*/
}

#header{
margin:5px 5px 5px 5px;
background:#fff;
}

#container2{
position:relative;
margin-left:auto;
margin-right:auto;
width:758px;
border:1px solid #ccc;
background:red;
text-align:left; /*IEcentering*/
}

#container2:after {
content:"";
display:block;
clear:left;
}

#menu{
float:left;
width:160px;
margin:25px 0px 0px 5px;
background:#fff;
}

#navi{
position:absolute;
top:0px;
left:0px;
width:748px;
margin:0px 5px 0px 5px;
background:#fff;
}

#submenu{
position:absolute;
top:25px;
left:170px;
width:575px;
margin:0px 5px 0px 5px;
background:#fff;
}

#footer{
clear:both;
background:#edd;
text-align:center;
margin:10px 3px 10px 5px;
padding:5px 0px 0px 0px;
}

a:link {color:#FF6633;}
a:visited {color:#777777; text-decoration:none;}
a:active {color:#999999; text-decoration:none;}
a:hover {color:#FF6633; text-decoration:none;}

h1{
margin:5px;
font-size:0.7em;
text-align:center;
line-height:2em;
}

ul{
list-style:none;
padding-left:0;
}

img{
border:0;
}

img.left{
float:left;
margin:0px 15px 15px 0px;
}

p.one{
padding:10px 0px 10px 0px;
}

p.two{
padding:10px 0px 10px 0px;
clear:left;
}

p.three{
padding-bottom:10px;
}

p.banner{
padding:10px 0px 0px 0px;
}

ul#navigation{
margin:0;
padding:0;
}

ul#navigation li{
display:inline;
list-style-type:none;
margin:0;
padding:5px;
font-size:80%;
}

ul#navigation a{
font-weight:bold;
color:#699;
text-decoration:none;
}

ul#navigation a:hover,ul#navigation a:active{
border-bottom:2px solid #900;
color:#900;
}

#submenu li{
float:left;
padding:8px 0px 5px 10px;
margin:1px 1px 1px 1px;
}

#menu ul{
padding:7px 5px 0px 5px;
}

#content{
float:right;
width:575px;
border:1px solid #ccc;
margin:65px 5px 0px 5px;
}

#content:after {
content:"";
display:block;
clear:both;
}

--------------------------------------------

[6] mixiユーザー 06月14日 10:25

すいません。相当長くなってしまいまして。

そして、このサンプルではXHTMLのナビゲーションの順序が
初めの順序と変わってしまいまして、申し訳ありません。

やはり、本文の「コンテンツ」がはみ出してしまいます。

ご意見ありがとう御座います。
やはり難しいですかね。
こういう使い方は間違っているのでしょうか？

XHTMLで作成したコードを元にすると、
順序を入れ替えないと、自由なデザインでかつテンプレート化ということは無理になるのでしょうかね・・・。

左右にはfloatプロパティがあるので、
左右順序は入れ替えられるのに、上下の順序は入れ替えられない、という事になるのでしょうか？
上下もfloatみたいなプロパティがあると良いなと思いますが。
これで無理なら、XHTMLを直すしか無いと思っております。

[8] mixiユーザー 06月14日 13:44

header,navigation,sub-menuの高さが固定ならこんなかんじとか。
FFで確認しました。IE用にすこし修正が必要です…。

[12] mixiユーザー 06月14日 17:52

http://www.yomotsu.net/_test/

やっぱりこれで…。IE6とFFで確認してみました。
先ほど書いたものは消させていただきましｔ

[13] mixiユーザー 06月14日 19:23

すごい・・・。完璧に出来てる！！

ありがとう御座います。じっくり検証させてもらいます！！
divの入れ子にもなっていないんですね。
もともと入れ子にしたくなかったので、かなり良さそうです！

また検証しましたらここに書き込みさせて頂きます！！

[15] mixiユーザー 06月15日 07:17

ありがとう御座います！！
徹夜で検証しましたが、完璧にできました！！
涙が出そうになりました。本当にうれしかった。。
尊敬します！そして、こんなにして頂いて心から感謝しております。

あと、これはdivを入れ子にしてしまうとこれは無理な話なんでしょうか？
重ねて質問して申し訳ないですが、もし教えて頂けるとうれしいです。
完璧にできたXHTMLのソースの、
コンテンツ、メインメニュー、サブメニュー、ナビゲーション、
をdivの入れ子でくくると、これは出来ないという事でしょうか？

お時間がありましたらで構いませんので、教えていただけると嬉しく思います。

[16] mixiユーザー 06月15日 13:25

http://www.yomotsu.net/_test/test2.html

positionのrelativeとabsoluteの違いと、left、topを指定したときにどこを基準にするのかを再確認してみるとよいかもしれません。

がんばってくださぃ。

[17] mixiユーザー 06月15日 14:01

12 のコンテンツ、メインメニュー、サブメニュー、ナビゲーションを id="document2" の div で囲んだ場合の CSS の改変例です。（Safari(Mac)のみで確認）

html,
body {
min-height: 100%;
margin: 0;
padding: 0;
text-align: center;
}

#document {
text-align: left;
width: 800px;
margin: 0 auto;
background: url(bg.gif)
}

#header {
height: 150px;
background: #ccc;
margin-bottom: 50px;
}

#document2 {
position: relative;
}

#contents {
float: right;
width: 600px;
background: #f00;
margin-top: 50px;
}

#main-menu {
width: 195px;
background: #66c;
}

#sub-menu {
position: absolute;
top: 0;
left: 200px;
width: 600px;
height: 50px;
background: #9f9;
}

#navigation {
position: absolute;
top: -50px;
left: 0;
width: 800px;
height: 50px;
background: #aaa;
}

#footer{
clear:both;
background:#6ff
}

[18] mixiユーザー 06月15日 16:07

今、拝見させて頂きましたが、お二人ともさすがです・・・。
私はまだまだ、positionのrelativeとabsoluteの違いと、left、topあたりが完全に理解できていないのだと思います。

でも頑張って把握して行きたいと思っております。
おかげさまで非常に安心致しました。

もしかしたら、XHTMLとCSSの完全分離が出来ないのでは？
と思ったりもしてしまいました。
出来ても制限があるのではないかと・・・。

しかし、完全な分離が出来る事が分かり、本当に嬉しく思っています。
しばらく勉強したかいがあったと思いました。

今回の実装ももう少し整理して考えて、
お二人のコードをしっかり理解出来るように
解析してみたいと思います。

本当にありがとう御座います！

[20] mixiユーザー 06月21日 10:40

あれから勉強して、お二人のコードもじっくり解析してみました！

理解できました！！
非常に嬉しいです！！
ありがとう御座います！本当に感謝しております！！
ここで助けていただけなければどうなっていた事か・・・。

最後に一つ聞いておきたい事があります。
今回のＸＨＴＭＬのコードはＤＩＶの入れ子にしてくくった場合と、
くくらなかった場合とありましたが、
正しいＸＨＴＭＬの記述をしようと思えば、
みなさんはどちらを選びますか？

構造的には大きく分けて、ヘッダー、中身、フッダー、
この中身の部分に、
本文（コンテンツ）、メインメニュー、サブメニュー、ナビゲーション
が入っていると考えたので、今回は中身の部分をＤＩＶでくくりましたが、
みなさんならくくらずに全て同階層としてＸＨＴＭＬを記述しましたか？

ログインすると、残り8件のコメントが見れるよ