Beiträge von mrs. sabe

mrs. sabe

Rahmenbedingungen
HTML-Version: 4.01 Transitional
Browser & Betriebssystem: Chrome, Safari, Firefox, Opera, IE
Editor: CoffeeCup HTML Editor

Problembeschreibung
Mein Ziel: 2 Puzzleteile fallen nacheinander und nebeneinander vom oberen Bildrand ein. (Flash fällt daher als Option weg.)
Link zur Seite: http://www.sabrinack.ch/animation-puzzleNeu.html
Fehlermeldung/-beschreibung: Puzzleteile nicht nebeneinander.
bisherige Lösungsversuche: Gegoogelt, gegoogelt, gegoogelt. OK gebe zu, der Code ist gebastelt, mache sowas zum 1. Mal und habe mir diesen aus verschiedenen Tutorials zusammengebastelt.
Code:

HTML

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




<HEAD>
    <STYLE TYPE="text/css">
    @-moz-keyframes puzzle1-moz {
        0% {
            padding-left: 40%;
            padding-top: 0px
        }
        50% {
            padding-left: 40%;
            padding-top: 40%;
        }
        100% {
            padding-left: 40%;
            padding-top: 8%;
        }
    }
    @-ie-keyframes puzzle1-ie {
        0% {
            padding-left: 40%; 
            padding-top: 0px
        }
        50% {
        	padding-left: 40%; 
        	padding-top: 20%;
        }
        100% {
        	padding-left: 40%; 
        	padding-top: 8%;
        } 
    } 




    /* Animation Puzzle2 */
    @-moz-keyframes puzzle2-moz {
        0% {
            padding-left: 42%;
            padding-top: 0px
        }
        50% {
            padding-left: 42%;
            padding-top: 35%;
        }
        100% {
            padding-left: 42%;
            padding-top: 19%;
        }
    }
    @-webkit-keyframes puzzle2-webkit {
        0% {
            padding-left: 42%;
            padding-top: 0px
        }
        50% {
            padding-left: 42%;
            padding-top: 35%;
        }
        100% {
            padding-left: 42%;
            padding-top: 19%;
        }
    }
    @-o-keyframes puzzle2-o {
        0% {
            padding-left: 42%;
            padding-top: 0px
        }
        50% {
            padding-left: 42%;
            padding-top: 35%;
        }
        100% {
            padding-left: 42%;
            padding-top: 19%;
        }
    }
    @-ie-keyframes puzzle2-ie {
        0% {
            padding-left: 42%;
            padding-top: 0px
        }
        50% {
            padding-left: 42%;
            padding-top: 35%;
        }
        100% {
            padding-left: 42%;
            padding-top: 19%;
        }
    }
    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    .left {
        float: left;
        width: 35%;
        margin-left: 60%;
        border: 1px;
    }
    .puzzleteil1 {
        margin-top: 0px;
        padding: 0px;
        float: left;
        -moz-animation-name: puzzle1-moz;
        -moz-animation-duration: 1s;
        -moz-animation-delay: 3ms;
        -moz-animation-timing-function: ease-out;
        -moz-animation-fill-mode: forwards;
    }
    .puzzleteil1 {
        margin: 0px;
        padding: 0px;
        float: left;
        -webkit-animation-name: puzzle1-webkit;
        -webkit-animation-duration: 1s;
        -webkit-animation-delay: 3ms;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-fill-mode: forwards;
    }
    .puzzleteil1 {
        margin: 0px;
        padding: 0px;
        float: left;
        -o-animation-name: puzzle1-o;
        -o-animation-duration: 1s;
        -o-animation-delay: 3ms;
        -o-animation-timing-function: ease-out;
        -o-animation-fill-mode: forwards;
    }
    .puzzleteil1 {
        margin: 0px;
        padding: 0px;
        float: left;
        -ie-animation-name: puzzle1-ie;
        -ie-animation-duration: 1s;
        -ie-animation-delay: 3ms;
        -ie-animation-timing-function: ease-out;
        -ie-animation-fill-mode: forwards;
    }
    /* Animation Puzzle 2 */            
    .puzzleteil2 {
        margin: 0px;
        padding: 0px;
        float: left;
        -moz-animation-name: puzzle2-moz;
        -moz-animation-duration: 1s;
        -moz-animation-delay: 10ms;
        -moz-animation-timing-function: ease-out;
        -moz-animation-fill-mode: forwards;
    }
    .puzzleteil2 {
        margin: 0px;
        padding: 0px;
        float: left;
        -webkit-animation-name: puzzle2-webkit;
        -webkit-animation-duration: 1s;
        -webkit-animation-delay: 10ms;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-fill-mode: forwards;
    }
    .puzzleteil2 {
        margin: 0px;
        padding: 0px;
        float: left;
        -o-animation-name: puzzle2-o;
        -o-animation-duration: 1s;
        -o-animation-delay: 10ms;
        -o-animation-timing-function: ease-out;
        -o-animation-fill-mode: forwards;
    }
    .puzzleteil2 {
        margin: 0px;
        padding: 0px;
        float: left;
        -ie-animation-name: puzzle2-ie;
        -ie-animation-duration: 1s;
        -ie-animation-delay: 10ms;
        -ie-animation-timing-function: ease-out;
        -ie-animation-fill-mode: forwards;
    }
    .div {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    </STYLE>
    <TITLE></TITLE>
</HEAD>




<BODY>
    <DIV CLASS="clearfix left">
        <DIV CLASS="puzzleteil1">
            <IMG SRC="puzzleteil1-web.png" WIDTH="150" HEIGHT="151" ALT="Puzzleteil, welches von Oben herabfÃ¤llt." TITLE="Puzzleteil inLocation" BORDER="1">
        </DIV>
        <DIV CLASS="puzzleteil2">
            <IMG SRC="puzzleteil2-web.png" WIDTH="150" HEIGHT="151" ALT="Puzzleteil, welches von Oben herabfÃ¤llt." TITLE="Puzzleteil a&amp;o" BORDER="1">
        </DIV>
    </DIV>
</BODY>




</HTML>

Alles anzeigen