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

max · 16. September 2006

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

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...

Maik · 17. September 2006

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>

max · 17. September 2006

Super danke, hat bestens funktioniert!

... und auch noch eine Antwort zu so früher Stunde am Sonntag ;-)

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

max

Erfahrenes Mitglied

Maik

max

Erfahrenes Mitglied

Neue Beiträge