-1

したがって、基本的に私の問題は、ページに 3 つの div があり、中間のコンテンツ div が常にヘッダーとフッターの div から約 50px 離れていることです。

この分離はなぜ起こるのでしょうか。css ファイルで余白を指定していません。

アマール

編集: css ファイルのコードは次のとおりです。

    @-webkit-keyframes showBody{
        from { opacity: 0; }
        to   { opacity: 1;  }
    }



    body { -webkit-animation: showBody 3s; position:relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D));  height: 100%; margin: 0; background-repeat: no-repeat;
        background-attachment: fixed; }
    #links li {list-style: none; display: inline; margin-right: 30px;}
    a {text-decoration: none;}
    #header { border-top-left-radius: 25px ; border-top-right-radius: 25px; background-color: #FFF; margin-top: 0px; margin-left: auto; margin-right: auto; width:1100px; height: 60px;border-top: 1px solid; border-left: 1px solid; border-right: 1px solid;}
    #navmenu {height: 34px; width: auto; position: relative; left: 100px; top: -25px; }
    #contentArea { background-color: #FFF; border-left: 1px solid; border-right: 1px solid; width: 1100px; margin-right: auto; margin-left: auto;}
    #footer {border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; background-color: #F00; margin-left: auto; margin-right: auto; width:1100px; height: 100px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; }
    #links {width: 1100px; background-color: #FFF; float: top; border-bottom: 1px solid;}
    #links li {list-style: none; display: inline; margin-right: 30px;}
    #copyrightinfo {width: 1100px; }
    #navmenu {float: top; margin-top: 0px;}
    #container {border-radius: 

20px;}

html ファイルのコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" href="css/pagestyle.css" rel="stylesheet"/>
    <link type="text/css" href="css/navmenustyle.css" rel="stylesheet" />



</head>
<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="navmenu">

            <ul id="frodoNav">
               <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Social">Social</a></li>
                <li><a href="#" title="Reviews">Reviews</a></li>
                <li><a href="#" title="Special Stories">Special Stories</a></li>
                <li><a href="#" title="Travel With Kids">Travel With Kids</a></li>
                <li><a href="#" title="Support">Support</a></li>        
            </ul>

            </div>
        </div>
        <div id="contentArea" style="clear: both;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.

Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.

Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
     </div>
     <div id="footer">
     <div id="footer-nav">
     </div>
     </div>
      </body>
</html>
4

3 に答える 3

0

私たちが見ることができるようにコードを用意しておくのが最善です。ただし、別の場所でデフォルトのスタイルを使用している可能性があります。マージン/パディングをゼロに設定してみてください。

于 2012-06-07T04:46:03.233 に答える
0

私はこの問題を抱えています。これは、div 間のテキスト ノードが原因です。float:left を div に追加すると、ブラウザはテキスト ノードを無視する必要があります。

于 2012-06-07T04:44:05.570 に答える
0

誰かが興味を持っているなら、ここに問題に対する私の解決策があります。

html,
*
{
    border      : 0;
    box-sizing  : border-box;
    margin      : 0;
    padding     : 0;
}

@-webkit-keyframes showBody
{
    from { opacity : 0; }
    to   { opacity : 1; }
}

a 
{
    text-decoration : none;
}

body 
{
    -webkit-animation     : showBody 3s;
    background-attachment : fixed;
    background-image      : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D));
    background-repeat     : no-repeat;
    height                : 100%;
    position              : relative;
}

#container
{
    border-radius : 20px;
}

#contentArea
{
    background-color : #FFF;
    border-left      : 1px solid;
    border-right     : 1px solid;
    clear            : both;
    margin-left      : auto;
    margin-right     : auto;
    width            : 1100px;
}

#copyrightinfo
{
    width : 1100px;
}

#footer
{
    background-color           : #F00;
    border-bottom              : 1px solid;
    border-bottom-left-radius  : 20px 20px;
    border-bottom-right-radius : 20px 20px;
    border-left                : 1px solid;
    border-right               : 1px solid;
    height                     : 100px;
    margin-left                : auto;
    margin-right               : auto;
    width                      : 1100px;
}

#header
{
    background-color        : #FFF;
    border-bottom           : 1px solid;
    border-left             : 1px solid;
    border-right            : 1px solid;
    border-top              : 1px solid;
    border-top-left-radius  : 25px;
    border-top-right-radius : 25px;
    height                  : 60px;
    margin-left             : auto;
    margin-right            : auto;
    text-align              : center;
    width                   : 1100px;
}

#header:before
{
    content        : '';
    display        : inline-block;
    height         : 100%; 
    vertical-align : middle;
}

#links
{
    background-color : #FFF;
    border-bottom    : 1px solid;
    float            : top;
    width            : 1100px;
}

.menu-item
{
    display      : block;
    float        : left;
    margin-left  : 30px;
    margin-right : 30px;
}

#navmenu
{
    display        : inline-block;
    vertical-align : middle;
}
<!DOCTYPE html>
<html>
    <head>
        <link href = "css/Example.css"
              rel  = "stylesheet"
              type = "text/css"
        />
    </head>

    <body>
        <div id = "container">
            <div id = "header">
                <div id = "navmenu">
                    <div class = "menu-item"><a href = "#" title = "Home">Home</a></div>
                    <div class = "menu-item"><a href = "#" title = "About">About</a></div>
                    <div class = "menu-item"><a href = "#" title = "Social">Social</a></div>
                    <div class = "menu-item"><a href = "#" title = "Reviews">Reviews</a></div>
                    <div class = "menu-item"><a href = "#" title = "Special Stories">Special Stories</a></div>
                    <div class = "menu-item"><a href = "#" title = "Travel With Kids">Travel With Kids</a></div>
                    <div class = "menu-item"><a href = "#" title = "Support">Support</a></div>
                </div>
            </div>

            <div id = "contentArea">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.

                Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

                Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.

                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.

                Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
        </div>

        <div id = "footer">
            <div id = "footer-nav">
            </div>
        </div>
    </body>
</html>

div の間隔の問題は、次のコードを CSS ファイルに挿入することで解決されました...

*
{
    border      : 0;
    box-sizing  : border-box;
    margin      : 0;
    padding     : 0;
}

これらのスタイルは、 を使用してすべての要素に適用されます*。borderすべての要素の、marginおよびpaddingプロパティを に設定し、必要に応じてまたは0でその値をオーバーライドすることにより、ここでの主な問題のように、 、および / またはの不要なデフォルトの発生を防ぐことができます。idclassbordermarginpadding

ここで使用されている行は、box-sizing : border-box;すべてのborder、marginおよびpadding各要素の定義をその要素内にwidth配置し、ページのレイアウトをより簡単にしています。

また、リスト ( li) をいくつかの に置き換えましたdiv。これにより、メニューの開発がはるかに簡単になりました。リストは、特に簡単な箇条書きが必要な場合に、テキスト リストを表示するのに適していますが、テキストであれその他であれ、他のグループのアイテムを表示するにはあまり適していません。他のグループについては、div代わりに 's を使用してください。

メニュー項目を含む に配置し、div navmenu水平方向の中央に配置しました。その後、Fadi のソリューションのバージョンを使用して、それらを垂直方向に中央揃えすることができました。.

また、CSS ファイルから冗長/重複コードを削除styleし、HTML ファイルから CSS ファイルに移動し、ファイルの一般的なレイアウトと表示を改善しました。

ご意見やご質問がございましたら、お気軽にお寄せください。

于 2015-10-10T06:07:04.227 に答える