0

HTML5 でコーディングしようとしていますが、3<header>つのセクションがあります: 例: &<div id="topHeader"><nav><div id="mainHeader">

<topHeader>とには<nav>、ビューポートの幅 (100%) にわたる個別の背景色があります。

私はそれを理解できないので、私がやろうとしていることをコーディングするための最良の方法でいくつかの助けを本当に感謝します.また、最も効率的な方法でそれを行いたいです.

それは既存のウェブサイトであり、これはほとんどそれが行われた方法です. ただし、3 つのセクションを「header」タグにラップしたいと思います。「ヘッダー」タグを全幅にするべきかどうかわかりませんか?

<div id="topHeader">
<div class="contentArea">

    </div><!-- e contentArea -->
</div><!-- e topHeader -->
<div id="mainmenu">
<div class="contentArea">

    </div><!-- e contentArea -->
</div><!-- e menu -->
<div id="header">
    <div class="contentArea">

    </div><!-- e contentArea -->
</div><!-- e header -->



#topHeader {background-color: #9c140a;}
#topHeader .contentArea {width: 990px;}
#mainmenu {background:#b1140b;}
#mainmenu .contentArea {width:990px;}
#header .contentArea {width: 990px;}
4

2 に答える 2

0

これはどうですか http://jsfiddle.net/bMySg/

 <!DOCTYPE html>
    <html>
    <head>
        <style>
            body, html{
                margin:0px;
                padding:0px;
                height:100%;
                width:100%;
                font-family:'verdana', sans-serif, arial;
            }

            header{
                width:100%;
                background:#E10000;
                height:300px;
                padding-top:50px; /* height of header:before */
            }

            header:before{
                content:"";
                width:100%;
                height:50px;
                background:#7C0000;
                position:absolute;
                top:0px;
                left:0px;
                z-index:0;
            }

            .top_nav{
                width:75%;
                border:dotted #FFFFFF;
                color:#FFFFFF;
                position:absolute;
                top:0px;
                padding:10px;
                margin-left:12.5%;
                border-top:none;
                border-bottom:none;
            }

            .right{
                float:right;
            }

            .left{
                float:left;
            }

            .head_text{
                font-size:50px;
                color:white;
                text-align:center;
                padding-top:20px;
            }
        </style>
    </head>
    <body>
        <header>
            <nav class="top_nav">
                <a href="#" class="left">Links</a>
                <a href="#" class="right">Links</a>
            </nav>
            <h1 class="head_text">Navigation</h1>
        </header>
    </body>
    </html>
于 2013-02-11T21:07:01.713 に答える
0

わかりました、私はあなたが望むようなものを持っていますが、それを埋めるためのコンテンツが不足しているため、明らかにあなたのイメージとまったく同じではありません.

<html>
    <body>
        <div class="topHeader">
            <p>Test</p>
        </div>
        <nav>
            <a href="http://google.com">Google Link</a>
        </nav>
        <div class="mainHeader">
            <p>Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. Test. Lots 'o Text. </p>
        </div>
    </body>
</html>

と

.topHeader {
    background-color: DarkRed;
    width:100%;
}

.topHeader a.left {
    margin-left:10%;
}

.topHeader a.right {
    float:right;
    margin-right:10%;
}
nav {
    clear:both;
    background-color: red;
    width:100%;
}
.mainHeader {
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

.mainHeader p {
    border: dotted;
}

nav a {
    margin-left: 10%;
}

結果: http://jsfiddle.net/Ej47Q/8/

于 2013-02-11T20:57:28.980 に答える