lightbox2

[blaustern]

Hallo,
habe mir eine lightbox2 galerie erstellt. Nun möchte ich den Abstand zwischen den Thumbs verändern, da mir die Bilder zu sehr aneinander kleben. Wo kann ich das tun?

 

[Myhar]

AW: lightbox2

Den Abstand zwischen Elementen kann man mit CSS prinzipiell über margins lösen. Wie du das konkret bei deiner Seite anwenden musst kann ich dir nicht sagen, da ich deinen Aufbau nicht kenne

L. G.

 

[MegaAdi]

AW: lightbox2

wie hast n du deine thumbs eingebunden?
Zeig mal den Code von den Bildern!
Generell könntest du es mit CSS probieren alla margin: 5px; oder so ähnlich.

Gruß Adrian

 

[WilliIII]

AW: lightbox2

Lightbox2 erzeugt ja lediglich die Darstellung des ausgewählten Bildes (Rahmen, abgeblendeter Hintergrund, Einblendeffekt, Navigation zwischen den Bildern einer Gruppe), ist also erst NACH dem Klick auf den Link eines Thumbs aktiv.

Wie die Thumbs auf der Seite angeordnet sind (sowohl optisch als auch von der Postion her) ist ja ein ganz normales Seitenlayout wie oben schon beschrieben mittels CSS oder meinetwegen auch Tabellen.

 

[blaustern]

AW: lightbox2

Die Bilder sind im content
Hier mal der code von den Bildern:

<a title="Happy Fall Vorlage: Cookies and Cocoa (amerikanische Laubsägearbeiten)" rel=lightbox[galerie1] href="bilder/herbst/happyfall1.jpg"><IMG src="bilder/herbst/kleine_bilder/kleinhappyfall1.jpg"></a>
        <a title="Halloweenkatze Vorlage: Holz vor´s Haus- Vielseidig-Verlag" rel=lightbox[galerie1] href="bilder/herbst/katze1.jpg"><IMG src="bilder/herbst/kleine_bilder/kleinkatze1.jpg"></a>
        <a title="Kräuterhex Vorlage: ähnlich gesehen im Internet" rel=lightbox[galerie1] href="bilder/herbst/kraeuterhex.jpg"><IMG src="bilder/herbst/kleine_bilder/kleinkraeuterhex.jpg"></a>
        <a title="Rabe auf Kürbis Vorlage: Kürbiskerle- frechverlag" rel=lightbox[galerie1] href="bilder/herbst/kuerbisrabe1.jpg"><IMG src="bilder/herbst/kleine_bilder/kleinkuerbisrabe1.jpg"></a>
        <a title="Vogelscheuche1 Vorlage: Di Hiller " rel=lightbox[galerie1] href="bilder/herbst/scheuchi11.jpg"><IMG src="bilder/herbst/kleine_bilder/kleinscheuchi11.jpg"></a>

Und nun noch die css vom content:

.content {
    width: 70%;
    float: left;
    margin-top: 10px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}

 

[WilliIII]

AW: lightbox2

Wegen dem "content" vermute ich mal, Du nutzt Lightbox innerhalb einer CMS-Seite.

Ist natürlich schwierig, das so zu beurteilen, wie sich das CSS auf die ganze Seite auswirkt.

Du könntest aber probieren, unterhalb der .content CSS Definition (also nach der unteren geschweiften Klammer) sowas einzufügen:

.content img {
    padding: 20px;
    margin: 10px;
}

natürlich mit angepaßten Werten für padding und margin...

 

[MegaAdi]

AW: lightbox2

oder du gibst den a-Tags um die Bilder ausenrum ne eigene klasse und sprichst diese dann direkt an:

.thumbnail {
margin: 0 10px;
}

oder so ähnlich.
der Code mit den Bilder müsste dann so aussehen:
<a title="Happy Fall Vorlage: Cookies and Cocoa (amerikanische Laubsägearbeiten)" rel=lightbox[galerie1] href="bilder/herbst/happyfall1.jpg" class="thumbnail"><IMG src="bilder/herbst/kleine_bilder/kleinhappyfall1.jpg"></a>

bei allen verweisen die classe thumbnail verwenden.


Gruß Adi =)

 

[blaustern]

Jaaa super, das scheint zu funktionieren. Muß jetzt zwar alle Verweise ändern, aber so sieht es besser aus!!!! Danke!

Ok das funktioniert. Der Abstand rechts und links zwischen den Bildern passt. Nun wollte ich noch den Abstand zwischen den oberen und den unteren Bildern anpassen. Hab es mit

.thumbnail {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

versucht, aber da sieht man nix.

 

[MegaAdi]

AW: lightbox2

das kannst du gant einfach mit margin: 10px; lösen:

Erklährung:

1 Zahl: Alle 4 Seiten,
2 Zahlen: Oben & Unten / Rechts und Links,
3 Zahlen: Oben / Rechts & Links / Unten
4 zahlen: Oben / Rechts / Unten / Links

also z.B. margin: 10px 5px 0; bedeutet: oben 10px abstand, rechts und links jeweils 5px und unten garnix =)

Gruß Adrian

 

[blaustern]

AW: lightbox2

Ja ich weiss, allerdings löst das mein Problem noch nicht. Der Abstand zwischen den Bilder oben und unten ändert sich nicht.

 

[Myhar]

AW: lightbox2

Das ist wohl, weil deine Bilder per definition inline-Elemente sind. Die erste Antwort hier dürfte für dich interessant sein.
Wenn du zB mit display:block die Darstellung wie für blockelemente definierst, dann kannst du einen oberen und unteren Abstand definieren. Nur wirst du dann wohl auch noch eine Breite für deine Bilder angeben müssen, damit nicht pro Zeile ein Bild zu sehen ist.
Eine weitere Möglichkeit wäre, jede Bilderzeile in einen Container zu stecken und diesem kannst du dann einen Abstand nach oben oder unten geben.

 

[Schulli]

AW: lightbox2

Schau Dir Deine Seite mal mit Firebug für Firefox an.
Poste einen Link zur Seite, dieses code-raten hier bringt auf Dauer nix.

 

[sokie]

AW: lightbox2

Nur wirst du dann wohl auch noch eine Breite für deine Bilder angeben müssen, damit nicht pro Zeile ein Bild zu sehen ist.

das allein wird nicht reichen, denn auch mit der Breitenangabe werden die Bilder bei display:block untereinander dargestellt. - Sie müssen zusätzlich dann auch ein float: (left/right) bekommen.

@schulli: de code ist komplett (#5) vorhanden.