0

かなり深刻な問題が発生しました。

背景のヘッダーがあり、左右で端が異なります。ヘッダー、コンテンツ、およびそれらを囲むラッパーはすべて 1065px 幅です。

ヘッダー グラフィックに続くグラフィックを保持する別の「background_wrapper」を作成しました。ヘッダーグラフィックと同じ幅の左右の異なる端と空のスペースが特徴です。ブラウザー ウィンドウが 100% 幅 (PC 画面上) の場合と同様に、ヘッダー グラフィックの最後に配置する必要があります。ただし、サイズを変更すると、どんどん小さくなります (毎回 100% で) ため、ヘッダーの後ろに移動します。

ここにアップロードしました: http://bf3zone.bplaced.net/Coding/

それのための私のコード:

    <body>
<div id="background_addition">
<div id="wrapper" class="clearfix">
    <div id="header">
        <div id="logo">
            <a href="index.html" title="M3 Institut - Zurück zum Start">
                <img src="images/logo_hover.png" alt="M3 Institut - Menschen machen Märkte" class="b" />
                <img src="images/logo.png" alt="" class="a" />
            </a>
        </div>
        <ul class="nav">
            <li><a href="index.html" title="Start" class="current_page_item">Start</a></li>
            <li><a href="">Tab 1</a></li>
            <li><a href="">Tab 2</a></li>
            <li><a href="">Tab 3</a></li>
            <li><a href="">Tab 4</a></li>
            <li><a href="">Tab 5</a></li>
            <li><a href="">Tab 6</a></li>
            <li><a href="">Blog</a></li>
        </ul>
    </div>

本文/ヘッダー/ラッパーを含むすべてのもののCSS:

    * {
    margin:0;
    padding:0;
    } 

html, body {
    display: block; 
    background: url(images/background.jpg) repeat-x; 
    font: normal 100% Arial, sans-serif; /* 16px */ 
    line-height: 140%;
    color: #464646; 
    clear: both; 
    }

html, body, #wrapper {
    height: 100%;
    margin: 0 auto;
    }

body > #wrapper {
    height: auto; 
    min-height: 100%;
    }

#wrapper {
    width: 1065px;
    }

#background_addition {
background: url(images/wrapper.png) no-repeat center top;
}

#header {
width: 1065px;
height: 193px;
background: url(images/header_background.png) no-repeat top left;
}
4

1 に答える 1