というわけで、レイアウト変更してしまいました。(改)
えー、先のエントリーにあるように、レイアウト改修を行い、ポジションタグで絶対配置をしてたのですが、それでもやはりサファリな方には崩れて見えてしまってますた。
コメントで Naga BLOG の naganaga 様からご指摘とアドバイスを受け、float配置にて修正をかけてみました。
左サイドから順番に float:left 設定をかけ、エントリー部分はポジション設定無しという構成です。(追記:レイアウト崩れが発生していたので、エントリー部分もdivでbox指定してfloat:left設定しました。)
float を使用する場合、カラム固定にしなければならないんかなーと勝手に勘違いしてたので使用してなかったんですよねー。
今のところうまいこと動いているので、これでまた様子見とします。
ただ、float設定の場合、htmlに書いてある順番に読み込むので、このようなレイアウトの場合、エントリー部分が最後に読み込まれるのはいまいちかなー。
Naga BLOG の naganaga さん
cider の palmyeti さん
体験手記レポート部 の towoko さん
コメントありがとうございました。できたらチェックもお願いしたいなーなんて独り言を言ってみたりしして。(笑)
TrackBack URL for this entry:
Listed below are links to blogs that reference this entry:
Comments
safari & camino(Mozilla系ブラウザ)で見させていただきました(^^)
きっとMozilla上の表示の方が、Border.さまの意図に近いのではないかな~と思います(^^;
safariですと、縦長カレンダーの位置がサイドバー(と言っていいのでしょうか)とエントリー部の間に来てしまっていたり、エントリーもサイドバー部と同じ横幅になってしまっていて、とっても縦に長くなってしまっています(>_<)
caminoからですと、エントリー部はしっかりブラウザの横幅分広がってくれているのですが。
知識がないのでご報告しか出来ませんで…すみません(T_T)
見事に悪化してますよ。(;^_^A
floatを使えば、エントリーを一番最初に持ってくることは可能です。
NagaBLOGの構造を解説しますと、全体のbaseになるBOXがあります。これで強制的に原点を決めています。その中にmainというbaseと同じ大きさのBOXが入っています。この2つはfloatは設定していません。
次にwapperと、sidebarというBOXが入っています。float設定していまして、wapperは右、sidebarは左です。mainのBOXの閉じタグの前には<div style="clear: both;"></div>という一文を入れて回り込みを解除しています。
wapperの中にはblogと、extraというBOXが入っています。同様にfloat設定していまして、wapperは右、sidebarは左です。wapperのBOXの閉じタグの前には<div style="clear: both;"></div>という一文を入れて回り込みを解除しています。
表示はこれで、blog、extra、sidebarの順番に表示するようにしています。BOXだけの構造だと下記のようになっています。
<div id="base">
<div id="main">
<div id="wapper">
<div id="blog">
</div>
<div class="extra">
</div>
<div style="clear: both;"></div>
</div>
<div class="sidebar">
</div>
<div style="clear: both;"></div>
</div>
</div>
我楽さんだと、sidebarの部分をwapperのように設定すればエントリーより後に持ってくることができるでしょう。
後、idとclassの使い方が怪しいですが、大目に見て下さい。
ちなみに<br clear="all">は無視するブラウザーがあるので使えないです。
> naganagaさん
毎度どうもです。^^
悪化してましたかー。(苦笑)
いやーわかってるんですがねー。実はワイド可変をいじりたくないんですよー。(苦笑)
エントリー部分はブラウザのサイズ変更に伴い延び縮みするという。
原因は何となくわかってます。^^
全体をBOXで固定しエントリー部分を真中に持ってきてあげれば、レイアウトくずれはおきないんですけどねー。
どうも、普通にレイアウトしたくないというひねくれた私の精神がこうさせてしまうのです。(笑)
この休みでもうちょい打開策を練ろうとおもつてますわ。^^
> PENさん
こんちわー。^^
やはりsafariは厳しいっすくわー。
そいつの原因は、たぶんエントリー部分をBOXで固定し、ワイド設定してあげれば解消されるんですけどねー、たぶん。
ちょいとこのレイアウトにこだわりたいもんで、打開策を練りますわー。
ご報告ありがとうございますね。^^
Safariでのスクリーンショット
http://homepage2.nifty.com/HDK/grk/safari/
FireFoxでのスクリーンショット
http://homepage2.nifty.com/HDK/grk/fire/
naganagaさんさんがCSSについては、いろいろおっしゃってくれてるようなので、私は、スクリーンショットをUpしておきます。
ご参考になれば幸いです。
あれ、元に戻ってる!?(笑)
> palmyeti さん
ひゃーって感じだったので、再度組みなおしてみました。^^
これで駄目ならもうお手上げですわー。(汗)
> yujiro さん
駄目駄目だったんでいったん戻したんすけど、見つかってしまいましたねー。(苦笑)