フロイド
オリジナルポスター- 2005年4月7日
- モンテレーメキシコ
- 2006年3月27日
私は2つのdivを持っています。 1つは高さが固定されており、もう1つはウィンドウの残りの垂直スペースを埋めてほしいです。後者のdivの高さを100％に設定すると、ウィンドウと同じ高さになりますが、ウィンドウの高さから最初のdivの高さを引いたものにします。
これは私が使用しているコードです：
コード：
Vertical div test body { margin:0; padding:0; height:100%; } #div1 { height: 100px; background-color: blue; } #div2 { height: 100%; background-color: green; } また、自分がやりたいことやこれまでにできたことを示す画像もいくつか含めました。前もって感謝します
添付ファイル
NS
NoNameBrand
- 2005年11月17日
- ハリファックス、カナダ
- 2006年3月27日
そうでなければ、私はあなたが望むものを手に入れる方法を考えることができません。
スティーブ
- 2004年10月13日
- イギリス
- 2006年3月27日
試す：
無題のドキュメント
に
NS
NS
NS
と
ps私はDWでそれを行い、2番目のレイヤーにコンテンツを追加し、コードをいじって騙しました-DWは、エッジの周りにパディングを付けるのが好きで、ダイアログでレイヤーを指定することもできます上隅から0pxから開始し、コードビューを使用して2回指示する必要があります。とにかくしなければなりませんでした。
フロイド
オリジナルポスター- 2005年4月7日
- モンテレーメキシコ
- 2006年3月27日
NoNameBrandは言った：なぜ2番目の中に1番目を入れ子にしないのですか？
そうでなければ、私はあなたが望むものを手に入れる方法を考えることができません。
おかげで、それは視覚的に機能しますが、2番目のdivはこのレイアウトのコンテナになるので、コンテンツがそれらを継承できるように、適切な寸法が必要です。
それで、多分それは単に不可能ですか？おそらく、それを機能させるために小さなJavaScriptを使用する必要がありますか？
stevepは言った：試してみてください：ありがとうございますが、動作させることができませんでした。どのブラウザを使用しましたか？
フロイド
オリジナルポスター- 2005年4月7日
- モンテレーメキシコ
- 2006年3月27日
これが私の究極の目標の写真です。これまで徐々にやってきたので、最初のアプローチが問題かもしれません。では、皆さんはこれにどのようにアプローチしますか（私はアイデアが必要です）？純粋なCSSを使用しますか、それともテーブルやフレームに譲りますか？
添付ファイル
スティーブ
- 2004年10月13日
- イギリス
- 2006年3月27日
あなたがいじくり回さなければならないビットはこれです：
＃Layer1 {
位置：絶対;
左：0px;
top：0px;
幅：100％;
高さ：180px;
z-index：1;
背景色：＃99CCFF;
}
あなたが正しい位置を得るように一枚の紙の上であなたのページを荒くしてください、そしてそれはあなたに各層の一番上のLHコーナーの位置を与えるでしょう。レイヤー1の高さによって、レイヤー2の開始位置が決まります。この場合、レイヤー2にはtop：180px;コード行。
前回の投稿で示したように3つのレイヤーが必要な場合、左端のレイヤーは次のようになります。
＃Layer1 {
位置：絶対;
左：0px;
top：0px;
幅：200px;
高さ：100％;
z-index：1;
背景色：＃336699;
}
最上位のRHレイヤーは次のようになります。
＃Layer1 {
位置：絶対;
左：200px;
top：0px;
幅：100％;
高さ：180px;
z-index：2;
背景色：＃33CCFF;
}
ウィンドウの残りの部分を埋める3番目のレイヤー（サイズは変更されます）は、次のようになります。
＃Layer1 {
位置：絶対;
左：200px;
top：180px;
幅：100％;
高さ：100％;
z-index：3;
背景色：＃99CCFF;
}
Dreamweaverを使用している場合は、レイヤーがページビューで何も表示されない場合に備えて、各レイヤーにダミーコンテンツを配置することをお勧めします。したがって、上記の元のhtmlの「a、b、cなど」です。
ps私は専門家ではありません。間違っているかもしれませんが、お役に立てば幸いです。私が言えることは、私の最初のコードは機能しているように見えるということです。個人的には、ビットを手伝うことができればレイヤーをネストしませんが、それは私だけです-私は単純なことしかしません。 NS
NoNameBrand
- 2005年11月17日
- ハリファックス、カナダ
- 2006年3月27日
これが私がすることです：
コード：
foo あなたが信じる！
-
- 2003年6月14日
-
-
- MD / VA / DC
- 2006年3月27日
デコンセプト..。
FlashObjectをチェックしてください。ダウンロードには、divをフルスクリーンにするためのコードがあります。多分それはあなたが望むように調整することができます。
http://blog.deconcept.com/flashobject/ フロイド
オリジナルポスター -
- 2005年4月7日
-
-
- モンテレーメキシコ
- 2006年3月28日
すべての助けてくれてありがとう、しかし私はちょうど私が望む正確なレイアウトが固定された幅/高さとパーセンテージの組み合わせで達成することが不可能であることに気づきました。パーセンテージのみを使用して書き直しましたが、現在は機能しています。マークアップに興味がある場合はお知らせください。投稿します。 スティーブ
-
- 2004年10月13日
-
-
- イギリス
- 2006年3月28日
フロイドは言った：あなたがマークアップに興味があるなら私に知らせてください、そして私はそれを投稿します。
もう一度投稿する時間があれば、見てみたいと思います。
NoNameBrandは言った：この「レイヤー」のものは何ですか？そのDreamweaver風の「ブレークスタッフは本当に良い」ですか？
さて、私は「破壊的なもの」については知りませんが、私はCSSのboffではないとあなたが言ったと思います-レイヤーは、「CSSに配置された要素」と呼ばれるべきだと思うものにDWによって付けられた便利な名前です-そしてDTP / Photoshopのバックグラウンドを持つ私のような人々をもう少し快適に感じさせるために、彼らは彼らを呼んでいると思います。投稿NoNameBrandに含めたコードを見ると、私のものよりもはるかにエレガントです。divタグに頭を悩ませる必要があります。 OPと返信をありがとう。 NS NoNameBrand
-
- 2005年11月17日
-
-
- ハリファックス、カナダ
- 2006年3月28日
stevepは言った：まあ、私は「破壊的なもの」については知りませんが、私はCSSのboffではないとあなたが言ったと思います-レイヤーは、私が「CSSに配置された要素」と呼ばれるべきだと思うものにDWによって付けられた便利な名前です'
また、ページ上で物事を前後に配置するzインデックスを積み重ねていました。その前にDWレイヤーがサイトを完全に破壊するのを見たことがありますが、それ以外の場合は、DWレイヤーにあまりさらされていません（実際にはそれで十分でした）。
divタグの周りに頭を実際に回すには、突き刺さなければなりません。
Aは単なる任意のブロックであり、意味的には何の意味もありません。します（テキストの段落）。 NS同じアイデアですが、インラインのもの（ タグですが、セマンティックフリーです）。
このことを学ぶために行う最も簡単なことは、Dreamweaverの使用をやめることです。 Photoshopでサイトをデザインし、必要なグラフィック要素を保存し、カラーコードと位置合わせのための大まかなピクセル測定値を書き留めてから、TextWranglerまたはVIMでサイトをコーディングします。 フロイド
オリジナルポスター -
- 2005年4月7日
-
-
- モンテレーメキシコ
- 2006年3月28日
stevepは言った：あなたが再び投稿する時間があれば私は見てみたいです。
ここに、少しスペイン語があります。あまり混乱しないことを願っています。
コード：グランドスキームhtml {高さ：100％; }本体{マージン：0;パディング：0;高さ：100％;幅：100％; }＃left、＃right {float：左; } #left {高さ：100％;背景色：オレンジ;幅：10％; } #right {高さ：100％;位置：相対;幅：90％; } #top {背景色：青;高さ：10％; } #fotos {位置：相対;高さ：90％; }＃foto_sup_izq、＃foto_sup_der、＃foto_inf_izq、＃foto_inf_der {高さ：50％;幅：50％;オーバーフロー：自動;位置：絶対; }＃foto_sup_izq、＃foto_sup_der {top：0; }＃foto_sup_der、＃foto_inf_der {左：50％; }＃foto_inf_izq、＃foto_inf_der {トップ：50％; } 
添付ファイル
人気の投稿