CSSで上下の配置を逆転させるには？

解決済

質問者：moonpalace
質問日時：2011/06/15 20:23
回答数：3件

HTMLは変更せず、CSSの修正だけでスマートフォンに
対応することになりました。
HTMLの一番上に書いたメニューを、その下に書かれた
メインコンテンツ（高さは決まっていない）の下に配置させたいのですが、
よい方法がみつからずに困っております。

<div id="header">
メニュー
</div>
<div id="main">
メインコンテンツ
</div>

何かよい方法はありませんでしょうか。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2011/06/17 09:21

私の知る限りですが、良い方法はないでしょう。

せいぜい、小さくしてfixで脇にどけておいて、mainはその分marginをとる。
もしくは、header自体をdisplay:noneとする。

　ちなみに、私は最初から携帯電話やPDAも考慮してheaderにはナビゲーションは置いてないのです。header部分は画像のない「見出し要素」と「簡潔な要約div」のみでロゴなどは見出しの背景としてscreen用のスタイルシートで設定している。パンくずリストはともかく、ナビゲーションは末尾においています。
<div class="header">
</div>
<div class="section">
　<div class="nav"></div>
　<div class="article"></div>
　<div class="aside"></div>
</div>
<div class="footer">
</div>
<div class="nav">
</div>
とか・・

解決策はなくはないです。古いコンテンツでナビゲーションが最初のほうにある場合
.htaccessで
<FilesMatch "^old$">
SetHandler cgi-script
</FilesMatch>
と書いて、oldというファイルをCGIとして動作させて、
/old/example/abc.html
が要求されたとき、/example/というPATH_INFOから、OLD_HTML内の/example/abc.htmlを取り出してきて、動的に内容を書き換えて出力させています。
・・・HTMLとはいえ、XML的にきちんと整形していますから可能な方法ではありますが・・

- 0
- 件

通報する

この回答へのお礼

お礼が遅くなり申し訳ございません。
新規に作成する場合はナビゲーションを末尾にする方法、ぜひ取り入れたいと思います！
CGIを使用するという方法、新鮮でした。
試してみたいと思います。
ありがとうございました。

通報する

お礼日時：2011/06/30 10:33

No.2

回答者： ORUKA1951
回答日時：2011/06/15 23:06

すみません。

iPhoneでしたね。携帯電話でなく・・
なら、
<link media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet">
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet">

ですね。

　HTMLがちゃんとできていたら、位置を変えるのは簡単なので省略しますが、CSS3の機能で、スタイルシートを切り替えます。

この回答への補足

ご回答ありがとうございました。
ご指導いただいたことと同様の方法で、CSSの切り替えは既にできております。
（私の質問の最初の一行、余計でした・・・申し訳ございません）
上下を入れ替える方法がどうしても思いつかなく
メインコンテンツの情報量が変動するため、position:absoluteは使えないしなぁ、と。
よい方法があればご教授お願いいたします。

補足日時：2011/06/16 15:02

通報する