CSSテクニックコミュのsub-navをfooter（下辺）へ

こんにちは。また煮詰まりました

#local-navを下の#footerの上に合わせたいのですが、うまくいきません。
#mainの量が増えても常に#local-navが#footer（下辺）の真上に来るようにするにはどうしたらいいでしょうか。

ちなみに#local-navのcssにmargin-bottom:0px;なんて入れてみたんですが、やっぱりなんの反応もなかったです↓

すみません、助言をお願いします。

<HTML>
<div id="header"></div>

<div id="sub">
<div id="sub-nav">
・・・省略・・・
</div>
<div id="local-nav">
・・・省略・・・
</div>
</div>

<div id="main">
・・・省略・・・
</div>

<div id="footer"></div>
</HTML>

------------------------------
#header{
width:780px;
height:25px;
background:url(images/header.gif) no-repeat;
background-position:top;
}
#footer{
width:780px;
height:25px;
background: url(images/footer.gif) no-repeat;
background-position:bottom;
clear:both;
}
#sub{
float:left;
width:225px;
padding:0 0 0 16px;
background-position: right;
}
#local-nav{
width:200px;
height:40px;
margin-bottom:0px;
margin-left:13px;
background:url(images/01information.gif);
background-repeat : no-repeat ;
text-indent:-9999px;
}
#main{
float:right;
width:496px;
padding:0;
margin-right:26px;
}

コメント(15)

最初
全て
最新の40件

[2] mixiユーザー 08月30日 19:31

図だけ見ての意見ですが、#subと#mainを囲っているdivに position: relative; を付けて、#local-navに position: absolute; bottom: 0; をつければその様になるかも？です。
mainにfloatプロパティがあるのでその辺、ちょっと考えないといけないかもしれません。

当て感ですが、
#main{ padding-bottom: 1px; }　←多分 IE 用。
で、#subと#mainを囲っているdivにクリアフィックスを当てれば行ける？かもしれません。
雑ですが参考になれば

[3] mixiユーザー 08月30日 19:34

>DesignsNest（Numb) さん

ぁりがとぅござぃます

やってみたんですけど、
レイアウトの変化はありません。
#sub で１グループしてるせいもあるのかな・・・
か、また余計なのが入ってるか・・・
もぅ一度見直してみます。

[4] mixiユーザー 08月30日 19:57

＊訂正
#main ではなく、『#subと#mainを囲っているdiv』に
{ padding-bottom: 1px; } でした。
IEだとフロートボックスの下に1emぐらいマージンが勝手にできると思うのでそれを消すために追加してますが不要っぽかったら付けなくて良いと思います。自己流なので参考にはならないかもしれません

あと、divがないようなので div#contents？などで#subと#mainを括って position: relative;をあてると良いと思います。

[6] mixiユーザー 08月31日 11:32

KABA さん、こんにちは

ぃっもすみません

positionプロパティを使いこなせてないのかな

色々試してこんな画像になってしまいました・・・

#local-navを#subからはずしてボックスを?つに分けました。
追加で背景画像を設定するのに、#sub、#main、#local-navを#conterで囲んでいます。
#subは左に回りこみ、#mainは右へ、#local-navは#subの下辺（#footer上辺へ）
position:absolute; 絶対配置で、bottom:下辺からどれぐらい上へずらすか設定。
でも、これにmarginやpadding、floatなどのプロパティが加わるとバグが作用しちゃうんですよね。
なんか無茶な使い方をしているんでしょうか

難しすぎて頭がパリラリしてきました

<HTML>
<div id="conter" class="clearfix">

<div id="header"></div>

<div id="sub">
<div id="sub-nav">
・・・省略・・・
</div>
</div>

<div id="local-nav">
・・・省略・・・
</div>

<div id="main">
・・・省略・・・
</div>

</div>
<div id="footer"></div>
</HTML>

