| 

.NET C# Java Javascript Exception

1
Hallo,

und zwar hab ich die alte Flash-Webseite eines Bekannten für ihn nachgebaut. Nun habe ich allerdings noch ein paar kleine Probleme. Hier erstmal ein extrahiertes Beispiel:

http://jsfiddle.net/ErJTM/2/

Auf der Linken Seite werden Logos angezeigt. Diese sollen nun allerdings nicht nur horizontal, sondern auch vertikal zentriert werden. Darüber hinaus wird der Rahmen der Liste beim Mouseover gedreht. Das Bild allerdings auch mit.

Wie kann ich nun also die Bilder zentrieren und zusätzlich dafür sorgen, dass diese nicht mit gedreht werden. Geht hier eventuell noch was mit CSS oder kann ich die selbe Liste nochmal nachbilden und die andere überlagern?

Ich hoffe auf eure Hilfe und bedanke mich im Voraus

PS Da ich nicht soo der HTML/CSS-Experte bin, könntet ihr mir eventuell noch Hinweise geben, was ich im Beispiel nicht so gut gemacht habe.
23.08.2013
MRae 259 1 7
MRae 259 1 7
2 Antworten
1
Ich hab da mal was vorbereitet: http://jsfiddle.net/hjUHv/

Vertikale zentrieren geht in der Konstellation nicht direkt (direkt wäre vertical-align: middle;) sondern nur durch margin-top (Abstand nach oben)

ul.list li img {
margin-top: 25px;
}

Da alle Größen in PX angegeben wurden, halte ich das aber für akzeptable.

Für die Animation muss der HTML-Code angepasst werden. Die Transformation bezieht sich auch auf alle Kind-Elemente des transformierten Elements. Damit der Rahmen unabhängig vom Bild gedreht werden kann, wird dafür ein eigenes, leeres, Element (<div class="border">) eingefügt.

Die Animation selbst wird dann über folgenden CSS-Code definiert:
/* Animation beim hover/mouseover */
.border:hover {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/* rahmen */
.border {
position: absolute;
border:1px solid #555;
height:82px;
width:100px;
}

Der JS-Code fügt ja auch nur Inline-CSS ein, wenn der Mauszeiger über das Element fährt.

Mit der :hover-Pseudoklasse definierst du, dass der CSS-Code nur gelten soll, wenn der Mauszeiger auf dem Element steht.

Ich würde auch das ! bei Erfolg mit CSS anhängen, statt mit JavaScript
#erfolg:hover:after {
content: '!';
}

Mit :hover wird definiert, dass die Anweisungen nur beim mouseover gelten sollen, mit :after wird definiert, dass etwas hinter der Box passieren soll, in diesem Fall mit content einfach einen String anhängen. Allerdings unterstützen ältere Browser die :after-Pseudoklasse nicht, was ich aber in diesem Fall einfach ignorieren würde.

PS Da ich nicht soo der HTML/CSS-Experte bin, könntet ihr mir eventuell noch Hinweise geben, was ich im Beispiel nicht so gut gemacht habe.

Ich glaube das habe ich alles schon oben geschrieben, falls noch Fragen offen sind, einfach die Kommentar-Funktion verwenden.

Aber so allgemein, ich würde bei jeder Animation die in der Flash-Seite ist drei mal überlegen, ob ich die wirklich übernehmen möchte. ;)
24.08.2013
phg 1,6k 3
0
Hey, danke erstmal für deine Mühe! Hab mittlerweile auch sowas hier: http://jsfiddle.net/pGJWb/9/

Allerdings habe ich bei meinem Beispiel das Problem, dass die Links nicht mehr funktionieren (außer im IE). Bei deinem ist das Problem, dass ich ja eigentlich Bilder unterschiedlicher Größe habe. Somit funktioniert die vertikale Zentrierung nicht korrekt. Gucke es mir gleich nochmal an. Aber vielleicht hast du ja noch eine Idee?!

Vielen Dank schon mal!

PS Was mir allerdings nicht gefällt ist, dass sich das <div> von <a> befindet.
25.08.2013
MRae 259 1 7
MRae 259 1 7
Der Link geht nicht, weil andere Browser das <div> durch eine Ebene über das <a> legen (wegen position absolut). Du kannst entweder das <a> auch absolut positionieren und mit z-index arbeiten oder, wie ich es gemacht habe, das <div> für den Rahmen innerhalb des <a>-Tags schreiben.
Hier steht noch etwas zum vertikalen zentrieren http://phrogz.net/css/vertical-align/ vertical-align funktioniert aber zumindest in FF nicht, wenn gleichzeitig float verwendet wird. Dafür müsstest du einiges umbauen und dazu war ich gestern zu faul ;)
phg 25.08.2013

Stelle deine Javascript-Frage jetzt!