Stahl Florian: Bilder werden beim Laden verschoben

Hallo an alle,

ich habe ein kleines Problem, und würde mich freuen wenn ich hier Hilfe finde.

Ich habe unter diesem Link ein Feuerwehrfahrzeug gesetzt, bei welchem man Rolltore durch Daraufklicken öffnen kann. Dies habe ich mithilfe von JavaScript realisiert.

Die Bilder, welche beim Daraufklicken geladen werden, werden in verschiedenen Div´s mit CSS positioniert.

MEIN PROBLEM:
Wenn ich das ganze in Firefox angugge und anklicke, funktioniert alles bestens. Wenn ich dies jetzt aber im IE angugge und klicke, dann werden die Bilder welche beim Klicken auf die Rolltore geladen werden, nicht genau darüber angezeigt, sondern verschoben, was natürlich nicht sein sollte

Habe den Bereich als Beispiel mal im Quellcode so markiert:

<!--LF 8/6 LINKS A-------------------------------------->

Den Quellcode könnt ihr HIER als .txt Datei sehen.

Ich hoffe ihr könnt mir dabei helfen. Dankeschön schon mal im vorraus.

Mit freundlichen Grüssen
------------------------
Stahl Florian
------------------------

--
Was dich nicht umbringt macht dich nur härter
  1. was für Rolltore? ich sehe nur ein großes und ein paar kleinere Bilder eines Feuerwehrfahrzeugs.

    Um das große Bild gegen ein anderes auszutauschen brauchst du bloß das src-Attribut im img-Tag zu ändern. CSS ist dazu nicht nötig.

    Wenn übrigens wirklich etwas im IE als in anderen Browsern positioniert sein sollte (ich habe nichts dergleichen entdeckt) liegte s wohl daran, dass du den Browser mit der unvollständigen DOCTYPE-Declaration in den Quirksmodus schickst.

    Frohe Ostern

    1. Hallo an alle,

      was für Rolltore? ich sehe nur ein großes und ein paar kleinere Bilder eines Feuerwehrfahrzeugs.

      Sorry! Habe ich wohl nicht so gut beschrieben. Dazu musst du auf die kleinen Bilder klicken um das Fahrzeug von der Seite zu sehen.

      Um das große Bild gegen ein anderes auszutauschen brauchst du bloß das src-Attribut im img-Tag zu ändern. CSS ist dazu nicht nötig.

      Das funktioniert.

      Wenn übrigens wirklich etwas im IE als in anderen Browsern positioniert sein sollte (ich habe nichts dergleichen entdeckt) liegte s wohl daran, dass du den Browser mit der unvollständigen DOCTYPE-Declaration in den Quirksmodus schickst.

      Aso. Dann gugg ich da mal nach und melde mich nochmal.

      Frohe Ostern

      Wünsche ich das gleiche, dankeschön!!

      Mit freundlichen Grüssen
      ------------------------
      Stahl Florian
      ------------------------

      --
      Was dich nicht umbringt macht dich nur härter
      1. Hallo an alle,

        bin leider nocht nicht weitergekommen, auch wenn ich im HTML-Kopf

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> schreibe, ändert sich im IE nichts.

        Mit freundlichen Grüssen
        ------------------------
        Stahl Florian
        ------------------------

        --
        Was dich nicht umbringt macht dich nur härter
        1. Hallo Stahl Florian,

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          Genau dies ist eine zulässige, aber unvollständige DOCTYPE-Declaration, die den IE in den Quirksmodus schickst, wie auch das Weglassen.

          Dokumenttyp-Deklaration

          Auf Wiederlesen
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          1. Hallo Detlef,

            Genau dies ist eine zulässige, aber unvollständige DOCTYPE-Declaration, die den IE in den Quirksmodus schickst, wie auch das Weglassen.

            Also wäre folgendes korrekt:?
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">

            Mit freundlichen Grüssen
            ------------------------
            Stahl Florian
            ------------------------

            --
            Was dich nicht umbringt macht dich nur härter
            1. @@Stahl Florian:

              Also wäre folgendes korrekt:?
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">

              Nein, da dein Quelltext nicht den Regeln von HTML 4.01 Strict entspricht.
              Du solltest nicht einfach irgendwo "HTML 4.01 Strict" draufschreiben, wo kein HTML 4.01 Strict drin ist, vgl. [</archiv/2008/3/t168169/#m1097170>]

              Den passenden System Identifier (URI) für HTML 4.01 Transitional hast du ja scheinbar inzwischen herausgefunden.

              Deine Kommentare solltest du aber unbedingt noch berichtigen: „Autoren sollten vermeiden, zwei oder mehr aufeinanderfolgende Bindestriche innerhalb von Kommentaren zu schreiben.“ [HTML401 §3.2.4]

              Live long and prosper,
              Gunnar

              --
              „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
              1. Hallo Gunnar,

                Nein, da dein Quelltext nicht den Regeln von HTML 4.01 Strict entspricht.
                Du solltest nicht einfach irgendwo "HTML 4.01 Strict" draufschreiben, wo kein HTML 4.01 Strict drin ist, vgl. [</archiv/2008/3/t168169/#m1097170>]

                Habe es jetzt so abgeändert und mit dem Validator geprüft:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">

                => Passt

                Den passenden System Identifier (URI) für HTML 4.01 Transitional hast du ja scheinbar inzwischen herausgefunden.

                Jop

                Deine Kommentare solltest du aber unbedingt noch berichtigen: „Autoren sollten vermeiden, zwei oder mehr aufeinanderfolgende Bindestriche innerhalb von Kommentaren zu schreiben.“ [HTML401 §3.2.4]

                Habe ich nun auch gemacht. War ja nur der eine.

                Dankeschön für die bisherige Hilfe, nur hat sich an meinem Hauptproblem auch durch diese Änderungen noch nichts geändert. Weis hier vll. noch jemand Rat?

                Mit freundlichen Grüssen
                ------------------------
                Stahl Florian
                ------------------------

                --
                Was dich nicht umbringt macht dich nur härter
                1. Hallo an alle,

                  habe mein Problem mit folgendem gelöst:

                  <!--[if IE]>
                      <style type="text/css">@import url(layoutIE.css);</style>
                    <![endif]-->

                  Sobald die Seite mit dem IE geöffnet wird, wird die layoutIE.css geladen. Hier habe ich die Werte angepasst und es funktioniert alles.

                  Mit freundlichen Grüssen
                  ------------------------
                  Stahl Florian
                  ------------------------

                  --
                  Was dich nicht umbringt macht dich nur härter
  2. Hallo Stahl Florian

    Die Bilder, welche beim Daraufklicken geladen werden, werden in verschiedenen Div´s mit CSS positioniert.

    Sind die verschiedenen Divs wirklich nötig?
    Könntest du nicht _alle_ Bilder deren Position voneinander direkt abhängt in dasselbe Element einfügen und positionieren. Damit dürften sich dann kaum Abweichungen untereinander ergeben.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. Hallo Detlef,

      Sind die verschiedenen Divs wirklich nötig?
      Könntest du nicht _alle_ Bilder deren Position voneinander direkt abhängt in dasselbe Element einfügen und positionieren. Damit dürften sich dann kaum Abweichungen untereinander ergeben.

      Das Problem ist, ich habe von JavaScript eig. so gut wie keine Ahnung. Diesen Quellcode habe ich mir aus diversen Schnipseln selbst zusammengebaut.

      Also kann ich dir auch nicht sagen, wie bzw. ob dein Lösungsvorschlag funktioniert.

      Ist es vll. möglich, dass ich an dem CSS etwas ändern kann?

      Mit freundlichen Grüssen
      ------------------------
      Stahl Florian
      ------------------------

      --
      Was dich nicht umbringt macht dich nur härter
  3. Schau dir doch einfach mal hier bei images.src an, wie einfach ein Bild gegen ein anderes ausgetauscht werden kann.

    Ohne einen derartig aufgeblähten Quellcode.

    1. Hallo noscript,

      Schau dir doch einfach mal hier bei images.src an, wie einfach ein Bild gegen ein anderes ausgetauscht werden kann.

      Hierbei sehe ich folgende Problem:

      • Das dies hier ja alles automatisch funktioniert und nicht auf klick
      • Hier wird ja jedes mal ein neues Bild geladen. Bei meinem Code wird ja nur ein Ausschnitt eines anderen Bildes geladen. => Sehr geringe Datenmenge!

      Ohne einen derartig aufgeblähten Quellcode.

      Was ich daran noch ändern möchte: Das CSS in eine extra Datei schreiben.

      Mit freundlichen Grüssen
      ------------------------
      Stahl Florian
      ------------------------

      --
      Was dich nicht umbringt macht dich nur härter
  4. Hallo,

    Ich habe unter diesem Link ein Feuerwehrfahrzeug gesetzt, bei welchem man Rolltore durch Daraufklicken öffnen kann. Dies habe ich mithilfe von JavaScript realisiert.

    ... eine nette Idee - aber da lässt sich noch mehr draus machen. Und die Konstruktion ist auch ganz einfach: nimm ein paar um das <img> geschachtelte <div>s. Jedem div kannst du ein Hintergrundbild geben und hast so eine mehrschichtige Struktur.

    oberste Schicht ein Bild mit transparenter Rolladenfach
    nächste Schicht Rolladenausschnitt, positioniert unter der Rolladenfach
    unterste Schicht Bild mit geöffnetem Fach.

    per Animation kannst du nun den Rolladen hoch oder runterschieben und mehr oder weniger vom Innenleben des Fahrzeugs wird sichtbar. (Position des Hintergrundbildes der mittleren Schicht verändern)

    http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=css/eigenschaften/hintergrund.htm#background_position

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    1. Hallo an alle,

      ... eine nette Idee - aber da lässt sich noch mehr draus machen. Und die Konstruktion ist auch ganz einfach: nimm ein paar um das <img> geschachtelte <div>s. Jedem div kannst du ein Hintergrundbild geben und hast so eine mehrschichtige Struktur.

      die Idee find ich klasse.

      per Animation kannst du nun den Rolladen hoch oder runterschieben und mehr oder weniger vom Innenleben des Fahrzeugs wird sichtbar. (Position des Hintergrundbildes der mittleren Schicht verändern)

      wie soll ich dass den dann animieren, dass ich das bild verschieben kann?

      Mit freundlichen Grüssen
      ------------------------
      Stahl Florian
      ------------------------

      --
      Was dich nicht umbringt macht dich nur härter
      1. Hallo,

        per Animation ...  (Position des Hintergrundbildes der mittleren Schicht verändern)

        wie soll ich dass den dann animieren, dass ich das bild verschieben kann?

        ... naja, etwas aufwendiger als in diesem Beispiel ist es schon.

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·