Lektion 11 - Galerie mit CSS

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

Lektion 11 - Galerie mit CSS

Beitrag von Admin » Di 19. Aug 2014, 11:27

Mit CSS eine Galerie erstellen

Je nachdem, wie viele Bilder du in eine Galerie unterbringen willst, gibt es unterschiedliche Methoden eine Galerie zu gestalten.

Leerst du regelmäßig deine Kamera und veröffentlichst deine 200 Bilder auf einer Webseite, solltest du eine Galerie mit einer Datenbank wählen. Für alles andere kannst du die Galerie verwenden, die du bereits im Grundlangen-Teil kennengelernt hast. Sie funktioniert super in allen gängigen Browsern, selbst im IE6.

Schick ist immer auch eine CSS basierte Galerie. Hier musst du darauf achten, dass die Bilder nicht zu groß sind, da sie mit der Seite geladen werden. Die Thumbnails, wie auch die großen Bilder. Diese Art von Galerie zeige ich dir in dieser Lektion.

Als Erstes brauchst du wieder deine Bilder. Bei einer CSS basierten Galerie solltest du nicht mehr als 10 Bilder verwenden, die nicht zu groß sind, da alle Bilder mit der Seite geladen werden.

Für diese Galerie benötigst du keine Thumbnails, da die Bilder über Textbuttons aufgerufen werden.

[col]Okay, fangen wird an:

Schreibe zunächst den Text zu deinem Bild. Dahinter fügst du in gleicher Zeile dein Bild ein.

Um es mir einfach zu machen, habe ich die Bilder durchnummeriert. Sie wird später die Schaltfläche zum Aufrufen des Bildes werden.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Markiere das Bild und den Text. Wir brauchen hier keinen Link zu einem anderen Bild oder so, aber einen a-TAG. Füge über Grafik-Eigenschaften als Link eine Raute # ein. Das ist wie ein Platzhalter für eine Link-Adresse.[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion11-2.png[/popup]
[col]Wiederhole diese Vorgehensweise für alle deine Bilder. Deine Galerie sollte so aussehen:
Okay, das war schon die ganze Html-Bearbeitung. Beginnen wir mit der Formatierung über CSS:

Lege eine ID #galerie an und eine Klasse: .bilder

Weise die ID dem <div> zu, die Klasse weist du der <ul>zu.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Beginnen wir mit der Formatierung:
Lege Höhe und Breite für deinen Div [b]#galerie[/b] fest. Dies richtet sich immer nach den Bildern, die du einfügen möchtest. Meine Bilder sind quadratisch 300px. Um links und rechts ein wenig Platz zu lassen, stellst du die Breite ein wenig breiter ein.[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion11-4.png[/popup]
[col]Die Klasse Galerie ist die <ul>. Stelle die Listenpunkte ab und stelle die Position auf relativ. Stelle zusätzlich einen Innenabstand oben in der Höhe deiner Bilder + einen Zuschlag für deine die Höhe deiner Klickbuttons ein.

.bilder

Boxeigenschaften:
  • Position: relativ
    Breite: 300px
    Außenabstand: oben: 300px, rechts, links, unten 0px
    Innenabstand: 0px
Begrenzungen: |Dein Ergebnis sollte nun so aussehen:

#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

[col]Lege eine weitere Klasse an .bilder li und stelle den Puffer auf Links, sodass die Bilder sich links nebeneinanderlegen:

.bilder li

Boxeigenschaften:
  • Puffer: links
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Als Nächstes formatierst du die Nummern. Bei dieser Galerie berücksichtigen wir alle Pseudoelemente eines Links. Für die Formatierung des Normalzustandes und des besuchten Links legst du die folgenden Klassen an. Da sie die gleiche Formatierung bekommen, fasst du sie zusammen und trennst sie lediglich mit einem Komma:

[col].bilder li a, .bilder li a:visited

Textformatierung:
  • Textgröße: 12px
    Textdekoration: keine
    Farbe: 660000
    Ausrichtung: zentriert
    Zeilenhöhe: 26px
Boxformatierung:
  • Anzeige: block
    Breite: 26px
    Höhe: 26px
    Außenabstand: 1px
Hintergrundeigenschaften:
  • Hintergrundfarbe: weiß
Rahmeneingeschaften:
  • Rahmen: solid, 1px, Mittelgrau
Jetzt noch den hover-Effekt:

.bilder li a:hover

Hintergrundeigenschaften
  • Hintergrundfarbe: ein #660000
