0

基本的な Web ページのレイアウトをまとめようとしていますが、いくつか問題が発生しました。誰かが私にそれを解決するのを手伝ってもらえますか. 私のCSSの理解は素晴らしいものではありません。

コード: http://jsfiddle.net/HJLzt/

  1. スティッキーフッターが機能しており、ヘッダーとフッターの間にページの左右に列を配置したいと考えています。私がやった方法が正しいかどうかはわかりません。

  2. 左右の列とヘッダーとフッターの間にコンテンツを入れたいと思います。どうすれば中央に配置できますか。常にオーバーフローがあり、左と右の列の間だけを行き来し、何も切り取らないようにしたいので、適切な方法を見つけることができません。

ご協力ありがとうございました！

編集: レイアウトを更新し、jquery を少し使用して支援しました。css ですべてを機能させようとする必要があることはわかっていますが、それは不可能に思えます。

たぶん、ホワイトボードをテーマにしたいということを追加する必要があります。木製のフレームが欲しいので、サイドバーは常にヘッダーとフッターに接続する必要があります。上部と下部のフレームがそこを通過するからです。

誰かが見て、それが大丈夫かどうか教えてくれたら.

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#main header{
    height: 100px;
    width: 100%;
    background-color: #5d3be6;
}

footer{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    background-color: #afeba4; 
}


/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#layout_left{
    float: left;
    width: 100px;
    min-height: 100%;
    height: 100%;
    background-color: #f21ce7;
}

#layout_right{

    float: right;
    width: 100px;
    min-height: 100%;
    height: 100%;   
    background-color: #f21ce7;
}

#content_layout{
    border-left: 100px solid #e4f662;
    border-right: 100px solid #e4f662;
    width: auto;
    height: auto;
    background-color: #c36161;
}

#content{
    margin: auto;
    width: 96%;
}
4

1 に答える 1

0

あなたがCSSに不慣れであるとあなたが言ったように、私はあなたのレイアウトに反対することを強くお勧めします、それは一見10年前の標準です。（もちろん、犯罪は意図されていません。あなたはこれに不慣れです。あなたは今のところ、すべきこととすべきでないことを知るつもりはありません）。

アイデアのためにグーグルを使用してオンラインポートフォリオの例を研究してください！

あなたの質問に答えるために：

私はあなたのスティッキーフッターコードを認識しています、私も私のために働きませんでした、まあ完全ではありません。

それはうまく機能しません、私はお勧めします：http: //css-tricks.com/snippets/css/sticky-footer/

私はあなた自身に言いますが、そのチュートリアルは非常によく書かれていて、理解して実装するのが簡単です。

そして、コンテナの使用をセンタリングするために： 

margin: 0 auto;

使用できるテキストの中央揃え： 

text-align: center;

お役に立てば幸いです。

于 2012-11-10T15:33:07.980 に答える