Bilder-Gallery ohne JavaScript
Hallo,
angeregt durch diese Gallery :arrow: [url]http]][/color][/size] Erstes Bild sollte immer zu sehen sein, die anderen mit Hover bzw. Klick Mich würde mal interessieren auf welchen Browsern es geht ! IE6 und Firefox 0.91 auf XP Pro gehen 8) |
IE 5.01 - geht nicht (nur das erste Bild - die anderen werden nicht in groß angezeigt)
IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich ) IE 6 - geht Firefox 0.92 - geht Opera 7.23 - bleibt beim anklicken nicht stehen, hovert aber problemlos Alles unter Win 98 Hab mir die Galerie auch schon bewundernd angeguckt, weil ich sowas ähnliches ja auch auf meiner HP habe, aber mit Javascript halt. Mal schauen, ob ich´s noch mal umbastel (oder eben ganz anders, wenn ich mich wieder an die HP ranmache..... *g*). Dank Dir jedenfalls fürs umschreiben - ist gleich mal in die Trickkiste gewandert. |
Danke Dir......erstmal :D
Zitat:
Bei der Gelegenheit auch gleich mal über 100, man weiß ja nie wieviele Ebenen in einem Projekt schon entstanden sind. Hat jemand noch einen MAC, AOL, T-Online zur Verfügung :?: :idea: Übrigens geht die Gallery auch mit TABS (Barrierefrei ?!) |
Zitat:
Nur der IE 5 macht halt gar nix, auch nicht nach Korrektur des Codes (ist eh kein Unterschied :? ) - der wird doch hoffentlich nicht mehr viel benutzt, oder ?....... |
Zitat:
Trotzdem wäre es interessant zu sehen ob die orginale Gallerie, die vom LINK oben, mit dem IE5 funktioniert. Der Ursprungscode war nämlich mehr als seltsam, und ich hatte mich schon gefragt warum ER das wohl so geschrieben hatte. Boxmodel-Fehler beim IE5.5 :shock: , ich dachte der hat nicht das Problem. Da es ja wohl ein Fehler im Startpunkt (Viewport ?!), 2px tiefer........hmmm Man könnte den [Viewport], da wo [position: relative;] gesetzt wird, ja in der [#gallery_position] setzen, dieser Container ist sowieso Sinnfrei bzw. zum positionieren gedacht, und BOX-Model definitionen ausschliesslich in der [#gallery]. Leider kann ich weder den IE5 noch den IE5.5 testen :? Der Opera kennt wohl weder die Pseudo-Class :focus noch :active :shock: Außerdem war auch noch im orginalen Code eine Pseudo-Class :unknown statt :focus, wozu ist mir auch ein Rätzel :( |
Zitat:
Zitat:
Zitat:
einfach in irgendein Verzeichnis entpacken und starten.... - fertig! Und wenn Du sie besser unterscheiden willst, dann nimm Dir noch die Brand-Bitmaps von hier mit: http://blech.home.pages.at/iepara.html Zitat:
|
Ohne Preload :arrow: weniger Traffic
Oben gezeigtes Beispiel ist ja schon ganz fein, aber nicht immer sinnvoll. Dadurch das die "Voll"-Bilder in img-Tags stehen werden auch alle beim Laden der Site "gezogen". Als CSS (background-image) werden diese aber erst während der "Laufzeit", also wenn der Layer angezeigt wird, geladen. Natürlich ist dann auch der HOVER-Effekt nicht erwünscht, deshalb ohne. Zusätzlich habe ich einen Layer mit der Anzeige (loading....) hinein gelegt. Geht natürlich nur beim ersten Laden, dann ist diese Datei im Browser-Cache und immer sofort sichtbar (logisch). :arrow]][/color][/size] Und nochmal die Frage nach den Browsern die es können.... Opera wird wohl nicht gehen :? IE6 / Firefox 0.91 auf XP pro :arrow: funktionieren |
und noch mal die Browserantwort:
IE5.5 - geht nicht - nur das erste Bild wird angezeigt, kein weiteres(den 5er hab ich gar nicht erst versucht) Opera 7.23 - bei Klicken auf die Vorschaubilder kommen die Bilder, auch das Einblenden von loading klappt - aber eben nur auf Klick - und die Maustaste muss gedrückt bleiben, sonst ist das Bild sofort wieder weg. IE 6, Firefox o.k., wie bei Dir auch. |
Zitat:
Code:
:link Code:
: Und das mit dem Opera müßte aber dann mit TABS gehen - oder ? Schade das sich keine MAC-User findet :? |
Ulle, das ist absolut heiß, das Beispiel!
Vor allem die IEs sind wirklich lustig! :) Folgendes Beispiel geht (ich schreibs noch mal ganz auf, weil es auf einen Schreibfehler ankommt - der ist wichtig!) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Firefox - o.k. - einfach klicken, Bild lädt dann und wird angezeigt IE6 - so auch o.k. - wenn man #gallery a:active ganz streicht, geht nix mehr, schreibt man es richtig hin, gehts - schreibt man a:activ hin, gehts auch. IE5.5 - mit #gallery a:active geht nix - nimmt man es weg, dann gehts, schreibt man es mit Schreibfehler hin, gehts auch. Aber: man muss klicken und dann mit der Maus vom Thumbnail zwingend runter - dann kommt das Bild - bleibt man über dem Thumbnail, passiert nix.......... :? Opera: bei allen Varianten wie oben beschrieben! - Klicken und Maustaste über Thumbnail gedrückt halten. Schon echt witzig, diese Galerie! Sollten wir in eine Kuriositätensammlung aufnehmen! |
Zitat:
Zitat:
Code:
#gallery a:hover strong, #gallery a:hover span { =========================== Ich vermute mal das es mit dem :activ ohne e zusammenhängt. Versuche es doch noch mal mit meinem 1. und 2. Beispiel mit :active, dann geht es auch bestimmt im Opera und IE5.5, ohne das ganze verschlimmbessern mit :hover ]][/color][/size] Denk auch an Deine Trickkiste, da ist dann wohl auch der Fehler drin :!: |
So, noch mal Deine ursprünglichen Beispiele mit active - ohne hover etc....
Am Firefox ändert sich nix, IE 6 auch nicht. IE5.5 kann´s jetzt in beiden Fällen, auch ganz normal. IE 5 kanns nicht. Bei Opera ändert sich auch nix - im ersten Fall kann man nur hovern, nicht klicken, im zweiten Fall muß man drücken, nicht loslassen.... ;) |
@terrikay - ich mach es auch wieder gut bei Dir, ist mir echt peinlich :oops:
__________________ Danke Dir ....... Firefox :arrow: versteht sich auf :focus IE 6 :arrow: versteht auch :activ ohne e :arrow: versteht sich auf :active IE5.5 :arrow: versteht kein :activ ohne e :arrow: versteht sich auf :active IE5 :arrow: ist eh doof Opera :arrow: war schon immer sonderbar ..... und ob andere Browser die 2 Gallerys von oben verstehen - schauen evtl. andere würde ich mich über Feedback freuen :D |
Hallo ihr Beiden.
Ich finde ja das ganze sehr interessant und denke sogar drüber nach, falls erlaubt, das auf der Website einzbauen, an der ich gerade "klöppel". Wofür steht aber eigentlich <![CDATA[*/ ? SPMan |
Und für alle, die online testen möchten, ist hier ulles 2. Variante mal online (Bilder sind aus einer Freeware-Bildersammlung).
:arrow: Online-Demo |
Klar darfst DU.......
Zitat:
|
Kein Problem... :)
SPMan (danke übrigens) |
<style type="text/css">
<![CDATA[*/ hier der Code... /*]]>*/ </style> Ist die korrekte Art, bei XHTML die CSS-Styles oder auch Javascript zu maskieren. |
Zitat:
Die oberen FLOAT-Element passen nicht in die BOX :!: dadurch verschiebt sich alles ein wenig. :? |
Zitat:
SPMan |
Ja, ich hab die Maße geändert - aber eigentlich alles angepaßt. Was paßt bei Euch nicht ? :? Bin ich blöd?
|
Passt nicht
edit - jetzt passt es (17:49) |
Ich hatte noch mal kurz ein paar Pixel verbreitert.......
ich frag noch mal in einem anderen Forum nach Browsercheck mit Mac und Linuxen...... - sag dann hier Bescheid (nur meine online-Demo....) |
Zur Demo (online)
Linux: - aktueller Konqueror zeigt die Grafik neben der weissen Box mit den Thumbs an und der Bildwechsel funktioniert nicht (passiert garnix). - mozilla 1.4 -> Darstellung ok, Bildwechsel funktioniert nicht (loading.... ändert sich nicht). Windows: - Firebird (Mozilla 1.5) -> selbes Problem wie unter Linux - Amaya liest das CSS nicht richtig ein, dort sind alle spans und divs sichtbar und nebeneinander. - Opera 6/7 Bildwechsel geht nicht. Ab Firefox 0.8 (mozilla 1.6) geht es. Alles in allem sehr anspruchsvoll, wenn es nur ab IE5.5 und Mozilla ab 1.6 funktioniert... |
Ich hab das nochmal in einem anderen Forum mit der Bitte um Browsercheck vorgestellt und bekam von der Mac-Fraktion folgende Antworten:
Safari: genauso wie Opera - man muss die Thumbnails gedrückt halten. Mit IE 5 Mac geht gar nix. Mit dem iCab ist es völlig zerschossen und funktioniert auch nicht. Der aktuelle Opera (7.5) reagiert auch nicht anders als meiner.... So richtig browserkonform ist das Ganze also leider nicht - trotzdem nett! ;) |
Zitat:
evtl. dem Selektor [#gallery a:focus span, #gallery a:active span] einen höheren Layer geben ( Bsp. 101), als dem Loading-Block. :? Zitat:
Die einzigen Highlights sind ein Layerkonzept und die Pseudoklassen :focus und :active, gibt es ja nicht seit gestern :!: Layerkonzept :arrow: http://www.xhtmlforum.de/viewtopic.php?t=1510 Pseudoklassen :arrow: http://www.w3.org/TR/CSS21/selector....pseudo-classes Ergo :arrow: alle Browser die mit genannten Techniken umgehen können dürften damit keine Probleme haben. Einzig die Anweisung des LINK könnte noch Probleme verursachen, evtl. hat da ja jemand eine besser Lösung, einen Mouse-Klick bzw. TABS ohne Wirkung zu erzeugen und somit :focus bzw. :active auszulösen :!: Meine Lösung ist: |
Zitat:
Aber Du hast recht - die Browser verstehen auch nix von Semantik und sollten eigentlich nur anzeigen, was sie gesagt bekommen. Und das ist eigentlich schon recht eindeutig...... Übrigens: einen guten Mac-Browser scheint es doch zu geben: Camino 2004051715 (v0.8b) - mit dem solls klappen! Werde die Galerie noch mal mit dem z-index versehen, wie Du vorgeschlagen hast (ich hatte den übrigens ganz entfernt - 2x100 muss ja nicht sein) - z.Zt ist bei Arcor aber der Server down und ich kanns nicht hochladen. |
Zitat:
semantisch korrekt :arrow: in jedem Fall, sonst würde 1. der Valitator anschlagen und 2. ist ein SPAN-Tag, STRONG-Tag und EM-Tag (Kursiv) innerhalb eines A-Tag erlaubt, aber kein DIV-Tag. |
Mit der Semantik meinte ich jetzt die logische Textauszeichnung. Und da ist ein kursiv hervorgehobenes Leerzeichen mit Bild im Hintergrund nicht eben sinnvoll. ;)
Dass Du einfach irgendein innerhalb des <a>-tag erlaubtes inline-Element dafür benutzt hast, ist mir schon klar - und es funktioniert ja im Prinzip auch. :arrow: für mich gehört das zu "nette CSS Basteleien" und da hab ich ja durchaus Sinn für! Deswegen liebe ich ja auch die Stu Nicholls-Seite! ;) Die Galerie ist jetzt noch mal korrigiert hochgeladen: http://home.arcor.de/terrikay/css-galerie/# |
Zitat:
Siehe auch: http://www.mozilla-europe.org/de/products/camino/ Zitat:
|
Zitat:
Konqueror :?: Wäre nett wenn Du dazu noch was sagen könntest / DANKE |
Konqueror geht jetzt auch prima, Mozilla hab ich in einer älteren Version unter Linux bis jetzt nicht noch einmal testen können.
|
Hi,
funktioniert perfekt unter Linux bei Konqueror, Mozilla Firefox und Mozilla Mozilla 1.8a2 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a2) Gecko/20040714 ;) |
Ich hab auf dem Mac auch noch mal nachtesten lassen:
IE Mac geht gar nicht :arrow: nur thumbnails, sonst nix Safari :arrow: wie Opera iCab :arrow: völlig zerschossen ->hab einen Screen als PDF gesehen.... Geht also auf dem Mac nur mit Camino richtig und mit Safari so einigermaßen... |
@terrikay
deine online Version oder welche? |
Ja, die Online-Version.
Die Original-Version von Stu Nicholls wurde auch getestet: Zitat:
|
Ich führe mal das Offtopic aus dem anderen Thread hier Ontopic :shock: fort:
Zitat:
Zitat:
Zitat:
|
Zitat:
Interessant wäre wohl auch ein Vergleich zu meiner ersten umgeschriebenen Version, die mit den IMG-Tags :!: Falls dann auch ein unterschied zum Orginal besteht wäre da noch ein toller Trick eingebaut. :shock: |
Hallo Ulle,
ich mach die erste Version auch noch mal fertig und bring die heute abend online. Dann laß ich die auch noch mal Mac-Testen (geht wahrscheinlich erst nächste Woche). Dexter und Starleos können ja dann vielleicht auch noch mal mit Linux gucken.... |
So, hier nochmal Ulles erste Galerie online zum testen: http://home.arcor.de/terrikay/css-ga...lle1_demo.html
Meine Browser: Firefox: o.k. IE 5.5 und 6: soweit o.k. - teilweise überlappen sich aber die Bildunterschriften, bis man die Thumbs anklickt - dann ist es o.k. IE 5: geht nicht - nur das erste Bild erscheint Opera: wie gehabt - hovert, bleibt aber nicht stehen. Was machen die anderen? |
Alle Zeitangaben in WEZ +2. Es ist jetzt 23:45 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023