0

ヘッダーを作成していますが、ボディの幅全体を占める必要があります。width: 100%;ヘッダーを試してみましたdivが、まだ両側に空白がありました。左に移動して幅を 100% 以上にしようとしましたが、水平スクロール バーを追加しただけで、右にスクロールすると右側に空白が残ります。

HTML:

<div id="header">
      <img id="logo" src="images/logo.png" alt="">
      <div id="nav">
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="gallery.html">Gallery</a>
            <a href="contact.html">Contact</a>
      </div>
 </div>

CSS:

#header {
    position: relative;
    left: -9px;
    bottom: 8px;
    padding-top: 5px;
    padding-bottom: 5px; 
    background: url(images/dark_dotted.png);
    width: 105%;
    text-align: center;
    border-bottom: 4px orange solid;
}

#header #logo {
    padding-right: 700px;   
}

#nav {
    position: relative;
    bottom: 30px;   
    font-size: 28px;
    right: -300px;
    font-family: roboto;
}
4

4 に答える 4

1

まず、このようにボディのcssをリセットします

body
{
margin:0;
padding:0;
}

これにより、divの両側からその空白が削除されます

于 2013-02-28T18:48:52.920 に答える
1

問題は、あなた<div id="nav">がそれを持ってright: -300px;いることです（おそらくtext-align: center;ヘッダーのを打ち消すためです。あなたのサイトの要件がわからないので、次のようにすることをお勧めします：

body {
    margin: 0;
    padding: 0;
}
#header {
    background: url("images/dark_dotted.png") repeat scroll 0 0 transparent;
    border-bottom: 4px solid orange;
    height: 150px;
    padding: 5px 0;
    width: 100%;
}
#header #logo {
    float: left;
    margin: 20px 0 0 100px;
}
#nav {
    float: right;
    font-family: roboto;
    font-size: 28px;
    margin: 90px 30px 0 0;
}

これはフロートを使用して div を配置しますが、コンテナーのサイズを計算するときにフロートが考慮されないため、ヘッダーの高さを指定する必要があります。

于 2013-02-28T18:57:45.900 に答える
0 
html, body
{
margin:0;
padding:0;
}

これにより、すべてがビューポートに収まります (コンテンツが絶対配置、負のマージンで拡張されない限り)。

アイテムに大量のパディングがあります (ロゴに 700)。これらを削除するか、はるかに小さくすることを検討してください。

ヘッダーの幅は 100% にする必要があります。

ピクセルや相対位置で動かそうとするのではなく、パディングとマージンを使用して静的 (デフォルト) の位置と制御を使用することをお勧めします。

ホーム 会社概要 ギャラリー お問い合わせ

CSS:

#header {
background: url(images/dark_dotted.png);
width: 100%;
text-align: center;
border-bottom: 4px orange solid;
}

#nav {
position: relative;
bottom: 30px;   
font-size: 28px;
float:right;
font-family: roboto; //this should be extended.. 'Robosto', serif (or appropriate type)
}

align="center"これは、HTMLを使用していないことを前提としています。margin:autoより効率的に水平方向にセンタリングできます。

于 2013-02-28T19:00:19.243 に答える
0

問題は、id nav の div にあります。

幅が 1,000 ピクセルを超えており、ページの端からはみ出しています。

（ナビで）試してください：

margin:0;
padding:0;
width:100%;
max-width:100%;

より詳しい情報：

nav ID の私のブラウザの計算された css:

bottom: 30px;
display: block;
font-family: roboto;
font-size: 28px;
height: 37px;
position: relative;
right: -300px;
text-align: center;
width: 1326.140625px;

ご覧のとおり、幅はチャートから外れています。100% の固定値を割り当ててみてください。

于 2013-02-28T18:46:38.997 に答える