------------------------------
#header{
width:780px;
height:25px;
background:url(images/header.gif) no-repeat;
background-position:top;
}
#conter{
display:block;
width:780px;
background:url(images/conter.gif) repeat-y;
margin:0 10px;
}
#footer{
width:780px;
height:25px;
background: url(images/footer.gif) no-repeat;
background-position:bottom;
clear:both;
}
#sub{
float:left;
width:225px;
padding:0 0 0 16px;
background-position: right;
}
#local-nav{
width:200px;
margin-left:13px;
position:absolute;
bottom: 1px;
}
}
#main{
float:right;
width:496px;
padding:0;
margin-right:26px;
}

[7] mixiユーザー 08月31日 12:28

一番スッキリして応用が利く形だと…

<div id="container"> 

<div id="sub">
<div id="sub-nav">
・・・省略・・・
</div>
<div id="local-nav">
・・・省略・・・
</div>
</div>

<div id="main">
・・・省略・・・
</div>

</div>

に対して、

#sub・#mainはそのままで、

div#container:after {/* モダンブラウザ用 */
display: block;
height; 0;
overflow: hidden;
visibility: hidden;
content: "."
}
div#container {
position: relative;
zoom: 1;/* IE用 */
}
div#local-nav {
position: absolute;
bottom: 0;
left: 16px;
}

でOKだと思いますよ～。
（スペルミスとかあったらスミマセヌ）

[8] mixiユーザー 08月31日 15:52

<HTML>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="sub">
　<div id="sub-nav">
　　・・・省略・・・
　</div>
</div>
<div id="local-nav">
　・・・省略・・・
</div>
<div id="main">
　・・・省略・・・
</div>
</div>
<div id="footer"></div>
</div>
</HTML>

#wrapper{ width: 780px }
#header{
　height: 25px;
　background: url(images/header.gif) no-repeat top; }
#container{ /* ■conterという単語は見たことがないので container に */
/*　display: block; */
　position: relative;
　margin : 0 10px;
　padding-left : 13px;
　padding-right: 26px;
　background: url(images/conter.gif) repeat-y; }

　#sub{
　　float: left;
　　padding-left: 3px;
　　width: 225px;
/*　background-position: right; */
　}
　#local-nav{
　　position: absolute;
　　left : 0;
　　bottom: 0;
　　width: 200px; } /* ■}}が二重 */
　#main{
　　float: right;
/*　margin-right: 26px; */
　　width: 496px; }
#footer{
/*　clear: both; */
　height: 25px;
　background: url(images/footer.gif) no-repeat bottom; }

/* ==================== clearfix */
#container{ zoom: 1 } /*IE*/
#container:after{
　height: 0;
　visibility: hidden;
　content: ".";
　display: block;
　clear: both; }

ざっと読んでみたところ position: relative; が conter に設定されていないのが原因だと思います。
奇麗なコーディングをされてる人のコードを読んだりするのが上達の近道だと思うので、時間があればコーディングコンテストの受賞ページ？などのコードを見るといいと思います

コードを読むのに便利なものとして、
Firefox とアドオンの Firebug, Web Developer
https://addons.mozilla.org/ja/firefox/recommended

英語なので使い方わかりづらいですが分ると凄く便利です。
Web Developerは日本語版もあるようです。

[9] mixiユーザー 08月31日 18:27

コバさん、KABA さん

有難うございました

<div id="container">を新たに追加して、組み直してみたら怪しいものの、なんとか出来ました。

でも、content: "."; とか{ zoom: 1 } /*IE*/とか全く知らないのがあって、まだまだ勉強不足です

>コバさん
本当にぁりがとぅございました

簡単で凄く解りやすかったです

>KABA さん
すみません

}}は、ここに記述する時にやってしまったみたいです・・・
wrapperも端折ってました・・・
conterも参考書のそのまま記述してまして・・・
本当使えません、私

気おつけます

コーディングコンテストの受賞ページ？探してみます

[10] mixiユーザー 09月04日 20:13

