Frage stellen
Die gilt es umzusetzen
Seit ca. 14 Stunden tüftle und verzweifle ich. Google und co bemüht.
CSS nochmal z-index eingelesen, paddings und margins berechnet..
Denkanstösse aus dem Netz umgesetzt, hat die sache meist nur noch verschlimmert.
Idee ist folgende:
Ein Box muss her, um Downloads anzubieten und anzupreisen.
Eine feste Vorstellung davon ist in meinem Kopf, die auch zu 99% umgesetzt ist. Jedoch fehlt der 1% zur perfektion.
Also ein Div her mit Rahmen, schaut edel aus mit schlagschatten.
Dieses Div nennen wir : vorlagenbox
In dieses Div packen wir noch ein Div das als Button zur vorschau dienen soll.
Daneben ein Bild damit man gleich am ersten Blick sieht was vor dem Klick auf "Vorschau" passieren könnte.
Neben diesem Bild noch ein Button, den nennen wir selbst erklärender weise "Download".
Diese zwei Buttons, so fix in meinem Kopf verankert, sollen aufrecht stehen. Liegende buttons kann ja jeder
(nun ich kann auch keine fehlerfreien gedrehten 
)Unter dieser Box, soll noch ein Div liegen das die bisherigen Downloads anzeigt.
Schaut dann so aus : http://www.pixelmania.at/pix2/boxmodel/
Problem: wenn man auf Download fährt, hüpft das unten liegende Div ein paar pixel nach oben.
Was wiederrum damit zusammen hängen muss das der Download button grösser wird beim hovern, obwohl die selben grössenangaben wie beim "normalen" zustand.
Auch hier hab ich schon mit grössenangaben gespielt, macht es nur noch schlechter..
Bisher probiert:
Paddings und margins anpassen (ändert nur die buttongrösse, behebt aber nicht das problem im gegenteil verursacht mehrere darstellungsfehler da er nicht mehr abschliesst mit der restlichen box)
Div anderswo platzieren im Html Quelltext, also Childs vererbung in allen variationen ausprobiert, kein Effekt, ausser wieder: es hat es noch mehr zerschossen. Daher denke ich das ich mit der jetzigen Lösung am nächsten dran bin, aber ich irgendwo einen kleinen denkfehler habe.
Achja, natürlich soll diese box floaten, da viele kommen sollen und keine fixe anzahl definiert wird.
Nächstes riesen problem:
Chrome, Opera und FF stellen es gleich dar, bis vielleicht auf winzige kleinigkeiten die man übersehen kann.
nur der IE schaffts wiedermal nicht. Die effekte sind zu umfangreich um sie hier zu beschreiben, bitte einfach selbst damit ansehen.
Und auch position: relative, absolut probiert in allen erdenklichen formen, entweder noch mehr zerrissen oder gar nicht gegangen, nicht mehr gefloatet, falsch gefloatet oder sonstwas...
Aufgrund der 267 relevanten Zeilen im CSS poste ich hier kein CSS.
Das ist zu finden unter: http://www.pixelmania.at/pix2/boxmodel/style.css
HTML:
- Code: Alles auswählen
<div id="vorlagenbox">
<div class="vorschaubutton" onClick="window.open('vorlagen/holz','form','scrollbars=yes')">Vorschau</div>
<img class="vorschaubild" src="../vorlagenvorschau/holz.png" />
<div class="downloadbutton" onclick="location.href='vorlagen/holz.zip';">Download</div>
<div id="downloads">Downloads: 53245</div>
</div>
Fällt hier jemanden eine Lösung ein die in allen browsern funkt, auf css3 basiert und natürlich die box so darstellt wie sie jetzt ist, ohne diesen "Sprungbug" und dem IE problem?
Ich schliesse nicht aus, dass mein Denkansatz für die gesamte komplett falsch ist, dann bitte auch eine kurze erklärung wie der Aufbau besser zu realisieren wäre
3 divs einzeln nebeneinander sodas die drei bereiche, vorschau, bild, download aneinander gestückelt werden und das vierte div unten dran kleben?
Danke,
lg rainer
