Simulation von drehenden Kacheln

[fredhermann]

Hallo,

ich möchte gerne auf meiner Webseite ein Kachel-Layout auf der Startseite haben. Dafür habe ich den Code dieser Webseite modifiziert. Wenn man mit der Maus drüber fährt, soll sich die Kachel drehen und später soll man das dann anklicken können um auf die jeweilige Seite zu gelangen. Auf der Vorderseite soll dabei nur ein farbiger Hintergrund und Text zu sehen sein, auf der Rückseite ist ein Bild. Die Drehung an sich bekomme ich in Firefox 27, Safari 5.1 und Opera 20 hin. Vom IE will ich nicht reden, da geht überhaupt nichts und der bleibt erstmal außen vor. Insgesamt sollen später 6 Kacheln erstellt werden (2 Reihen mit 3 Kacheln).

Die Kachelgröße soll sich dynamisch an die Bildschirmauflösung anpassen. Dafür soll die Kachelbreite 30% des Bildschirms einnehmen (s. CSS --> kachel1-bereich). Die Höhe des Bildes passt sich automatisch an. Die farbige Vorderseite mit dem Text soll natürlich genauso groß wie das Bild auf der Rückseite sein. Bisher macht er aber nur die Zeile mit dem Text bunt und nicht die ganze Kachel. Allerdings kann ich keine Höhe für den Hintergrund angeben, da diese ja sich aus dem Bild ableitet. Deshalb habe ich mir ein durchsichtiges Bild mit dem Bildformat der zukünftigen Bilder erstellt und eingefügt. Wenn ich dies einfüge, dann macht er mir in FF und Opera die ganze Kachel hübsch bunt und genauso groß wie das Bild. In Safari allerdings macht er eine ganz hohe Kachel daraus.

Weiterhin ist mir bei Safari aufgefallen, dass wenn ich dem kachel1-bereich keine Höhe und Breite zuweise, er Probleme hat das Skript auszuführen, da er den abgefragten Bereich nicht finden kann.

Wie kriege ich also die komplett farbige Kachel mit den dynamischen Abmaßen des Bildes hin und dem Kachelbereich ebenfalls die Bildgröße zugewiesen?

Ich habe das auch mal hochgeladen --> LINK Die linke Kachel ist mit dynamischen Größen (Problem: Kachel nicht gefüllt und Drehung funktioniert nicht in Safari) und die rechte mit statischen Abmaßen (funktioniert in allen 3 Browsern und soll am Ende auch so aussehen).

Vielen Dank und mit freundlichen Grüßen

FredHermann

HTML-Code

  
<div id="kachel1-bereich">  
  <div class="flip-container">  
    <div id="card1">  
      <div class="face front">  
        <div id="kachel1">  
          Test1  
        </div>  
      </div>  
      <div class="face back">  
        <img src="image/bild.jpg" alt="Bild" width="100%">  
      </div>  
    </div>  
  </div>  
</div>  

Java-Code für Drehung

  
$( "#kachel1-bereich" ).mouseenter(function() {  
  $("#card1").toggleClass('flipped');  
}).mouseleave(function() {  
  $("#card1").toggleClass('flipped');  
});  

CSS-Code

  
#kachel1-bereich {  
  width: 30%;  
  margin: 10px;  
  float:left;  
}  
	  
#kachel1 {  
  width: 100%;  
  text-align:center;  
  background-color: #0404B4;  
}  

[Matthias Apsel]

Om nah hoo pez nyeetz, fredhermann!

Wie kriege ich also die komplett farbige Kachel mit den dynamischen Abmaßen des Bildes hin und dem Kachelbereich ebenfalls die Bildgröße zugewiesen?

Ich würde es mit display: table-cell versuchen.

Matthias

[Auge]

Hallo

Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pol und Polizei.

Und dann entgeht dir DAS?:

Java-Code für Drehung

Unfassbar!!!1!!elf!1!

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pol und Polizei.

Und dann entgeht dir DAS?:

Mal Ruhepol, mal Forumspolizei.

Qapla'

[Auge]

Hallo

Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pol und Polizei.

Und dann entgeht dir DAS?:

Mal Ruhepol, mal Forumspolizei.

Wie's grad kommt und mir grad ist …

Aber DER von IHM? Das konnte ich mir nicht entgehen lassen. Steht ja nicht umsonst im Themenbereich „Menschelei“. :-)

Tschö, Auge