段組の固定 

[新着] Webテンプレートを仮オープンしました



0   名前: キタ : 2006/11/08(水) 20:25  ID:Ukpk0NQp
はじめして
おしえてください。
ホームページを作っています。
外部CSSに挑戦しています。
ご質問ですが、3段コラム型で挑んでいます。
二段は同じdivの固まりに入れ込みました(仮にAとします)。
三段目を5px分離して表示させようと思っています(仮にBとします)。
作成中の画面ではいい感じなんですが、
Explorerで確認するとAとBの間のスペースが
Explorerの履歴・お気に入り・メディアを
確認の意味で準じ開くとその都度、スペースの幅が崩れてしまいます。
開きすぎたり、ちじむ現象が起きます。
wrapの中に入れ、floaプロパティーなどを使い気をつけてはいるのですが、
不備があるようです。
固定するためのタグ教えてください。
ちなみに
右側のCSSです。
#right{
float:right;
width:170px;
height:1100px;
margin-top: 10px;
text-align:center;
margin-right: 45px;
left: 640px;

}
お願いします。
(説明不足 お許しください)

1   名前: カヅサツ ◆ThCi95HEzw : 2006/11/08(水) 20:25  [URL]  ID:O5hEMlpW
とりあえず CSS の段組は
http://www.geocities.jp/multi_column/
がとても参考になります。

2   名前: チャンタ : 2006/11/08(水) 20:25  ID:8oN08mHd
キタさま

あまりレスがつかないようですが、やはり情報が不足です。。。

おっしゃっていることは、まず左右2分割して、さらに左を縦2分割、見た目には縦3分割にしているサイトを作る、と言うことでよろしいですか?
そうだと言う前提で以降書いてまいりますが・・・。違ってたらごめんなさい。

CSS、floatを使う場合、さらにテーブルタグではなく[div]タグの場合、横幅の計算を間違うと、スペースの広さが開いたり縮んだりと動いて見えるようになります。
本当ならば、全体と分割したブロックごとの横幅やpadding、margin、枠線の設定が分かるようにCSSを掲載してくれればいいかな、と思いますが。

例えば今記載されている右側のCSSから、原因と思われる事象を考えるなら、
width:170px;
margin-top: 10px;
margin-right: 45px;
left: 640px;

この箇所から推測するしかありません。(あくまで推測の域は出ません。)

このCSSなら、右側のカラムの横幅は最低でも170+45=215pxなければなりません。
テーブルタグなら[width]で設定した数値分のスペースを確保するだけで十分だったと記憶してますが、[div]では[width]で設定した幅に加えて、内側余白[padding]、外側余白[margin]、さらに枠線の太さを合計したスペースを確保する必要があるからです。

もしこれを間違えていたら、[width]の170pxで表示されたり、本来必要なスペースである215pxで表示されたりと、動いて見えるかもしれません。

右カラムだけでなく、もう一度全体を横幅を見直されてみてはいかがでしょうか?

あと、分からないのは、[left: 640px]と言うところです。
これは[margin-left: 640px]と書こうとしたのか、positionプロパティのときに使う[left]を使ってしまっているのか。
左のブロックとの間隔が問題とのことで、この部分ももう一度見直しされてはどうでしょう。


最後に、DOCTYPEの宣言文をどのように記載されいるか分かりませんが、ここでは宣言文をURLまで省略せずに記載していることを前提にしました。特にIEではこの宣言文の書き方で見え方が変わってしまうので。
もし宣言文を簡略化している、または記載していないならば、ぜひしっかり書いたほうがいいです。

現状ではこの程度しか言えませんが、お役に立てば幸いです。では。

3   名前: 匿名 : 2006/11/08(水) 20:25  ID:.7lr2FmO
情報不足でカンでしかいえませんが、2段目とか右側とかAとかBとかがいまいちよく分からないんで。
5pxはなしたいで
float:right;
ほかのボックスもrightですか?leftでしてませんか?
右だからrightとは限りませんよ!!!

一覧へ戻る