CSSで、左側にあるGlobalNavigationを右側にあるコンテンツよりも後に読み込ませるには？

質問

CSSです。
検索エンジンへ読み込ませるソース部位の順番をコントロールしたいのですが、
左側にあるGlobalNavigationを右側にあるコンテンツよりも後に読み込ませる方法を模索しております。
本件もご多分にもれず、HeaderとFooterが上下にある構成です。

position: absoluteを使って、記述順番をコンテンツを先にして後にGlobalNaviとすれば、ここだけみればできるんですが、困るのがFooterでして、本件のようにHeader、Main(GlobalNaviとコンテンツ、さらに改行して横いっぱいに「TopOfThePages(ページの先頭へ戻る)」リンクボタンエリア)、Footerとある場合ですから、真ん中のMainを絶対配置にしてまうと、その次にくるTopOfThePages、Footerも絶対配置にしないと出来ないだろうと思うので困っております。
これらを絶対配置したくとも、Main部分の縦サイズは各コンテンツの内容ごとに違ってくるわけで、だからして絶対配置ができないからです。

コンテンツを絶対配置で記述、その後にGlobalNavigationを絶対配置で記述、その後のTopOfThePages、Footerも問題なく配置させる方法はどうすればいいでしょうか？

回答No.2

miya_00 · ベストアンサー

解釈が間違っていたらすみません。

もし自分が思っている解釈であっているなら下の通りで実現可能です。

■ＸＨＴＭＬ
<div id="Header">
</div>

<div id="container">
　<div id="Main">
　</div>

　<div id="GlobalNavi">
　</div>
</div>

<div id="TopOfThePages">
</div>

<div id="Footer">
</div>

■ＣＳＳ
div#Header {
width: 800px;
}

div#container {
width: 800px;
}
div#container:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

div#Main {
width: 580px;
float: right;
}

div#GlobalNavi {
width: 200px;
float: left;
}

div#TopOfThePages {
width: 800px;
}
div#Footer {
width: 800px;
}

positionを使わずに組めるはずです。
もしMainとGlobalNaviの高さを揃えたいのであれば、
heightLine.jsと言うjavascriptを使って自動的に高さをあわせてしまえば問題は解決すると思われます。

お礼

せっかくよいアドバイスと思われることを書いて頂いていたのに
遅くなって申し訳ありません。どうもありがとうございました<(_ _)>

さて、業務で忙殺されていてやっとアドバイス頂いたことを実験できました。
結果、確かにこのソースでやるとできますね！！
ただし、MainとGlobalNaviの行揃えができないんですか・・・・
厳しいですね・・・・こんなことができないなんてCSSの規格が問題ですね。
JavaScriptファイルも最悪導入しないといけません。しかし、JavaScriptですから可能な限りやりたくないですが・・・・
CSSハックに回避方法でもないものかなぁ・・・・・

さて、ご案内で自分が気づいたのは二点です。

[1] 「Main」が右に位置はするが、HTMLでの記述は先に書いた。
　　ただしそのままだと左に位置してしまうので、float:rightと記述。
　　逆に、「GlobalNavi」の方はHTMLでは後に記述し、float:leftで表示は
　　先に、つまり左に位置させた。

[2] CSSファイル記述で、全てのidタグの記述を通常の「#hogehoge」とせずに
　　「div#hogehoge」と記述した。

この二点によって可能となったと理解していますが、float:right、leftだけでなく、
なぜこの「div#hogehoge」という書き方が必要なんでしょうか。
floatについては「おお！そういえばそうだな！」と思えるんですが、「div#hogehoge」の方が何をしているものなのかわからずにおります。

宜しくお願い致します。

補足

お礼の書き込み済んだあとに、div#Header等の記述についてわかりました。
お蔭様で前進できます。
どうもありがとうございました。

回答No.1

suzuko

●CSS

#header {
width: 100%;
}
#Main {
width: 100%;
}
#コンテンツ {
float: right;
width: 75%;
}
#GlobalNavi {
float: left;
width: 20%;
position: absolute;
}
#TopOfThePages {
clear: both;
width: 100%;
}
#Footer {
width: 100%;
}

●html

<div id="header">

</div>
<div id="Main">
<div id="コンテンツ">

</div>
<div id="GlobalNavi">

</div>
<div id="TopOfThePages">

</div>
</div>
<div id="Footer">

</div>

ならば、検索エンジンにはコンテンツの中身を先読みさせれますが。

もし、headerの高さも決まっているのならば、さらにMainの位置を絶対配置で指定して、htmlではheaderを後ろに回す方法もあります。

※上の場合、必ずコンテンツとGlobalNaviの幅は100%になら内容にしてください。

お礼

早々にありがとうございます。

> ならば、検索エンジンにはコンテンツの中身を先読みさせれますが。

このソースでは質問に書いたように、FooterがMainの下にひっついてくれないのではないでしょうか？
Footerの上の行に位置するMainたちが絶対配置だから、FooterはHeaderの下にいきなり位置し、Mainはその上に乗っかるように重なってしまうのではないでしょうか？
この書き方は過去にミスして経験しているのですが、どこか気づいていない違いがあるのかな・・・

> もし、headerの高さも決まっているのならば、さらにMainの位置を
> 絶対配置で指定して、htmlではheaderを後ろに回す方法もあります。

はい、Headerの高さ、決まっています！
これですね！　どうせコンテンツを先読みさせるならばここまでしないといけませんね！　ありがとうございます。

> ※上の場合、必ずコンテンツとGlobalNaviの幅は100%になら内容にしてください。

残念、100％になっています・・・
厳密に言うと、

------------------------------------------------------------
【CSS】

#main-all {
margin: 0px;
width: 100%;
background: #5ca786;
}

#main-area {
margin: 0px;
padding-left:5px;
width: 749px;
background: #266e4e;
float: left;
overflow: auto;
}

#main-line {
margin: 0px;
width: 1px;
background: url(../img/share/line_rht.gif) repeat-y;
float: left;
}

#nv-global {
margin: 5px 0px 0px 0px;
width: 177px;
padding-bottom: 100px;
background: #7bb395;
float: left;
}

#nv-global ul {
margin: 0px;
padding: 0px;
}

#nv-global li {
}

#main-area-cts {
margin: 5px 0px 0px 0px;
padding-left: 5px;
width: 557px;
padding-bottom: 30px;
background: #266e4e;
float: left;
}

#main-area-btm {
width: 749px;
height: 70px;
background: #266e4e;
}

【XTHML】
<div id="main-all">
<div id="main-area">
<div id="globalnav"></div>
<div id="main-area-cts"></div>
</div>
</div>
<div id="nv-global"></div>
------------------------------------------------------------

と記述しております。
無理ってことでしょうか。