Jetzt noch den active un focus-Zustand

.bilder li a:active, .bilder li a:focus

Hintergrundeigenschaften:
  • Hintergrundfarbe: #660000
Texteigenschaften:
  • Schriftfarbe: weiß
|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Jetzt müssen wir nur noch die Bilder ausblenden:

.bilder li a img

Boxeigenschaften:
  • Sichtbarkeit: versteckt
    Position: absolut
Rahmeneigenschaften:
  • Rahmenbreite: 0px
Jetzt verstecken wir noch das Bild, nur das Bild

.bilder li a img.gross
  • Sichtbarkeit: versteckt
    Abstand oben - Höhe des Bildes
    Abstand links - 0 px
Und jetzt musst du sie noch über Klick sichtbar machen:

.bilder li a:activ img, .bilder li a:focus img

Boxeigenschaften:
  • Sichtbarkeit: sichtbar
Fertig ist deine Galerie: Lösung

Diese Galerie kannst du ganz nach Belieben abwandeln:
Setze statt der Nummern das jeweilige Thumbnail ein. Ergänze dein Bild mit einem Text. Wichtig dabei ist, dass du die Größen entsprechend anpasst.

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von kp2709 » Mi 10. Sep 2014, 10:53

hallo zusammen,
iregend was läuft heute verkehrt. schaumal, wenn ich .bild li auf puffer links stelle, rührt sich nur mein mundwinkel :x , es ist tut sich nichts!
man muss doch eine unsortierte liste erstellen um ein ul zu erzeugen und um die klasse .bilder zuweisen zu können oder?

http://reikuma27.reikuma.bplaced.de/web ... alerie.JPG[/img_l]
http://reikuma27.reikuma.bplaced.de/web ... lltext.JPG[/img_l]


lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von anke » Mi 10. Sep 2014, 11:44

Hallo Kurt

das ist soweit auch richtig. Hast du dir das einmal im Browser angeschaut, ob die Bilder dort nebeneinander angezeigt werden?

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von kp2709 » Mi 10. Sep 2014, 14:12

hi anke,
danke für deine schnell antwort.
ja, ich habe es im browser angesehen und die bilder werden nicht nebeneinander angezeigt :? .
ich werde mal kompozer neu runterladen und installieren, vielleicht liegt es an meinen 64bit rechner, was ich bezweifle. aber es schadet auch nicht ;) habe zusätzlich kompozer 7.10 installiert und hier ebenso diesen fehler gehabt, also muß ich irgendwo was versemmelt haben :evil:

vielleicht kannst du mir noch auf die sprünge helfen ;)

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von anke » Mi 10. Sep 2014, 17:56

Kannst du das mal hoch laden und hier verlinken

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von kp2709 » Mi 10. Sep 2014, 19:29

hallo anke,
hier der link
http://reikuma27.reikuma.bplaced.de/web ... lerie.html

es werden die bilder nicht geladen, sind aber auch hoch geladen :x


lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 11 - Galerie mit CSS

Beitrag von camouflage1984 » Mi 10. Sep 2014, 21:29

Hallo Kurt

Die Pfade stimmen nicht

Code: Alles auswählen

file:///C:/Users/Kurt/web-lektion1/Dateien/lektion7/orginale/400x400-bild1.jpg
Korrigiere die Pfade dann kann man auch die Bilder sehen. ;)
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von kp2709 » Mi 10. Sep 2014, 21:41

hallo camouflage1984,
danke fehler korrigiert aber es ging nicht nur um diesen fehler, sondern
bei dieser lektion stellen sich die bilder nicht nach der eingabe links puffern um. hier finde ich nicht weiter :x


schau mal bitte

lg kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 11 - Galerie mit CSS

Beitrag von camouflage1984 » Mi 10. Sep 2014, 22:15

Hallo Kurt

Das weiß ich ich bin intensiv am schauen ;)
So lange genug geschaut :mrgreen:
Es wird sich nix nach links verschieben denn deine ul hat eine breite von 440px und die Bilder von 400px.

Mach bitte diese Lektion so weiter wie von Anke erklärt.
Zum Schluss wird alles so wie bei Anke`s css-Galerie ;)

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 11 - Galerie mit CSS

Beitrag von kp2709 » Do 11. Sep 2014, 19:08

hallo zusammen,
hier mein link, ich bekomme die bilder nicht auf einen platz :? , oder ist so richtig?
http://reikuma27.reikuma.bplaced.de/web ... lerie.html


lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast