Bildergalerie nur mit CSS (III)

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Bildergalerie nur mit CSS (III)

Beitrag von Admin » Di 19. Aug 2014, 16:02

Als Erweiterung des Tutorial-Bilder-Galerie nur mit CSS (II) soll hier die Anordnung der Thumbnails in den Positionen Oben, Rechts und Links gezeigt werden. Wenn du das Tut nachbauen willst so beginne mit dem oben genannten Tut und führe danach die hier dargestellten Änderungen durch.

Der Nachbau gestaltet sich in sofern recht einfach, da nur wenige Einstellungen mit dem CSS-Editor geändert werden müssen.

Auf geht’s. Und viel Spaß.

Thumbnails Oben
Ändere folgende Einstellungen:
VORHER

Code: Alles auswählen

#inhalt {
 position: relative;
 height: 700px;
 background-repeat: no-repeat;
 width: 850px;
 background-image: url(images_a/bild1.jpg);
}
NACHHER

Code: Alles auswählen

#inhalt {
  position: relative;
  height: 700px;
  background-repeat: no-repeat;
  width: 850px;
  background-image: url(images_a/bild1.jpg);
  background-position: left center;
}
VORHER

Code: Alles auswählen

#inhalt ul {
  margin-left: 5px;
  padding-left: 0;
  list-style-type: none;
  float: left;
  margin-top: 450px;
}
NACHHER

Code: Alles auswählen

#inhalt ul {
  margin-left: 5px;
  padding-left: 0;
  list-style-type: none;
  float: left;
}
VORHER

Code: Alles auswählen

#inhalt a.galerie span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: #ffffff;
  top: 0px;
  left: 0px;
}
NACHHER

Code: Alles auswählen

#inhalt a.galerie span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: #ffffff;
  left: 0px;
  top: 130px;
}
Das war es schon und sollte in etwa so aussehen: Thumbnails Oben.

Thumbnails Links
Ändere folgende Einstellungen:
VORHER

Code: Alles auswählen

#inhalt {
  position: relative;
  height: 700px;
  background-repeat: no-repeat;
  width: 850px;
  background-image: url(images_a/bild1.jpg);
}
NACHHER

Code: Alles auswählen

#inhalt {
  position: relative;
  height: 700px;
  background-repeat: no-repeat;
  width: 850px;
  background-image: url(images_a/bild1.jpg);
  background-position: right top;
}
VORHER

Code: Alles auswählen

#inhalt ul {
  margin-left: 5px;
  padding-left: 0;
  list-style-type: none;
  float: left;
  margin-top: 450px;
}
NACHHER

Code: Alles auswählen

#inhalt ul {
  margin-left: 5px;
  padding-left: 0;
  list-style-type: none;
  float: left;
  margin-right: 600px;
}
VORHER

Code: Alles auswählen

#inhalt a.galerie span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: #ffffff;
  top: 0px;
  left: 0px;
}
NACHHER

Code: Alles auswählen

#inhalt a.galerie span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: #ffffff;
  top: 0px;
  right: 0px;
}
VORHER

Code: Alles auswählen

#inhalt a.galerie:active span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  height: 437px;
  width: 840px;
}
NACHHER

Code: Alles auswählen

#inhalt a.galerie:active span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  width: 640px;
  height: 500px;
}
VORHER

Code: Alles auswählen

#inhalt a.galerie:focus span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  height: 437px;
  width: 840px;
}
NACHHER

Code: Alles auswählen

#inhalt a.galerie:focus span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  width: 640px;
  height: 500px;
}
Das war es schon und sollte in etwa so aussehen: Thumbnails Links.

Thumbnails Rechts
Ändere folgende Einstellungen:
VORHER

Code: Alles auswählen

#inhalt ul {
  margin-left: 5px;
  padding-left: 0;
  list-style-type: none;
  float: left;
  margin-top: 450px;
}
NACHHER

Code: Alles auswählen

#inhalt ul {
  padding-left: 0;
  list-style-type: none;
  float: left;
  margin-left: 670px;
}
VORHER

Code: Alles auswählen

#inhalt a.galerie:active span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  height: 437px;
  width: 840px;
}
NACHHER

Code: Alles auswählen

#inhalt a.galerie:active span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  width: 640px;
  height: 500px;
}
VORHER

Code: Alles auswählen

#inhalt a.galerie:focus span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  height: 437px;
  width: 840px;
}
NACHHER

Code: Alles auswählen

#inhalt a.galerie:focus span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  width: 640px;
  height: 500px;
}
Das war es schon und sollte in etwa so aussehen: Thumbnails Rechts.
Dieses Tutorial wurde am 16.01.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten