HTMLを再学習する

私は長年業界に携わってきましたが、過去10年間はHTMLの多くを自分でやる必要はありませんでした。私は最近、職場で唯一の開発者になったので、自分自身もすべてHTMLをやらなくてはなりません。HTMLを再学習する

通常これは問題ではありませんが、私はPHP/MySQL/JavaScript/jQueryの仕事と同じ品質基準を採用しようとしています。だから、テーブルは間違いなく（私はHTML/CSSを書かなければならなかった最後の時間は、ネストされたテーブルが受け入れられる時でした）。

私はHTML divとCSSで悩んでおり、かなりの大きな問題を抱えていて、W3Schoolsに投稿されたばか以外のものはオンラインではほとんど見つけられません。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Page Title</title> 
     <link href="inc/css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div id="page_wrapper"> 
      <div id="content"> 
       <header>this is the header...</header> 
       <div id="content-wrapper">sdasd</div> 
       <footer> 
        this is the footer 
       </footer> 
      </div> 
     </div> 
    </body> 
</html>

とCSS：

てみましょう最初の私が働いているいくつかのコードを見てみましょうが、ここではHTMLだ、私はこれにはいくつかのバリエーションをしようとしました

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: gray; 
} 

#page_wrapper { 
    background: yellow; 
    height: 100%; 
    width: 100%; 
} 

#content { 
    width: 980px; 
    background: white; 
    height: 100%; 
    margin: 0 auto; 
} 

header { 
    height: 160px; 
    width: 980px; 
    background: blue; 
} 

#content-wrapper { 
    background: green; 
    width: 100%; 
} 

footer { 
    height: 120px; 
    margin-top: -120px; 
    width: 980px; 
    background: orange; 
}

、および私はそれを得るべき方法を見て得ることができませんでした。私は実際のものよりも学習の練習のほうが多いので、私はすべての配置を伝えるために背景色を特に使用しています。

私が作成しなければならないページの多くは、最近多くのウェブサイトのように体の中に背景イメージを持っています。コンテンツの幅は980ピクセルになります。上記のコードで私の大きな問題は、コンテンツラッパーdivは、コンテンツがプッシュダウンするのに十分な長さでない場合、利用可能なスペースの100％である必要があるということです。

CSSの宣言にheight: 100%を追加すると、それはそれをうまく表現しているように見えますが、それを含んでいるウィンドウの100％になります。page_wrapperdiv

宣言を何もしないでください。何らかの理由で私がそれを行うたびに、他のすべてのものを上げます。

だから私は、本当の問題を推測および/またはここでリクエストが2つの部分の事のようになります。

私は上記のコードでやりたいものをどのように行うのですか？
div/CSSのウェブサイト構築方法の学習や再学習に推奨されるサイト（W3Schoolゴミ以外）はありますか？

出典

2011-12-26 Justin

ブートストラップ（http://twitter.github.com/bootstrap/）のようなフレームワークを出発点（または960または他のものの1つ）として考えてください。それはあなたが完成した製品に早く到達するのを助け、可能なことについての堅実な学習の参考となります。 – toddsundsted

https://developer.mozilla.org/> w3schools –

[Garbage is right]（http://w3fools.com）。私はこの質問が少し広がっていると感じています。最後にそれを絞り込んでも、2つの別々の質問があります。これを分割し、より具体的なものにすることを検討してください。 – Purag

HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Page Title</title> 
</head> 
<body> 
<div id="page_wrapper"> 
    <div id="content">       
     <div id="content-wrapper"> 
      <header>this is the header...</header> 
      test 
      <footer>this is the footer</footer> 
     </div> 
    </div> 
</div> 
</body> 
</html>

CSS： "内容はそれを押し下げるのに十分な長でない場合、利用可能なスペースの100％。"

html, body { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
} 

body { 
background: gray; 
} 

#page_wrapper { 
background: yellow; 
height: 100%; 
width: 100%; 
} 

#content { 
width: 980px; 
background: white; 
height: 100%; 
margin: 0 auto; 
} 

header { 
height: 160px; 
width: 980px; 
background: blue; 
} 

#content-wrapper { 
background: green; 
height: 100%; 
position:relative; 
} 

footer { 
height: 120px; 
width: 980px; 
background: orange; 
position:absolute; 
bottom:0; 
}

出典

2011-12-26 23:59:25

私はposition：を#contentに関連づけて追加しましたが、何もしませんでした。＃content-wrapperに追加しても機能しましたが、ウィンドウ自体の100％であり、フッタを完全に隠しています... – Justin

Hmmm ... second ... –

これは私が見ているものです（最新のFireFox）：http://screencast.com/t/u1g7kwXmgABDあなたが期待していたものではありませんか？ –

-1

bodyタグが既にあります

この要素を必要なもの（背景画像など）に使用してください。 background-positionなどのCSSプロパティを見て、<body>タグ内に何かが表示される場所を制御してください。

そうでなければ、私はラッパーでmin-height: 100%;に行きますが、IEの古いバージョンとの互換性がわかりません。タッチスクリーンデバイス上では、ファンキーなことをすることもしないこともあります。

一般的に、HTMLは縦型レイアウトではあまりよくありません。特に、ブラウザのウィンドウの高さに関連して。現代のブラウザではほとんどの問題を解決することができますが、単にこの制約を受け入れ、高さを制御できないという前提でウェブサイトを設計する方がよいでしょう。それは頭痛の価値がないだけです。

出典

2011-12-27 00:00:44

もし私がこれをdownvoteすることができます。この答えは完全にばかげている。古いバージョンのIEは気にしません。簡単に言えば、あなたのWebブラウザを更新できない場合は、私のサイトを見る必要はありません。これはHTML5とCSS3を使用している理由です。特にBECAUSE古いブラウザはどちらもサポートしていません...アップグレード、またはミスアウト...シンプルなことは本当に...ブラットポップアップを見つけることができないばかげた馬鹿へのケータリングを終了する 'ねえ、ブラウザのアップグレードがありますか？インストールする/ – Justin

真剣に？文字通り何千ものウェブサイトに取り組んできた人に、あなたが学ぶのを助けてくれたことに感謝しなければなりません。私はここであなたと一緒に過ごすつもりはありません。 –

ページラッパーやコンテンツdivは必要ありません。本体の幅は980pxに設定できます。 HTMLや本文を好きな色に設定することもできます。

W3Schoolsはかなり悪いラップを手に入れましたが、かなりクリーンアップされていて、悪いクイックリファレンスではありません。

出典

2011-12-27 00:10:31 Rob

バックグラウンド画像を使用しているので、頻繁に使用されることはありません。本文：背景画像、幅は100％である必要があります。 no page_wrapper：ヘッダーの背景イメージがないことを意味します。コンテンツdivがない場合は、この場合はページも100％でなく980が優先されます。私の構文は時間外に変更されますか？はい、私はそれは確信していますが、これらの提案は本当に有用ではありません。 – Justin

@Justin - あなたはなぜそれらの要素の背景画像を持つことができない、または全幅にすることができないと思いますか？あなたはなぜあなたが望むように体がそれらの要素を980に含まないと思うのですか？ – Rob

body要素は980や960などとしていますが、bodyの幅を960pxまたは980pxまたは100％未満の任意の値に設定すると、body {}宣言の背景画像がある場合CSSでは、それもその幅に制限されます。 – Justin

答えて

関連する問題