# HTML/CSS Bilder hintereinander legen + umblättern



## Aagrus (4. April 2016)

Ich will eine richtige Webseite erstellen.
Bin schon ziemlich weit gekommen
Das schwierige ist, die Bilder richtig anordnen.

Also mein problem ist (gut lesen bitte):

Ich hab ca. zwischen 6 - 10 Bilder pro Ansicht (Außen/Innen) und die nebeneinander zu legen oder auf die Seite untereinander zu reihen ist nicht schön.

Ich möchte daher die Bilder nebeneinander legen und sie sollten sich ein wenig überlappen!

Man sollte aber das hintere Bild anklicken können und dann ist das erste Bild hinter dem zweiten!
Und immer so weiter bis zum letzten Bild!

Ich hab hier eine Seite gefunden, die so etwas gemacht hat!
Hier der link: http://store.steampowered.com/genre/Early Access/

Mitlerweile hab ich es schon Wochenlang probiert ohne erfolg 

Hoffe ihr könnt mich bei diesem Projekt helfen 

MFG.


----------



## Sempervivum (4. April 2016)

Hier ist so etwas ähnliches:
http://js-tutorial.com/3d-flow-plugin-for-swiper-783
Schau dir mal an, ob Du es gebrauchen kannst.


----------



## Aagrus (4. April 2016)

Ja
Genau so etwas
Jetzt nur mehr ohne rotation dann passt das schon
Danke


----------



## Sempervivum (4. April 2016)

Was meinst Du mit "ohne rotation"? Wenn Du die Bilder flach haben möchtest, kannst Du das durch den Parameter "rotate" steuern, indem Du diesen auf 0 setzt.


----------



## Aagrus (4. April 2016)

Genau
Und noch zwei Frage:
1. Wie kann ich meine Webseite vollkommen ohne Zoomfunktion einstellen
    Ich hab schon die Webseite mit diesem code belegt aber das funktioniert nicht so richtig
    HTML code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Weil wenn sie Zoomen, kommt das Hintergrundbild so oft vor... :/

Und
2. Ich hab die Webseite auch auf verschiedene Bildschirmgrößen angepasst.
Ich will aber, dass das Hintergrundbild nicht in die länge gestreckt wird ne mindestgröße einbauen
drum hab ich: min-width: 600px;   eingestellt

Aber jetzt gibt es ein weiteres problem:
Das Hintergrundbild geht drotzdem noch kleiner...
Dann kommt es bei einer breite von 300px doppelt vor...

hier der CSS code:

body
{
   background-image: url('background1.jpg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   font-size: 100%;
   margin: 0em;
   padding: 0em;
   min-width: 600px;
}


----------



## Aagrus (4. April 2016)

Das meinte ich damit 
Danke für die beantwortung der Hauptfrage

aber brauch ich hier auch Java Skript??


----------



## Sempervivum (5. April 2016)

> aber brauch ich hier auch Java Skript??


Wenn Du den Slider meinst, ja, denn der ist mit jQuery realisiert.


----------



## Sempervivum (5. April 2016)

> Aber jetzt gibt es ein weiteres problem:
> Das Hintergrundbild geht drotzdem noch kleiner...
> Dann kommt es bei einer breite von 300px doppelt vor...
> 
> ...


Das min-width wirkt hier auf body und nicht auf das Hintergrundbild.


----------



## Aagrus (5. April 2016)

Aber dadurch das ich es nur in CSS erwähnt habe, kann ich es ja nicht mehr ändern oder??
Oder zumindest eine eigene Codezeile erstellen

Naja
Zur Hauptfrage:
Geht das auch, das ich soetwas sebst schreiben (programmieren) kann??
Ohne das ich da Plugins brauche und eve. rechte verletze??


----------



## Sempervivum (5. April 2016)

Wenn Du dir die erforderlichen Kenntnisse aneignest, kannst Du so etwas auch selbst programmieren. Ist jedoch nicht zu empfehlen, denn Du kannst Swiper ohne Bedenken verwenden. Dieser steht unter der MIT-Lizenz und kann frei verwendet werden, man muss nur den Copyright-Hinweis und die Lizenz-Angabe drin lassen:
https://de.wikipedia.org/wiki/MIT-Lizenz


----------

