CSSです。
検索エンジンへ読み込ませるソース部位の順番をコントロールしたいのですが、
左側にあるGlobalNavigationを右側にあるコンテンツよりも後に読み込ませる方法を模索しております。
本件もご多分にもれず、HeaderとFooterが上下にある構成です。
position: absoluteを使って、記述順番をコンテンツを先にして後にGlobalNaviとすれば、ここだけみればできるんですが、困るのがFooterでして、本件のようにHeader、Main(GlobalNaviとコンテンツ、さらに改行して横いっぱいに「TopOfThePages(ページの先頭へ戻る)」リンクボタンエリア)、Footerとある場合ですから、真ん中のMainを絶対配置にしてまうと、その次にくるTopOfThePages、Footerも絶対配置にしないと出来ないだろうと思うので困っております。
これらを絶対配置したくとも、Main部分の縦サイズは各コンテンツの内容ごとに違ってくるわけで、だからして絶対配置ができないからです。
コンテンツを絶対配置で記述、その後にGlobalNavigationを絶対配置で記述、その後のTopOfThePages、Footerも問題なく配置させる方法はどうすればいいでしょうか?
No.2ベストアンサー
- 回答日時:
解釈が間違っていたらすみません。
もし自分が思っている解釈であっているなら下の通りで実現可能です。
■XHTML
<div id="Header">
</div>
<div id="container">
<div id="Main">
</div>
<div id="GlobalNavi">
</div>
</div>
<div id="TopOfThePages">
</div>
<div id="Footer">
</div>
■CSS
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を使って自動的に高さをあわせてしまえば問題は解決すると思われます。
この回答への補足
お礼の書き込み済んだあとに、div#Header等の記述についてわかりました。
お蔭様で前進できます。
どうもありがとうございました。
せっかくよいアドバイスと思われることを書いて頂いていたのに
遅くなって申し訳ありません。どうもありがとうございました<(_ _)>
さて、業務で忙殺されていてやっとアドバイス頂いたことを実験できました。
結果、確かにこのソースでやるとできますね!!
ただし、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」の方が何をしているものなのかわからずにおります。
宜しくお願い致します。
No.1
- 回答日時:
●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>
------------------------------------------------------------
と記述しております。
無理ってことでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(IT・Webサービス) 301リダイレクトの使い方について 7 2022/04/05 17:50
- 団地・UR賃貸 賃貸でどこにテレビを配置するか 2 2023/01/23 23:12
- 軍事学 95式小銃は、どうして最初からセレクターをこの改良型みたいにグリップの上にしなかったんですか?改良前 1 2023/02/23 15:35
- Windows 10 ネットからファイルをデスクトップにダウンロードする際、既存のファイルの並びが崩れてしまう 4 2022/04/19 08:20
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- テレビ 車用TVアンテナの配置について 1 2022/11/10 19:42
- 地図・道路 一方通行道路における路上駐車場の設置について 2 2022/07/13 16:47
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
css固定したフッターが本文と重...
-
Ctrl+F(検索)の窓を出したいの...
-
画像の特定の座標にカーソルが...
-
【CSSハック】アンカーポイント...
-
大分類・中分類・小分類
-
textareaで入力した文字を改行...
-
CSS <div>の入れ子が反映さ...
-
Flickity で画像にリンクを貼る...
-
ロールオーバーで画像拡大、z-i...
-
プログラミングでのビンゴマシ...
-
リンクで違うページの指定箇所...
-
TABLEの高さを固定したいのですが…
-
文字を固定したいのですが…
-
フッター上部に謎の隙間
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
Slick.jsのオプションrtlについて
-
VBScript+IEのチェックボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSSでdivのheightを動的に
-
★★★フッター最下部固定/スクロ...
-
離れた場所にマウスオーバーで...
-
htmlのstyleのposition:relativ...
おすすめ情報