Inline frames mit CSS

  • Ich habe eine slideshow, die gut arbeitet. Die Datei hat den Namen slides1.Html. Ich will die jetzt multiplizieren (= slides1.html, slides2.html,.....) .. In den Kopien ändere ich dann die Bilder. Dann mache ich mir eine Index-Seite in der hintereinander die slides1.html... slides?.html angezeigt werden sollen. Das konnte man früher mit 'inline Frames' machen. Kann man das auch mit css machen?


    Am liebsten hätte ich gerne eine Index.html Seite in der ich die grösse

    von den angezeigten Seiten dann einstellen kann...


    Schematisch sieht das dann so aus:


    ___

    1

    ___

    2

    ___

    3

    ___


    Wie geht das?


    Danke,

    brainstuff

  • Ich mußte dein Beitrag paar mal lesen damit ich das erst richtig verstanden habe.

    Da sieht man das ich mal langsam wieder schlafen gehen sollte.


    Man kann das mit Frames , Iframes ,Php include oder auch Ajax wäre möglich.

    Du kannst aber auch alle Slider in einer Datei packen.


    Die Frage ist erstmal wie viele Datein ( bzw Bilder ) sind den das ?

    Du mußt dann nur drauf achten das die Css nicht mit den anderen Slidern durcheinander kommt wenn du das alles auf einer Seite machst.

    Wie weit sich die Css jetzt gegenseitig beißt beim Frame, Iframe,include oder Ajax einfügen weiß ich jetzt so nicht ,das müßte ich auch erst testen was davon ohne probleme geht.


    Was hast du den genau vor ?

    Hast du schon Beispiel Seite wo das rein soll und auch Beispiel Slider ?

    Dann könnte man mal genauer kucken was bei dir an besten passen würde

  • Basti.


    Danke dass Du deinen Schlaf raubst... Du verdienst einen Orden!


    Ich bin dabei eine Seite zu machen die eigentlich extrem einfach ist: es sind 5 Bilder die in einer Endlosschleife angezeigt werden. Es hat am oberen Bildrand noch ein Menü was beim Mouse over auf klappt und wenn man auf das letzte Bild clickt wird das Bild mit einer Kontakt-Seite überdeckt. Bis auf die Kontakt Seite läuft das jetzt auf einem normalen Bildschirm.


    Aber ich muss unbedingt daraus auch eine Version für Smartphones hinbringen.


    Auf Smartphones kommt das Bild aber zu klein, weil es ziemlich breit ist. Im Portrait Modus ist das Bild zu klein, wenn es in der ganzen Breite angezeigt wird. Im Landscape Modus, ist das Bild dann zu hoch. Es scheint auch, dass die Seite nicht zuverlässig immer in der gleichen Grösse auf allen Smartphones angezeigt wird.


    Ich überlege deshalb, ob ich da nicht eine spezielle Seite für den responsive Modus mache, die die slide Seite einfach in 5 "inline frames" wiederholt (die oberste slideshow beginnt bei bild1, die 2. bei Bild 2, usw. ) das führt dann dazu, dass auf einem Smartphone alle 5 Bilder zu sehen sind, wenn man die Seite lädt. Wenn der Besucher dann einen frame vergrössert hat er eine bildershow auf dem screen. Das könnte ganz toll aussehen.


    Auf mail2vip.com/test/screen/ läuft meine test Seite... Auf einem computer screen ist das menu am richtigen Platz (aber es ist noch nicht fertig). Auf meinem phone kommt das auch schon ganz ordentlich, aber zu klein (auch das Menü ist da an einem falschen Platz.. Aber das ist ein detail). Das was du da siehst will ich einfach 5x untereinander wiederholen... Wenn man dann die Seite öffnet hat es die 5 Bilder auf dem screen, wenn man eines davon grösser zieht, hat man die Bilder als bildershow.


    Danke für Deine Hilfe,


    brainstuff

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von brainstuff ()

  • Hast du mal einen Link zur Seite damit man sich das mal ankucken kann ?

    Wegen deinen unterschiedlichen größen auf Handy , hast du in dein Metatag diesen Eintrag drinne ?

    Code
    1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ansonsten wäre ein Link mal sehr hilfreich weil so kann man nur raten und versuchen nachzubauen

  • Basti1012,


    Auf http://mail2vip.com/test/screen siehst du die Version die ich jetzt habe. Das ist die Version für normale Bildschirme und die ist fast in Ordnung. Da muss ich nur das Bild etwas weiter runter legen und das Menü an den richtigen Ort legen ... aber das ist kein Problem.


    Ich plane eigentlich die Version für Smartphones in ein eigenes Verzeichnis zu legen vas angezeigt wird, wenn die Seite von einem phone aufgerufen wird.


    Wenn ich die Seite für normale Bildschirme auf dem Smartphone Aufrufe, dann kommt schon in der Mitte vom screen. Aber zu klein. Wenn ich die Bilder-show in der smartphone version so vergrösserte, dass sie (im portrait Format) von Rand zu Rand reicht, wird das im Landscape Modus zu gross.


    Deshalb habe ich mir gedacht, dass ich die bildershow für die Smartphone Version einfach in 5 "inline frames" lege und die Reihenfolge der Bilder in den einzelnen frames so andere, dass immer 5 verschiedene Bilder angezeigt werden, wenn die orginalgrösse angezeigt wird. Wenn der Nutzer dann das Bild vergrössert sieht er nur noch eine von den 5 slideshows. Die kann er dann auch im landscape Modus auf die passende Grösse ziehen.


    Mit den inline frames wüfde das eigentlich ganz einfach gehen. Da könnte man die aktuelle Seite einfach 5x abspeichern (mit jeweils anderer Reihenfolge der Slides) und dann kann man jede Slide show in einen inline-frame legen. Dann ist das wie ein Hochhaus mit 5 Etagen.


    ..... HHH.....

    ..... HHH.....

    ..... HHH.....

    ..... HHH.....

    ..... HHH.....


    Da dann jede Etage alle Bilder zeitversetzt anzeigt, kann der Nutzer dann ein beliebiges Fenster grösser ziehen.


    Eigentlich müsste es in CSS möglich sein, dass man die grosse von den Containern in denen die Slideshows angezeigt werden beliebig gross machen kann. Das wåre dann idéal, weil man dann diese slideshows komplett mit allem darum und dran vergrössern /verkleinern kann (wie ein Bild).


    Für die Erkennung der benötigten Version habe ich ein .Htaccess script gefunden was ermittelt ob der Nutzer ein Smartphone verwendet. Das testé ich zur Zeit. Aber wenn Du eine bessere idee hast, ist das auch eine gute Sache.


    Danke dass du mir hilfst.

    brainstuff

  • Hallo,


    Ich habe die Seite jetzt in 3 Teile aufgeteilt:


    1 das Menu

    2. die Slideshow

    3. die Anzeige von der Slideshow position


    Diese 3 Teile funktionieren sehr gut individuell und auch zusammen.


    Ich kann die vertikale Reihenfolge und den Platz problemlos festlegen.


    Aber die Grösse der Elemente ist nur schwer zu beeinflussen.... Besonders die von den Slides.


    Deshalb würde ich die 3 Elemente gerne in "grids" (oder "inline frames") stellen, deren Grösse ich in der Smartphone Version reduzieren kann. Einfach 3 Grids übereinander in denen die Elemente angezeigt werden.


    Wie geht das?


    Danke.

    brainstuff

  • Aber die Grösse der Elemente ist nur schwer zu beeinflussen.... Besonders die von den Slides.


    Deshalb würde ich die 3 Elemente gerne in "grids" (oder "inline frames") stellen, deren Grösse ich in der Smartphone Version reduzieren kann. Einfach 3 Grids übereinander in denen die Elemente angezeigt werden.

    kannst du mal sagen welche Seite das ist ? Die djheke gerade gepostet hat ?

    Da sind 2 Bilder drinne die über 4 mb groß sind die solltest du vieleicht mal kleiner machen von der mb Zahl.


    Möchtest du die Seite für Handy zum laufen haben ?

    Ich habe mal in der Css geschnüffelt und konnte jetzt auch nix Handy gerechtes finden ( @media queries ).

    Ich behaupte jetzt mal einfach das man die Seite mit der richtigen Css auch fürs Handy hübsch machen kann.


    Zum Vorteil wären auch das die großen Bilder unter 1 mb oder wenniger groß sind ( Handy User haben meist begrenztes Volumen ) . Ich würde die Seite nur einmal besuchen wenn die mir fast 20 mb klaut.


    Müßen die Bilder den so groß sein ? Hat das einen sinn ?

  • Basti1012,


    Die Bilder muss ich noch optimieren. Das sind Screenshots aus einem PDF und ich habe gar nicht gesehen, dass die ziemlich gross sind, weil ich gedacht habe, dass solche Screenshots von einem PDF eher nicht sehr hochauflösend sind.


    Ich habe jetzt die 3 Elemente der Seite (Menü, Slideshow, Slideshow-position) einzeln optimiert und dann hintereinander gesetzt. Diese Version läuft so ganz gut. Man könnte die 3 Elemente noch in Grids legen, das wäre wahrscheinlich technisch sauberer aber das ist bei dieser Seite nicht wirklich nötig.


    Ich habe eine Version mit breitem Rand oben und links... für die PC Version und eine ohne Rand links für die Smartphone Version.


    Mit:


    <meta name='viewport' content='width=device-width, height=2000; user-scalable=yes, initial-scale=0.85, maximum-scale=2, minimum-scale=0.5'/>


    kann ich die Initial scale einstellen und auch das Maximum. Aber Minimum scale geht nicht und auch height geht nicht im Landscape Modus.


    Ich will, dass man das in der richtigen Grösse auf dem Smartphone angezeigt bekommt und. dass man das dann verkleinern/vergrössern kann und zwar nur der Teil der Seite der beim Aufruf angezeigt wird.


    Bei meinen tests ist zufällig ein Effekt aufgetreten, den ich erhalten will: man kann einen Text-Kasten, der nur dann sichtbar wird, wenn man herunterscrollt, über den feststehenden oberen Teil der Seite scrollen.


    Kannst Du mir bitte sagen was da am Viewport noch falsch ist.


    Danke,

    Brainstuff