Ergebnis 1 bis 6 von 6

Thema: Bilder verschieben sich bei unterschiedlichen Auflösungen

  1. #1
    HTML Newbie
    Registriert seit
    21.02.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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: 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;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai
    Registriert seit
    25.03.2008
    Ort
    Leverkusen
    Alter
    25
    Beiträge
    228
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder verschieben sich bei unterschiedlichen Auflösungen

    Das liegt daran, dass du das Logo absolut positioniert hast.
    Welche Referenzen sind gemeint?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    21.02.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder verschieben sich bei unterschiedlichen Auflösungen

    wie kann ich das ändern?

    diese hier
    http://mein44.de/textilien.html

  4. #4
    Samurai
    Registriert seit
    25.03.2008
    Ort
    Leverkusen
    Alter
    25
    Beiträge
    228
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder verschieben sich bei unterschiedlichen Auflösungen

    Du verwendest Inline-CSS, allerdings solltest du CSS besser extern einfügen.
    In index.html findest du zB.:
    HTML-Code:
    <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-Code:
    <img style="width: 300px; height: 300px; position: absolute; top: 529px; left: 190px;" alt="" src="images/Shirt1.png" /><br />
    LG,
    Krusty

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    21.02.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder verschieben sich bei unterschiedlichen Auflösungen

    danke dir, wenn du mir jetzt noch sagst wie ich das ändern muss das es passt bist du mein absoluter Held

  6. #6
    Samurai
    Registriert seit
    25.03.2008
    Ort
    Leverkusen
    Alter
    25
    Beiträge
    228
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bilder verschieben sich bei unterschiedlichen Auflösungen

    Du löschst beim Logo folgende CSS-Werte (manche sind im externen Stylesheet und manche sind direkt in der HTML-Datei zu finden):
    HTML-Code:
    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!

Ähnliche Themen

  1. Bilder verschieben sich
    Von Schnitte im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.03.2006, 05:30
  2. Verschieben des textes bei versch. Auflösungen
    Von dypor im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 09.01.2006, 20:21
  3. Tabellen verschieben sich
    Von Roland im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 09.11.2005, 19:31
  4. Bilder Verschieben
    Von groupdestiny im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 29.08.2005, 20:48
  5. Antworten: 3
    Letzter Beitrag: 17.03.2004, 13:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •