0

これが以前に回答された質問である場合は申し訳ありませんが、私は検索していて、完全に適合する解決策を見つけることができません。固定ヘッダーをコンテンツと一致させようとしていますが、そこにとどまることができないようです。ウィンドウのサイズが変更されるたびに、ヘッダーが左または右に移動します。私が今それをセットアップする方法は、ヘッダーをコンテンツと完全にインラインに保つために私が見つけた唯一の方法です。それ以外の場合は、ページの左側にぶら下がっています。

理想的には、ヘッダーを他のコンテンツよりもわずかに大きくし、ウィンドウサイズに関係なく、主にロゴが垂れ下がっているため、ヘッダーと正確に一致するようにすることです。ライブサイトはこちら： andrewillustration.com

コードは次のとおりです。

CSS

body{
background-attachment: fixed;
margin: 0px;
font: 400 16px/22px 'PT Sans Narrow', sans-serif;
color: #099;
background-color: #B4BFCD;
background-image: url(images/noisy_grid.png);
}
h1{font: 400 58px/60px 'Open Sans Condensed', sans-serif; color:#F05522; margin-left:65px;}
h2{
font: 400 18px/22px 'Open Sans Condensed', sans-serif;
color: #069;
}
h3{font: 400 14px/16px 'Open Sans Condensed', sans-serif; color:#6a6969;}
ul{margin:0px; padding:0px;}
a {
text-decoration: none;
color: #FFF;
}
a:hover {color:#099;}
a img{border:0px;}

#container{
width: 950px;
margin: 0px auto 300px auto;
Background:url(images/torn_paper_background.png)            repeat-y;
overflow: auto;
padding-bottom: 100px;
}

/****************************************************/
/* HEADER */
/****************************************************/

#header{
background-color: #F05522;
width:712px;
height: 115px;
padding: 0px 43px;
position: fixed;
top: 0px;
left:62%;
margin: 0 auto 0 -475px;
}
#header #logo{
position: absolute;
float:left;
left: -157px;
}
#header #main-menu{float:right; padding-top:45px;}
#header #main-menu li{
float:left;
list-style:none;
margin-left:27px;
font: 400 16px/20px 'Open Sans Condensed', sans-serif;
color: #FFF;
}

HTML

<div id="header">
<div id="logo"><img src="images/logo-corners.png"></div>
<ul id="main-menu">
    <li><a href="#work">Portfolio</a></li>
    <li><a href="#about">About</a></li>
    <!--<li><a href="#experience">Experience</a></li> -->
    <li><a href="#connect">Contact</a></li>
  </ul>
</div>
4

1 に答える 1

0

私が行う方法は、ヘッダーの周りに固定位置のラッパーを追加することです（幅は100％）。次に、コンテンツに一致するようにヘッダーに固定幅を指定し、0 auto中央に配置するためのマージンを指定します。ロゴを左にフロートさせ、背景色をメニューul（右にフロート）に適用し、必要に応じて余白とパディングを設定して、使用可能なスペースの残りを占めるようにします。

ただし、メニューに表示されないようにするには、最上位のコンテンツdivに少しパディングを追加する必要があります。

于 2013-03-26T15:34:53.550 に答える