スタイルシートレイアウトで

質問

スタイルシートで、レイアウトしてホームページをつくりました。
しかし、スタイルシートで位置を移動させて作ったせいか、下のほうにぽっこり空白ができてしまいました。

これをなくす方法というものは存在するのでしょうか？

回答No.4

neworderk · ベストアンサー

おお！かなりスッキリしましたね！
ちょっと時間がないのでぱーっと見ましたがMacのSafari、Firefox、
Operaでは全く問題ないようでしたよ。

MacIEでは相変わらずmain部分の高さ分だけside部分が下がっていますが、ブラウザ自体がCSS適用に少々難がある＋今後新たなバージョンの発表がないブラウザ、なので、特にマックユーザーを意識しないのであれば目をつぶっても良い所かもしれません。正直まかーの人はスタイルシートレイアウトでズレているというのは数年前から慣れっこなんで(^_^;)内容が読めないわけではないですしね。

とりあえずとってもスッキリしていますし、表示もIE以外は問題ありません。この状態だったら、必要なものを付け加えたり外したり、細かいカスタマイズするのも簡単ですね！

もしMacIEでの表示にこだわるということであれば、その旨書いて下さればちょっと考えてみます。

回答No.3

neworderk

どうやらcss,html共に手直しをされたんですかね？リンク先のcssと、実際適用されているindex.cssが違っているようですので実際のcssを基準にしますね。

リンク先のものは、よく見ると実際のCSSにある、mainやframeといったclassがないので実は原因が違ってるのかもしれませんが、これも手直しされた後に加えられたもののような感じですので、先ほどの回答は私が見た時点でのリンク先のCSSとHTMLのみを見て回答しました...。どれをどう直されたかまで把握してませんので一応リセットした感じで現状でお話しますね。

当方MacSafariで見ていますが、問題になっている下の空白は、先ほど指摘の指定などを外して消えてますよ～。しかしちょっと崩れがありますねえ。MacIEだと結構崩れてますねえ(汗)

>と移動させているから、元の４５があった部分に空白ができてしまった、ということですね。

とりあえずこれだけで言えば、position:relativeでbottom:830pxということは、何も指定がない場合又はpositionがstaticの場合の、要素自身の通常位置から830pxだけ要素が上に寄った形になる(=top:-830px)、という指定だと思いますので、示して下さったように何かがあった部分に空白ができたということではない、と言えますかねえ。

すごく簡単に言えば、この指定がない場合の本来の要素の位置が空のまま残ってしまってるような感じといえばいいんでしょうか。
position:relativeでbottom指定は解りづらいですね、基本的に物は重力でぶら下がる、と言えばいいんでしょうか、top指定にしていれば解り易かったかもしれませんね。もう取ってしまったみたいですし忘れましょう(^_^;)

IEとFireFoxと言ってまさかMacの、ということはないのが世の常ですので(笑)Winの、となると当方すぐに検証はできません、まかーですいません。ちなみにMacでは現状でSafariがmain部分に重なり有り、IEにfloat異常でside部分がmainの高さ分だけ下に下がっていて、Firefoxはほぼ正常ですが、my hobby isの部分があふれてます。

HTML、CSS共に少々整理されたほうがいいかと思います。margin用のボックスとか必要性がないような気がしますし、main内の各class1とかはボックスにしなくてもpaddingなどでコンテンツ部分と空きの部分を調整してやるとかできます。するともっとすっきりして各要素の関係がもっと解り易くなるので問題を発見しやすいですし、メンテナンスも楽ですよ... が、また別の意図があったらごめんなさいm(_ _)m

パッと見ですが現状では、ずれたとかおかしいとかいう原因を掴みづらい状態になってると思います。せっかくCSSにしたのに、一昔前の、テーブルにテーブルを入れまくる、というのと同じような感じなのはもったいないなと思ったり。

左右の高さがズレるということですが、すべて検証してみない事にはちょっとわかりません。ただ、FirefoxとIEだったら、FirefoxのほうがCSSの適用が定義に忠実な感じがします、IEはミスしてても通っちゃうパターンとか多いです。ので、一回なるべく忠実に書いてからIEでどうしてもうまくいかない所をやや不正な感じで書いてしまうとかがいいのでは(^_^:)

あと、各要素の高さや幅がpx指定な上に、overflow:hidden;ですと、ブラウザによってはあふれた部分が全く読めない状態になりますので、避けたほうがいいですね。高さや幅のpx指定は重なりまくる原因にもなりますので、%指定とかem指定にしてみたらどうですかね。#frameのwidth指定がpxにしてあるので、ある程度は意図した形で表現できるとして、sideとmainのwidthを70%30%にしてみるとか。そういう感じにするとブラウザによる違いを吸収しやすいですよ。

...でもこれやってると、ちょっと大掛かりな作業になるかもですよね...winで現状うまく見えているなら、次にやる気が出るまでそっとしておくというのも一つの手では(^_^:)

お礼

昨晩、手直しした後、CSSを更新するのを忘れていました。

また、この回答を読んだあとにもう一度自分なりに更新しましたので、確認お願いします。

回答No.2

neworderk

ぱーっと見た感じですので間違ってるかもしれませんが、
div.class1,4,5のposition:relative;以下の
「bottom:830px;」
がアヤシいとしか...。
marginやpaddingの値がやたら大きいという事もないみたいですし...。

CSSがやや複雑な感じですね、各要素をfloatさせてmarginなどでうまく取ればもうちょっと簡単なCSSにできると思いますが、何か別の意図があるなら余計でしたm(_ _)m

参考URL：

http://www.fromdfj.net/html/column.html

お礼

ふむ、少し考えてみました。
つまり今は
１　　１　３
２
３→　２　４
４
５　　　　５

と移動させているから、元の４５があった部分に空白ができてしまった、ということですね。

floatを用いて、

１　４
２　５
　　６

と設定してみれば大丈夫そうですね。

ただ、少し引っかかっているのは左右の高さがブラウザによってズレてしまうということです。現在はやみくもに合わせたところなんとかなりましたが、floatで一旦バラバラにするとIEとFirefoxでズレが生じそうです。
これを避ける方法がありましたら、よろしくお願いします。

回答No.1

hisajiro

ソースを見ないとなんとも言えないです。＞＜

お礼

すみません。