Bildergalerie 2

1. offizieller Beitrag

    Hallo,

    ich habe nunmehr erfolgreich die Lightbox auf meiner Seite eingebunden:

    mit folgendem CSS werden die Vorschaubilder angeordnet (hier nur der Relevante Teil der zuständigen CSS Datei)

    Code
    #galerie {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    colour: #000066;
    flex-wrap: wrap;
}

    Hier das dazugehörende html für die ersten 6 Bilder:

    Im Test funktioniert das ganze schon ganz gut.

    Mir ist nur nicht klar, ob die Einbindung so passt bzw. welche Klasse aus der lightbox.css Datei ich den einzelnen a Elementen zuweisen muss. Im Beispiel wird die Klasse example-image-link für die a Elemente und example-image für die img Elemente verwendet. Welche Klassen muss ich für den Echteinsatz den jeweiligen Elementen zuweisen.

    Danke für die Hilfe.

    Wenn, aber wirklich nur wenn man mal in die CSS-Datei von Lightbox rein sieht, kann man feststellen, dass es die CSS-Klasse example-image-link nicht gibt. Daraus könnte man glatt schließen, dass das nur ein Dummy ist.

    Das habe ich selbst gesehen, daher wollte ich ja wissen welche Klasse aus der css Datei ich zuweisen muss und ob das überhaupt erforderlich ist

    Wenn es ein Dummy ist, dann sollte klar sein, dass man keine CSS-Klasse zuweisen muss.

    Könnt Ihr mich vielleicht auch noch helfen, wie man den Text im "data-title" attribut formatieren - also unter dem großen Bild zentrieren und auch vergrößern kann?

    Danke für die Hilfe.

    Dass im a Element und Img Element anscheinend gar keine Klassen zugewiesen werden müssen erscheint mir derzeit schon klar. Wobei ich noch immer nicht weiß, wofür die diversen Klassen in der css Datei dann gut sind.

    Ich gebe dir jetzt mal einen Tipp, wie du selber dein eigenes CSS erweitern musst, um den Text zu zentrieren und die Fontgröße zu ändern. Wenn du das einmal verstanden hast, wirst du solche Dinge selber finden können und das ist besser, als dir hier des Rätsels Lösung zu präsentieren.

    1. Rufe die Seite im Browser auf.
    2. Klicke auf das Bild
    3. Klicke auf den Text mir der rechten Maustaste
    4. Wähle "Element untersuchen" (Firefox) bzw. "Untersuchen" (Chrome)

    Du siehst dann im Browser den HTML-Code und die CSS-Klassen mit deren Werten, die dort greifen. Du nimmst dann die CSS-Klasse, die für den Text zuständig ist und überschreibst dann in deinem CSS die Werte für Größe und Alignment.

    Danke habe ich hinbekommen und die Schriftgröße sowie die Ausrichtung auf die von mir gewünschten Werte korrigiert.

    Eines habe ich noch nicht hinbekommen:

    Mit diesem CSS wird das x zum schließen des Bildes positioniert. Wie kann ich die Position dieses X ebenfalls zentrieren? Das schaffe ich bisher nicht.

    Abgesehen davon, dass Du wahrscheinlich recht hast, dass das nicht besonders aussieht (wenn man es vornehmer ausdrückt), aber wird nicht die Position des Kreuzes durch dieses CSS bestimmt:

    Code
    background: url("images/close.png")top right no-repeat;

    Oder liege ich da falsch?

    Weiters wollte ich noch fragen, ob es auch möglich ist, beim Vorschaubild den selben Text wie beim großen Bild unter dem Bild anzuzeigen.

    Zitat von Spider67

    Oder liege ich da falsch?

    Ja

    Zitat

    Weiters wollte ich noch fragen, ob es auch möglich ist, beim Vorschaubild den selben Text wie beim großen Bild unter dem Bild anzuzeigen.

    Und nochmal ja

    Wieso wird das Kreuz nicht durch das CSS positioniert? es wird doch als Hintergrundbild eingebunden und im umgebenden Container mit top und right platziert.

    Wie und wo muss ich den Text im Vorschaubild deklarieren, damit er zentriert unter dem kleinen Bild erscheint?

    Definieren width und height nicht die Größe des Containers der das Kreuz umgibt?

    Bezüglich Text muss ich also jedes img mit einem figure umschließen und dort dann figurecaption mit dem gewünschten Text einfügen, passt das so?

    Du denkst schon wieder nicht mit!

    Zitat

    Definieren width und height nicht die Größe des Containers der das Kreuz umgibt?

    Jein, der Container ist 30x30 Pixel groß, und dieser hat als Hintergrund eine Grafik, die oben rechts positioniert wird.

    Also kann es doch nicht sein, dass

    Code
    background: url("images/close.png")top right no-repeat;

    die Positionierung großartig verändert, das bleibt alles im Container von 30x30 Pixel. Wenn du das Kreuz anders positionieren willst, dann musst du doch den Container verschieben und nicht die Grafik!

    Zitat von Spider67

    wahrscheinlich wirst du es nicht glauben

    Dir glaube ich das ungesehen!

    Das Kreuz ist in dem 30x30 Pixel großen Container verhaftet. Du kannst bei background eintragen was du willst, das Kreuz wird nicht aus diesem Container herausgehen, bzw. dann nicht mehr sichtbar sein.

    Ich denke, ich bin aus diesem Thread besser raus, bevor das hier wieder ausartet. Man kann dir erklären was man will, selbst einfache Zusammenhänge verstehst du nicht oder bemühst dich nicht wirklich es zu verstehen. Das ist mir echt zu albern.

    • Offizieller Beitrag

    Du hast ein Element ( der Container ), in dem Du eine Hintergrundgrafik ( die Close-Grafik ) platzierst.

    Die Grafik wird vermutlich ca. 30 x 30 Pixel sein, genau wie das umschließende Element.

    Die Positionierung der Hintergrundgrafik über die background-position Eigenschaft bezieht sich lediglich auf das umschließende Element, also das 30 x 30 Pixel Element.

    Eine 30 x 30 Pixel Grafik in einer 30 x 30 Pixel Box ( das Element ) zu positionieren, ist daher unsinnig.

    Das ganze Element muss verschoben werden, nicht die Grafik!

    Von der Aussage her exakt das, was Dir bereits von @Bandit gesagt wurde, aber vielleicht fällt der Groschen jetzt?

    Ist mir jetzt klar, dass bei dem kleinen Container, eine Positionsänderung nichts bewirkt.

    Die Sache mit dem figcaption habe ich auch schon hinbekommen.