1

昨日から解決策を探していましたが、解決策が見つからなかったか、検索する適切なキーワードが見つかりませんでした。

だから私は自分のウェブサイトにヘッダーを持っています。これはヘッダーであり、それをうまく中央に配置し、背景色を拡張しました。

今、私は素敵なインタラクティブ/光沢のあるナビゲーションバーをフッターとして作成する方法を見つけましたが、それを上部で使用しています。また、サイズを拡張したいのですが、それ自体を中央に配置するだけで拡張しません。これをスクリーンショットで表示し、コードを投稿します。

また、#main_inner_area という div に含まれるボックスを中央に配置したいと考えています。

注: Navbar は、CSS/HTML コードではまだ #footer と呼ばれています。ヘッダーの背景色が全幅に拡張されるように、navbar の側面を拡張したいと考えています。 私のスクリーンショット: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (申し訳ありませんが、スクリーンショットなしで説明するのは難しいです)

HTML:

<div id="main_area">
    <header> 
     <h1>This is a header</h1>
    </header>
    <div id="footer">long code for layout navbar</div>

    <div id="main_inner_area">
        <article>d       fsdf sdf sdf dsf dsf dsf</article>
    </div>
</div>

CSS:

*{
padding: 0px;
margin: 0px;
}
#main_area{
    background:#4863A0;
    display: block;
    text-align: left;


}
header {

height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;


}



#footer{

    width:700px;
            top:100px;
    margin:0 auto;
    padding:0;
    left:0;
    right:0;

            margin: 0 auto;
    height: 40px;
            border-radius:7px 7px 7px 7px;
    font-family:Arial;
    text-shadow: 1px 1px 1px black; /*h,v,blur,color */
    /* glass effect */
    border-bottom: 1px solid rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.5);
    /*inset = inner shadow ----------- this just creates multiple shadows*/
    /*top border, top white section, overlay top white, bottom*/
    box-shadow:  inset 0px -2px rgba(255,255,255,0.3),
         inset 0px -15px 20px rgba(0,0,0,0.2),
         inset 0 -10px 20px rgba(255,255,255,0.25),
         inset 0 15px 30px rgba(255,255,255,0.3); 
}

#main_inner_area{
            float: left;
            width:735px;
            margin:25px 0px 10px 0px; 

}

article{

        background: rgba(255,255,255, 0.5);
        border: 1px solid #4863A0;
        margin:0px;
        margin-bottom: 10px;
        padding: 15px;
        font-family: Tahoma;
        font-size: 14px;
        text-align:left;
        display:block;
        width:700px;
        height:auto;
        border-radius: 7px 7px 7px 7px;     

}

PS 本当に感謝しています。私は 18 歳の学生で、書斎の隣で特別なことを学ぼうとしています。

4

2 に答える 2

1

ヘッダーを動的にするには、ヘッダーwidthから (および #footer からも) 属性を削除するだけです。もちろん、固定値に設定すると、スケーリングできません。

あなたのarticle使用を中心にmargin-left: auto; margin-right: auto;

更新: (ストレッチ ナビゲーション バー)

CSS の変更

#footer {
    width: auto;
}

#footer .links {
    width: 700px;
    margin: 0 auto;
}

HTML の変更:

<div id="footer">
    <div class="links">long code for layout navbar</div>
</div>

http://jsfiddle.net/UKYDb/1/を参照してください

于 2013-07-28T10:55:11.427 に答える
0

「拡張」の意味がわかりませんが、すべてに固定の幅と高さを設定しています:

#footer {
width: 700px;
height: 40px;
...
}

CSS コードのすべてに、固定幅ではなくパーセントを使用してみてください。

width: 100%;
于 2013-07-28T10:53:06.220 に答える