こんにちは。すみません

どなたかアドバイスいただけませんでしょうか

解決したと思っていた下辺の設置なんですが・・・
Mozilla Firefoxで確認したところ、containerの上に配置されていました

何故？？？

IEでは、しっかりと下に配置されているんですが、
原因がよくわかりません。

設定はコバさんのCSSで設定しました。

[11] mixiユーザー 09月04日 21:08

おそらく、、、

div#container:after {/* モダンブラウザ用 */
display: block;
height; 0;
overflow: hidden;
visibility: hidden;
content: "."
}

ここの記述に問題があると思います。

#sub・#mainの両方にfloatが指定されています。
div#containerは、#sub・#mainの高さを計算して自動で高さを持つのですが、「親要素が自分の高さを算出する際に、floatが指定されている子要素の高さを無視する」というCSSの仕様があります。

Firefoxはしっかりとこれをサポートしています。
が、、、それだとデザインを行う上で困ることが多いので、「親要素に、floatが指定されている子要素の高さまで含めて!!」というのが、「div#container:after～」にあるCSSの記述です。

ちなみにIEに関しては、「親要素が自分の高さを算出する際に、floatが指定されている子要素の高さを無視しない」というつくりになっていますので、今回は問題無いということになっていると思います。

記述していて気づきましたが、
「height; 0;」
の部分。
コロンがセミコロンになっておりました。スミマセヌ＜（＿＿）＞
ここを、
「height: 0;」
にすれば行けると思います。

[12] mixiユーザー 09月05日 19:03

コバさん、毎回すいません

「height: 0;」は実は途中で気付いて直してたんですけど・・・駄目でした。

別の場所でposition: absolute;を使ってたので、ダブってると駄目なのかなぁ。
IEが正常だったので、floatがあっても大丈夫のはずだし・・・

すみません、ありがとうございました。
もう少し苦しんでみます

[13] mixiユーザー 09月05日 20:21

コード？が無いとアドバイスしにくいと思うので、可能であれば作成中のサイトのアドレス（画像、テキストは飛ばしててＯＫかと）を貼ってあげた方がアドバイスもすぐにできると思います。

[14] mixiユーザー 09月06日 00:22

#main の中身が 20 行の場合
http://www.tima-formosa.net/labo/

#main の中身が 30 行の場合
http://www.tima-formosa.net/labo/index30.html

とりあえず、こんな感じにしたいってことですか？

であれば……。
上の URL から適当にソースを持ってっていいです。
構成ファイルは以下。
index.html
index30.html
default.css
base.css
commonconfiguration.css

面倒なので、css/ なんてディレクトリは作っていないので、上記 lobo ディレクトリ直下にすべて置いてあります。

全体を #container で囲み、こいつに position:relative; を設定しています。

ツキさんは旧ソースで #sub と #main を float していましたが、面倒なので、#header と #footer の間の実効的なボックスは #main だけにしました。
#sub は無くし、#sub-nav と #local-nav は、表示位置が固定っぽかったので、 position:absolute; で位置を指定しました。

#main で _height を使用しているのは愛嬌だと思って目を瞑ってください。
#main では、左側に、#sub-nav と #local-nav を置くための余白を作るために、margin-left を指定しています。

一応これなら、#main の楯幅がどんだけ大きくなっても、#local-nav は #footer のすぐ上に常にあると思うんですが、これじゃダメ？

[15] mixiユーザー 09月07日 18:18

KABAさん、拳骨斎さん

ぁりがとぅございました。

原因は、
上のソースに記述し忘れてたんですが、
<div id="container">
の前に（背景の設定するのに記述してたんですが）
<div id="faux" class="clearfix">
で囲っていたので、2重にダブって居た様です

←バカ

後から何度も付け加えてるうちに
余計なタグを入れてしまっていたらしくて
すみません

昨日一度最初からcssを見直してたので
なんとか解決できました。
ご迷惑をお掛けしまして

本当に助かりました