✔ Zentriertes Layout - Hintergrundbild im Header verschiebt sich je nach Auflösung

Status
Nicht offen für weitere Antworten.
max

max

Erfahrenes Mitglied
Ich baue gerade die Struktur für eine Webseite auf. Das Ganze ist ein zentriertes Layout und jetzt mein Problem:
Ich habe im Headbereich der Sidebar ein Hintergrundbild, welches eigentlich genau rein passen würde, jetzt ist es aber so dass wenn ich das Browserfenster in die Breite ziehe verschiebt sich das ganze je nach Auflösung um 1 (Firefox) oder 2 (IE) Pixel.

Hab schon einies Proberiert leider steh ich da momentan total an und wäre um eure Hilfe wircklich sehr dankbar.

Link zur Seite: http://www.sk-bischofshofen.at/aufbau_neu.htm

Hier noch en Bild des Fehlers
26127attachment.jpg

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SK Bischofshofen</title>
<script type="text/javascript" src="lib/js/swfobject.js"></script>
<script type="text/javascript" src="lib/js/js_functions.js"></script>
<style type="text/css">
<!--

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%; /* Required */
}

body {
    background-color: #fff;
    background-image: url(img/layout/main_bg_linie.gif);
    background-repeat: repeat;
    color: #333;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;    
}
a {
    color:#000000;
    text-decoration:none;
}
a:hover {
    color:#000000;
    text-decoration:underline;
}
p {
    display:inline;
}
img {
    border:0;
}
#content table {
    border-collapse:collapse;
}

#page_container {
    background-image: url(img/layout/bg_content.jpg);
    background-repeat: repeat-y;
    background-position: center;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    margin: 0;
}

#main_box {
    text-align: left;
    margin: 0 auto 30px auto;
    width: 915px;
}
#main_box:after {
  clear: both;
  display: block;
  content: ".";
  height: 0;
  visibility: hidden;
}


#content_table {
    width: 915px;
    margin-bottom: 30px;
}

#content_table #sidebar {
    width: 251px;
    padding-right: 40px;
    text-align: left;
    background-image: url(img/layout/head_re.jpg);
    background-repeat: no-repeat;
    background-position: top right;
}


#container_foot {
    width: 100%;
    position: absolute;
    bottom: 0 !important;
    bottom: -1px; /* For Certain IE widths */
    height: 19px;
    margin-bottom: 10px;
}
#foot {
    width: 882px;
    margin: 0 auto 0 auto;
    line-height: 19px;
    background-image: url(img/layout/footer_ecke.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #181f13;
    padding-left: 8px;
    color: #fff;
}
#foot a {
    color: #fff;
    text-decoration: none;
}
#foot a:hover {
    text-decoration: underline;
}

#flash_navigation {
    text-align: right;
}
#flash_header, #fl_header {
    text-align: left;
    margin-left: 0px;
}

#head_bg {
    background-image: url(img/layout/bg_head_verlauf.jpg);
    background-position: top;
    background-repeat: repeat-x;
}


-->
</style>
</head>

<body>
<div id="page_container">
<div id="head_bg">
    <div id="main_box">
      <table border="0" cellspacing="0" cellpadding="0" id="content_table">
        <tr>
          <td valign="top">
            <div id="flash_header">Header</div>
            <script type="text/javascript">
            // <![CDATA[
                var header = new SWFObject("flash/header.swf", "fl_header", "624", "275", "7", "#fff");
                //header.addParam("FlashVars","&query_string=&");
                header.write("flash_header");
            // ]]>
            </script>
            <div id="flash_navigation" align="right">Navigation</div>
            <script type="text/javascript">
            // <![CDATA[
                var navigation = new SWFObject("flash/navi.swf", "fl_navigation", "617", "180", "7", "#fff");
                navigation.addParam("WMODE","transparent");
                navigation.write("flash_navigation");
            // ]]>
            </script>
          </td>
          <td id="sidebar">
              <div id="flash_sidebar">Sidebar</div>
            <script type="text/javascript">
            // <![CDATA[
                var sidebar = new SWFObject("flash/sidebar.swf", "fl_sidebar", "251", "818", "7", "#fff");
                sidebar.write("flash_sidebar");
            // ]]>
            </script>
          </td>
        </tr>
      </table>
    </div>
    <div id="container_foot">
        <div id="foot">SK CASINO BISCHOFSHOFEN · Sportplatzstraße 15a · A-5500 Bischofshofen · Telefon + Fax: +43 (0)6462 / 23 25 · e-Mail: <a href="mailto:info@sk-bischofshofen.at">info@sk-bischofshofen.at</a></div>
    </div>
</div>
</div>
</body>

</html>
Danke...
 
Da die Hintergrundgrafik bg_content.jpg 916 Pixel breit ist, schlage ich Dir folgende Änderungen im CSS- und HTML-Code vor:

Code: 
#page_container {
        background-image: url(img/layout/bg_content.jpg);
        background-repeat: repeat-y;
        /*background-position: center;*/ /* auskommentiert = deaktiviert */
        min-height: 100%;
        height: auto !important;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -458px;
        width: 916px; /* anstelle von width:100% */
        z-index: 2;
}

#main_box {
        text-align: left;
        margin: 0 auto 30px auto;
        width: 916px; /* anstelle von 915px */
}


#content_table {
        width: 916px; /* anstelle von 915px */
        margin-bottom: 30px;
}

#head_bg {
        background-image: url(img/layout/bg_head_verlauf.jpg);
        background-position: top;
        background-repeat: repeat-x;
        width: 100%;
        height: 162px;
        position: relative;
        z-index: 1;
}
HTML: 
<body>
    <div id="head_bg"></div>
    <div id="page_container">
     ...
    </div>
</body>
 
Super danke, hat bestens funktioniert!

... und auch noch eine Antwort zu so früher Stunde am Sonntag ;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück