0

私はHTML5の初心者ですが、この問題を解決できないようです。下の画像から、ヘッダーがコンテンツ領域と重なっていることがわかります。どうすればこれを修正できますか？それは私のヘッダーcssに何かありますか？

http://imgur.com/pJn4i

<!DOCTYPE HTML>
<html>

<head>

<meta charset="UTF-8" />
<link href='http://fonts.googleapis.com/css?     family=Open+Sans:300italic,600italic,600,300' rel='stylesheet' type='text/css'> 


<!--Stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->   

<!--HTML5 video player-->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

</head> 

<body>

<header>

    <div id="headercontainer">

        <h1><a class="introlink anchorLink" href="#intro">Test Site</a></h1>

        <nav> 
            <ul>
                <li><a class="introlink anchorLink" href="#intro">Intro</a>   </li>
                <li><a class="portfoliolink anchorLink"  href="#portfolio">Portfolio</a></li>
                <li><a class="aboutlink anchorLink" href="#about">About</a> </li>
                <li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
            </ul>               
        </nav>

    </div>

</header> 


<div id="content">
<article>
<section>

    <h1 class="article"> Lorem ipsum</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor        incididunt ut labore et dolore magna aliqua. 
    </section>

対応するCSSは次のとおりです。

body{
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: small;
background-image:url('Media\background.jpg');
background-repeat:repeat-y;
padding-top::50px;      
   }

header { padding: 5px 0; width: 100%; background-color: #000; margin-bottom: 25px; 
position: fixed; z-index: 10; float: left; }
#headercontainer, #contentcontainer { width: 960px; 
margin: 0 auto; position: relative; }
4

2 に答える 2

2

ヘッダーの固定位置を維持したい場合は、それmargin-topを補うために本体に適用する必要があります。

また、ヘッダーの位置が固定されているため、実際には必要ありませんmargin-bottom。

body {
    margin: 25px 0 0 0; /* considering that the header is 25px */
    font-family: 'Open Sans', sans-serif;
    font-size: small;
    background-image:url('Media\background.jpg');
    background-repeat:repeat-y;
    padding-top: 50px;      
}
于 2012-09-18T14:24:48.540 に答える
2

position: fixed;ヘッダーCSSからを削除します。

于 2012-09-18T14:21:27.313 に答える