2

#header の位置を固定し、幅を広げないようにする方法を考えています。

コードを何度かチェックしましたが、何がヘッダーの幅を妨げているのかわかりません。以前は 70% の幅を指定していたのに、何らかの理由で幅が広くなり、少し下にジャンプし、後で幅を変更しないでください。

ヘッダーの位置を正しい幅 (70%) に固定し、ジャンプしないようにするにはどうすればよいですか? また、#header で「私の名前」とナビゲーションを隣り合わせにする正しい方法またはより良い方法はありますか? #header の左側に私の名前、右側にナビゲーションがあります。

HTML5:

    <body>
 <section id="Header" class="group">
  <header>
       <h2><a href="http://www.epicforever.com">My Name</a></h2>
  </header>
  <nav class="main">
   <ul class="group">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
       </ul>
  </nav>
     </section>

     <section id="TopContainer" class="group"> 
  <p>Welcome to my Portfolio</p>
  <p>Webdevelopment is my passion and I'd love to design and develop a website for you        
      sometime!</p>
      <div class="block1">
   <header><h2>Brand</2></header>
  </div>
  <div class="block2">
   <header><h2>Web</h2></header>
  </div>
  <div class="block3">
   <header><h2>Design</h2></header>
  </div>
  <aside><p>See all projects<a href="#">// brand // web // print</a></p></aside>
 </section>

CSS3:

html {
width: 100%;
    }


body{
background-image: url("img/bg.png");
font-family: arial, 'Lucida Sans Unicode';
font-size: 87.5%;
line-height: 15px;
color: #000305;
    }

#Header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer{
width: 70%;
margin: 0 auto;
    }

#Header{
padding: 0 10% 0 10%;
background-color: #fff;
margin-top: -8px;
position: fixed;
    }

#Header header h2 {
padding-top: 13px;
    }

#Header nav{
text-align: right;
    }

#Header nav ul li{
list-style: none;
display: inline-block;
padding: 5px;
    }


#TopContainer{
height: 150px;
padding: 0 10% 10% 10%;
background-color: #fff;
margin-top: 90px;  /* change this at the end*/
}
4

1 に答える 1

0

これに10分費やした後、位置を固定した後、#headerでトップの位置を指定していないことがわかりました。

だからあなたのCSSは

#Header{
    padding: 0 10% 0 10%;
    background-color: #fff;
    margin-top: -8px;
    position: fixed;
    top:0px;
}

ここにフィドルがあります http://jsfiddle.net/mW5aS/1/

編集: // ヘッダーとナビゲーションを並べて作成するには

float プロパティを使用できます。

#Header header{
    padding-top: 13px;
    float:left;
    width:55%;
}
#Header nav {
    text-align: right;
    float:right;
    width:40%;
}

ここにフィドルがありますhttp://jsfiddle.net/mW5aS/2/

于 2013-10-19T14:11:44.723 に答える