dDtea Databank 911 | MAYA, Aftereffects, Final Cut Pro,Photoshop, Illustrator, Flashなど私的FAQ虎の巻

■得た知識をネット環境があればどこからでも見れるように個人的備忘録BLOG
■超絶テクでも,くだらんもんでもなんでも自分の為に貯めていく方針
■基本的にテクニック、ショートカット、フィルターのレシピなどなど
■守備範囲はMAYA, Aftereffects, Final Cut Pro,Photoshop, Illustrator, Flashなどなど
★ここに書いてあることを実行して不具合やトラブルが発生しても一切責任負いかねます
<< 【コマンドプロンプト】cdで別ドライブに移動できない | main | 【jQuery】background-position を指定したいがエラーが出て指定できない >>

【CSS】<li>の高さ height を 100% にしてるのに 0 のままで望む高さにならない

そもそも、
トップページをjQueryでカルーセル的に背景を一定時間かえることをやろうとしていた。
切り替える背景の単位はりすとでマークアップして下記の通りに記述
<div id="carousel"><ul>
    <li id="aaa">
        <h2>ウダウダ</h2>
        <p>ほにゃららほにゃらら</p>
    </li>

    <li id="bbb">
        <h2>ウダウダ</h2>
        <p>ほにゃららほにゃらら</p>
    </li>

    <li id="ccc">
        <h2>ウダウダ</h2>
        <p>ほにゃららほにゃらら</p>
    </li>
</ul></div>

それに対してスタイルシートを
#carousel {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}

#aaa {   
    width: 100%; height: 100%;
    background: url(bg.png);
}

としたんです。
そしたら#aaa.liの背景がでません。
Firebugで調べると heightが0

何ソレ!?

なので #aaa に
display: block;

としてみてたが、依然としてheightは0のまま。
調べても日本語の情報がない・・・。

英語情報では
floatさせるか display: inline-block を試せば解決すると書いてあったが、それでも解決しない。

色々探した挙句、ただシンプルに height 100% css でぐぐると、

親要素が100%じゃないと子供はいくらがんばっても100%にならないよ

ん?
だって親要素の #carousel もちゃんと height: 100% にしてるし・・・。
!?
あ、間に<ul>があるの忘れてた・・・。
Firebugで調べると #carousel 直下の ul は heightが0でした。
そんでもって。
#carousel > ul {
    width: 100%; height: 100%;
}

これで解決しました。
格別大それた原因があったわけでなく、単なる定義漏れでした。

ネットでがんばって調べても見つからない問題はかなり初歩的なケアレスミスの可能性があります。という教訓が学べました。無駄な30分が過ぎたorz

同じケースでドハマりしてるコーダーの助けになりますように・・・。
| CSS | 21:28 | comments(0) | - |
スポンサード リンク
コメント
コメントする









CATEGORIES
PROFILE
つくった曲
LINKS
RECENT COMMENT
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    chome (02/05)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    ねこ丸 (01/08)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    イワキ (12/25)
  • 【MAYA】Surface ShaderのOut Transparencyにマップを貼っても抜けない
    Shirobi (08/24)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    たけ (08/06)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    nobana (07/26)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    ももちん (07/22)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    nanasi (07/06)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    ゆちん (06/15)
  • 【Windows7】OSがインストールできない!(MBRパーティション)
    いぬっころ (01/17)
RECOMMEND
カラー図解!AUTODESK MAYAビジュアルリファレンス
カラー図解!AUTODESK MAYAビジュアルリファレンス (JUGEMレビュー »)

最近のMAYA本は日本語インターフェースで嫌悪感に付きまとわれる。古くからのMAYAユーザーにとって座右の書となる謳い文句どおり最強のリファレンス
個人的にはダイナミクス部分をもっと細かく取り扱ってほしかったが良い本です
RECOMMEND
Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS)
Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS) (JUGEMレビュー »)
Andy Clarke
内容・構成共にセンスの良い本。初心者向きではないが一段上のテクニック・知識を得るにはすばらしい本。日本の著者が書かないなかなか尖がった内容で楽しめます。超おすすめ!
RECOMMEND
「残業ゼロ」の仕事力
「残業ゼロ」の仕事力 (JUGEMレビュー »)
吉越 浩一郎
クリエイティブ業界全員読むべき
・ヘタレなクライアントにも読んでほしい
・朝遅く出社して夜中タクシーで帰る業界面した奴よ読みなさい
RECOMMEND
レバレッジ勉強法
レバレッジ勉強法 (JUGEMレビュー »)
本田直之
クリエイティブワークにビジネス書籍が無縁と思ってはいけない
最先端の技術を使って創作活動する私たちは常に勉強する必要がある
そして年収アップを考えるのであれば周りより努力しないといけない
その努力を如何に効率よく効果をあげるかが学べるオススメ本
RECOMMEND
ノンデザイナーズ・デザインブック Second Edition
ノンデザイナーズ・デザインブック Second Edition (JUGEMレビュー »)
ロビン・ウィリアムズ
これは改訂版で見たこと無いが改定前の青い本はなかなかの良書
主にタイポグラフィーではあるがデザインの原則が学べる超おススメ本
眠くなるががんばってここにある4つの原則を読んでほしい。体得するとプロかアマか位の差が出るね!
映像屋とか3D野郎とかの人、俺には役たたないと思わず読みなさい!映像にも応用ができます。
RECOMMEND
配色アイデア見本帳 (MdN design basics)
配色アイデア見本帳 (MdN design basics) (JUGEMレビュー »)
石田 恭嗣
サンプルが多く、眺めているだけでも楽しく、配色のインスピレーションが降臨する
RECOMMEND
7日間でマスターする配色基礎講座 (Design beginner series)
7日間でマスターする配色基礎講座 (Design beginner series) (JUGEMレビュー »)

色使いはセンスと思いきや!?
配色を勉強すれば問題ありません
センスある日とは無意識にこのルールに従っているだけなのです
配色の理論をわかりやすく学べる良書
RECOMMEND
 (JUGEMレビュー »)

映像のマンスリーDVDマガジン
世界最先端のモーション・エフェクツを使用した企業CM からショートフィルムを多数収録
RECOMMEND
 (JUGEMレビュー »)

Photoshopの操作技術本ではなく
純粋にPhotoshopを道具として如何に写真をよりよく見せるよう加工する?
なかなか興味深く、実用的で硬派な本です
RECOMMEND
BRYCE World Studio
BRYCE World Studio (JUGEMレビュー »)
大沢 ツトム, 大河原 浩一
古いバージョンはフリーで使える景観作成アプリ。解説本は良さげなのはこれくらいしかない。説明書がわりに一冊どうぞ!
Twitter
ARCHIVES
SELECTED ENTRIES
モバイル
qrcode