Bilder verschieben sich bei unterschiedlichen Auflösungen

    Hallo an die Gemeinde. Ich komme bei meiner Seite einfach nicht weiter. Die eingefügte Bilder verschieben sich bei unterschiedlichen Auflösungen unschön.
    Hier erstmal die Seite: http://www.mein44.de

    Bei mir mit einer Auflösung von 1366x768 sieht es genau so aus wie es auch sein soll.
    Bei meinem Arbeitskollegen jedoch mit höhrer Auflösung steht das Logo oben ab und bei den Referenzen sind die Bilder auch unsyncron zum Text.

    Hab schon etliches versucht im styles.css, mit prozentangaben usw aber da ich in dem Thema ein Laie bin hab ich es leider nicht gelöst bekommen.

    ich hoffe ihr könnt mir hier helfen...

    hier noch der inhalt der Styles.css datei:

    /* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */

    * { margin: 0px;
    padding: 0px;
    }

    img, fieldset { border: medium none ;
    margin: 0px;
    padding: 0px;
    line-height: 0px;
    }

    a { color: rgb(102, 102, 102);
    text-decoration: none;
    font-weight: bold;
    }

    a:hover { text-decoration: none;
    color: rgb(0, 0, 0);
    }

    body { background: rgb(211, 211, 211) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    color: rgb(66, 66, 66);
    }

    .clear { clear: both;
    }

    h2 { font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 24px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    font-weight: normal;
    color: rgb(205, 116, 19);
    }

    h6 { background: transparent url(images/bor_goriz.gif) repeat-x scroll center bottom;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 16px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    color: rgb(205, 116, 19);
    font-weight: normal;
    padding-bottom: 5px;
    margin-bottom: 10px;
    }

    .read { padding-top: 5px;
    text-align: right;
    }

    #wrap { margin: 0pt auto;
    width: 1033px;
    }

    #logo { padding: 27px 0pt 0pt 17px;
    width: 381px;
    height: 81px;
    float: left;
    }

    #logo h1 a { font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 18px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    color: rgb(66, 66, 66);
    font-weight: bold;
    text-decoration: none;
    }

    #logo a small { font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 14px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    color: rgb(66, 66, 66);
    font-weight: normal;
    text-decoration: none;
    }

    #menu { background: transparent url(images/menu_bg.jpg) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 632px;
    height: 56px;
    float: right;
    margin-top: 30px;
    }

    #menu ul { padding: 4px 0pt 0pt;
    width: 616px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    }

    #menu ul li { display: inline;
    }

    #menu ul li a { background: transparent url(images/menu_bor.jpg) no-repeat scroll left center;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    color: rgb(66, 66, 66);
    text-align: center;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
    width: 20%;
    height: 40px;
    line-height: 40px;
    }

    #menu .first { background: transparent none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    }

    #menu ul li a:hover, #menu ul li .active { color: rgb(255, 0, 0);
    }

    #prew_box { }

    #prew_box img { display: block;
    }

    #prew_bg { padding: 10px;
    background: transparent url(images/prew_bg.jpg) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 1013px;
    height: 290px;
    }

    #prew_but { padding: 15px 0px;
    height: 16px;
    }

    #prew_but ul { margin: 0pt auto;
    padding-left: 0px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    width: 110px;
    }

    #prew_but ul li { display: inline;
    }

    #prew_but ul li a { background: transparent url(images/prew_but.png) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    text-decoration: none;
    display: block;
    float: left;
    width: 17px;
    height: 16px;
    margin-right: 5px;
    }

    #prew_but ul li a:hover, #prew_but ul li .active { background: transparent url(images/prew_but_active.png) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    }

    #read_box { background: transparent url(images/read_more_bg.jpg) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    height: 82px;
    }

    .read_left { width: 780px;
    padding-left: 20px;
    float: left;
    }

    .read_left p { font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 18px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    font-weight: normal;
    color: rgb(66, 66, 66);
    padding-top: 18px;
    }

    .read_box_read { background: transparent url(images/read_more_button.jpg) no-repeat scroll left top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 183px;
    height: 44px;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 18px;
    font-size-adjust: none;
    font-stretch: normal;
    color: rgb(66, 66, 66);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 44px;
    float: right;
    margin-right: 8px;
    margin-top: 20px;
    }

    #content_bg { background: transparent url(images/bor_vertical.gif) repeat-y scroll 576px 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    margin-top: 20px;
    }

    #content { background: transparent url(images/bor_goriz.gif) repeat-x scroll center bottom;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    margin-bottom: 10px;
    }

    #content a { color: rgb(205, 116, 19);
    font-weight: bold;
    }

    #content a:hover { color: rgb(66, 66, 66);
    }

    #content_left { width: 557px;
    padding-right: 20px;
    float: left;
    padding-bottom: 10px;
    }

    #content_left h2 { padding-bottom: 10px;
    }

    #content_left p { line-height: 18px;
    }

    #content_left img { padding-right: 20px;
    float: left;
    }

    .left_col1 { float: left;
    width: 50%;
    }

    .left_col1 p { padding-right: 10px;
    line-height: 18px;
    }

    .left_col2 { float: right;
    width: 50%;
    }

    .left_col2 ul { list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    padding-left: 0px;
    }

    .left_col2 ul li { background: transparent url(images/ls.gif) no-repeat scroll left center;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    margin-bottom: 10px;
    padding-left: 15px;
    }

    #content_right { width: 456px;
    float: right;
    padding-bottom: 10px;
    }

    #content_right h2 { text-align: center;
    }

    .content_right_pad { padding: 20px 5px 0px 10px;
    }

    .news { padding-bottom: 10px;
    }

    .news img { padding-right: 10px;
    padding-bottom: 5px;
    float: left;
    }

    .date { display: block;
    font-weight: bold;
    padding-bottom: 10px;
    }

    .bor_goriz { background: transparent url(images/bor_goriz.gif) repeat-x scroll center top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    height: 2px;
    }

    #column3 { padding: 0px 10px 15px;
    clear: both;
    }

    #col1, #col2, #col3 { float: left;
    width: 285px;
    }

    #col2 { padding-left: 79px;
    padding-right: 79px;
    }

    .pad_left { padding-left: 20px;
    margin-bottom: 5px;
    }

    .ls { list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    }

    .ls li { border-bottom: 1px solid rgb(181, 181, 181);
    padding-top: 3px;
    }

    .ls li a { color: rgb(205, 116, 19);
    font-size: 11px;
    font-weight: normal;
    text-transform: uppercase;
    }

    .ls li a:hover { color: rgb(120, 63, 1);
    }

    #col1 .ls { padding-top: 20px;
    }

    #col1 .ls li a { font-size: 12px;
    text-transform: none;
    }

    #footer_bot { background: transparent url(images/bor_goriz.gif) repeat-x scroll center top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    padding-top: 5px;
    padding-bottom: 10px;
    }

    #footer_text { width: 480px;
    text-align: left;
    float: left;
    }

    #footer_text p, #footer_text a { font-family: Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size-adjust: none;
    font-stretch: normal;
    font-size: 11px;
    color: rgb(66, 66, 66);
    font-weight: normal;
    line-height: 20px;
    }

    .footer_img { float: right;
    padding-top: 5px;
    padding-right: 13px;
    }

    .footer_img img { padding-right: 4px;
    }

    .item { width: 1013px;
    height: 289px;
    }

    .item img { float: left;
    }

    .item h2 { border: medium none ;
    margin-bottom: 15px;
    }

    .scrollable { position: relative;
    overflow: hidden;
    width: 1013px;
    height: 300px;
    }

    .scrollable .items { width: 20000em;
    position: absolute;
    }

    .scrollable .items div { float: left;
    }

    .scrollable .items .item { overflow: hidden;
    }

    .scrollable .items .item p { line-height: 16px;
    }

    .navi { margin: 15px 0pt;
    width: auto;
    height: 20px;
    padding-left: 460px;
    }

    .navi a { margin: 0pt 0pt 10px 3px;
    background: transparent url(images/prew_but.png) no-repeat scroll center top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    width: 24px;
    cursor: pointer;
    height: 22px;
    float: left;
    display: block;
    font-size: 1px;
    }

    .navi a:hover, .navi a.active { margin: 0pt 0pt 0pt 3px;
    background: transparent url(images/prew_but_active.png) no-repeat scroll center top;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    }

    .header1 { width: 972px;
    height: 300px;
    }

    .header2 { width: 972px;
    height: 300px;
    }

    .header3 { width: 972px;
    height: 300px;
    }

    .header4 { width: 972px;
    height: 300px;
    }

    div.pp_overlay { background: rgb(0, 0, 0) none repeat scroll 0% 50%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    display: none;
    left: 0pt;
    position: absolute;
    top: 0pt;
    width: 100%;
    z-index: 9500;
    }

    div.pp_pic_holder { display: none;
    position: absolute;
    width: 100px;
    z-index: 10000;
    }

    Du verwendest Inline-CSS, allerdings solltest du CSS besser extern einfügen.
    In index.html findest du zB.:

    HTML
    <a href="index.html"><img style="border: 0px solid ; position: absolute; top: 11px; left: 152px; width: 285px; height: 106px;" alt="" src="images/logomitadresse.png" /></a>

    Die absolute Positionierung und die left/right-Angaben sind für die Verschiebung veranwortlich.

    Auch bei der Referenzen-Seite, also textilien.html, sind die Bilder absolut positioniert:

    HTML
    <img style="width: 300px; height: 300px; position: absolute; top: 529px; left: 190px;" alt="" src="images/Shirt1.png" /><br />

    LG,
    Krusty

    Du löschst beim Logo folgende CSS-Werte (manche sind im externen Stylesheet und manche sind direkt in der HTML-Datei zu finden):

    HTML
    position: absolute;
top: 11px; 
left: 152px; 
width: 285px; 
height: 81px;
padding: 27px 0 0 17px;

    Bei den Referenzen solltest du am besten mit Listen (Stichwort: display:inline; ;)) arbeiten, der aktuelle Code ist kaum zu gebrauchen. Ich habe momentan aber leider keine Zeit, dir einen Codeentwurf zu erstellen. Versuche es mal und bei Fragen frag! :)