[GastForen Web allgemein HTML und CSS / Stylesheets Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

18. Aug 2012, 20:27
Beitrag # 1 von 16
Bewertung:
(5871 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ich versuche gerade Bilder die als Thumbnails dargestellt werden, zusammen mit Text, als Platzhalter für Galerien bündig zusammen zu fassen.

http://triggertrix.com/nextgen/

Allerdings bekomme ich das egal was ich tue nicht hin.

Also Ziel soll sein, -sofern möglich- ein Thumnail mit einer Bildunterschrift (derzeit h1), nebenan einen kleinen Beschreibungstext. Alle drei Elemente (Bild, h1, text) sollen in einen grauen Kasten gesetzt werden, so das sie optisch als Einheit wirken.

Wie gesagt, durch das JS bekomme ich das aber nicht anders gelöst, kann mir da jemand weiter helfen?

Dank & Gruss

P.S. Nein die Seite bleibt nicht so dilettantisch, ist nur um mir das optisch einfach zu machen, erst muss ich o.g. Problem lösen…
X

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

19. Aug 2012, 11:04
Beitrag # 2 von 16
Beitrag ID: #499605
Bewertung:
(5823 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
weiss denn wirklich keiner was?


als Antwort auf: [#499603]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

FSt
  
Beiträge gesamt: 1961

19. Aug 2012, 11:51
Beitrag # 3 von 16
Beitrag ID: #499606
Bewertung:
(5807 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Tut mir Leid, aber kannst Du das irgendwie anders erklären? Ich versteh nicht genau was Du meinst. Welche Bündigkeiten sind gesucht, die sollten ja immer relativ zu etwas sein, aber Du schreibst nirgends was sich woran ausrichten sollte. Oder ich verstehs einfach nicht
^^


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


als Antwort auf: [#499605]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Designerist
Beiträge gesamt: 40

19. Aug 2012, 11:53
Beitrag # 4 von 16
Beitrag ID: #499607
Bewertung:
(5807 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Dein Code ist halt sehr unübersichtlich :-) Zuerst mal: ein div darf auf einer Seite nur 1x erscheinen. Hier heissen alle divs "album".
Ich würde pro Thumbnail eine Box (div) erstellen, alle unterschiedlich benennen, position: absolute, Abstände links und oben definieren, Breite und Höhe definieren, mit grau oder der Farbe deiner Wahl hinterlegen. In diese Boxen die Bilder packen (class: float left, padding right ca. 20px), dann einfach h1 und bodytext reinsetzen (ohne span, braucht es nicht).
Hoffe es klappt, Grüsse - Designerist


als Antwort auf: [#499605]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

19. Aug 2012, 12:08
Beitrag # 5 von 16
Beitrag ID: #499608
Bewertung:
(5792 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Zitat Zuerst mal: ein div darf auf einer Seite nur 1x erscheinen. Hier heissen alle divs "album".

Das kommt daher, das sich das Javascript jeden Bilderordner nimmt (der eingepackt in das DIV Album da liegt) und alle, bis auf das erste Bild versteckt. Die sichtbaren, skaliere ich auf Thumbnailgrösse.

Zitat Ich würde pro Thumbnail eine Box (div) erstellen, alle unterschiedlich benennen


Ehrlich gesagt habe ich das noch nicht versucht, denke aber (da ja JS das rauswirft) wird das nicht funktionieren.
EDIT: Ok, habe ich gerade versucht, gute Idee funktioniert aber nicht

Zitat Tut mir Leid, aber kannst Du das irgendwie anders erklären?


Klar,
also ich habe die Thumbnails, unter(von mir aus auch drüber) den Thumbs soll einfach eine mit h1 deklarierter Name sein (Galeriename, hier "Badespass"), direkt neben jedem einzelnen Thumb soll ein kleiner Beschreibungstext stehen.
Und alle drei Elemente, Tumb, Überschrift und Beschreibungstext, sollen zusammen gehören.

Sprich Galeriethumb 1 und Überschrift 1 und Beschreibungstext 1, dann das nächste 2+2+2 usw. also dass das jeweils eine "Gruppe" ist.
Derzeit ist ja Bild 3 und Text3 getrennt, was eben niocht passieren soll.

Wenn das schon mal zu lösen ist würde ich gerne um die jeweiligen Gruppen immer einen grauen Kasten legen, so dass das optisch auch als Gruppe wirkt. Die repräsentieren ja jeweils eine Galerie, daher die klare Trennung voneinander.

So klarer?

Dank & Gruss


als Antwort auf: [#499607]
(Dieser Beitrag wurde von Turbohonk am 19. Aug 2012, 12:14 geändert)

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

19. Aug 2012, 12:30
Beitrag # 6 von 16
Beitrag ID: #499609
Bewertung:
(5769 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hm…… das Forum lässt mich nicht länger Editieren……
also dann halt so:

P.S. EDIT II : mir ist noch nicht ganz klar ob es ein Schritt nach vorne oder nur noch mehr verwirrung in meinem Code ist,

aber ich habe das Span Element auf das Image ausgedehnt und siehe da, ich habe fast mein Ergebnis, jetzt muss ich nur noch die Überschrift zur solchen machen (also das sie nicht daneben steht) und den Kasten ausrichten das der Inhalt zentriert ist, dann müste ich es haben, oder? Wisst ihr noch etwas besseres?


als Antwort auf: [#499608]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Designerist
Beiträge gesamt: 40

19. Aug 2012, 12:35
Beitrag # 7 von 16
Beitrag ID: #499610
Bewertung:
(5758 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Jetzt sieht es doch schon ganz gut aus!
Grüsse, Designerist


als Antwort auf: [#499609]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

19. Aug 2012, 12:39
Beitrag # 8 von 16
Beitrag ID: #499611
Bewertung:
(5750 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Das stimmt, und Du bist dran Schuld! ;o)
Durch Deinen Hinweis mit den einzelnen Div´s kam ich auf die Idee, das Span auszuweiten…

allerdings klebt das Bild jetzt unten am Rand, die Überschrift steht nebenan (gut gibt schlimmeres) und alle Attribute die ich den Bildern mitgegeben hatte (abgerundete Ecken usw.) sind weg……
Das heisst es ist optisch ein wenig besser, aber das worauf es mir ankommt, Kontrolle über alle drei Elemente der jeweiligen Galerie zu haben, hab ich noch nicht erreicht……


als Antwort auf: [#499610]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Designerist
Beiträge gesamt: 40

19. Aug 2012, 13:40
Beitrag # 9 von 16
Beitrag ID: #499612
Bewertung:
(5711 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Jetzt halt noch eine class im CSS schreiben, welche die Attribute des Images enthält und dann dem img diese class zuweisen. Das Bild klebt unten, weil es sich an padding 1em vom div hält. Gib doch mal der class des img margin-top: -10px. Ev. funkt das.
Grüsse, Designerist


als Antwort auf: [#499611]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

19. Aug 2012, 14:56
Beitrag # 10 von 16
Beitrag ID: #499613
Bewertung:
(5669 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hmpf…… ich hatte einen Fehler gemacht, Du hattest Recht (weiterhin ;o) ) Ich hatte nur Class mit ID verwechselt und dann passiert da natürlich nicht so viel.

Allerdings ärgert mich jetzt das Javascript auf der Seite, da es regulär ja bis auf das erste Bild, alle anderen des jeweiligen Albums versteckt, diese Funktion wird durch das "packen in ein Div" irgendwie blockiert und mir klastert es die gesamte Seite voll…


als Antwort auf: [#499612]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Designerist
Beiträge gesamt: 40

19. Aug 2012, 15:04
Beitrag # 11 von 16
Beitrag ID: #499614
Bewertung:
(5664 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hoppla - das verstehe ich jetzt nicht. Ich kenne mich nur mit Lightbox2 aus für Bildergalerien. http://lokeshdhakar.com/projects/lightbox2/


als Antwort auf: [#499613]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Turbohonk
Beiträge gesamt: 24

19. Aug 2012, 15:07
Beitrag # 12 von 16
Beitrag ID: #499615
Bewertung:
(5651 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hm…

ist nur ne Hypothese, ich kenne mich auch nicht aus damit, geschrieben hat das ein lieber Mensch für mich.
Ich weiss ja nicht ob sich Javascript so leicht irritieren lässt, ich habe aber ansonsten keine Erklärung dafür…


als Antwort auf: [#499614]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

Designerist
Beiträge gesamt: 40

19. Aug 2012, 15:15
Beitrag # 13 von 16
Beitrag ID: #499616
Bewertung:
(5639 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Da kann dir sicher der helfen, der den Script geschrieben hat. Das würde ich nicht selber heraustüfteln - lieber den Programmierer fragen :-)


als Antwort auf: [#499615]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

ganesh
Beiträge gesamt: 1981

20. Aug 2012, 04:18
Beitrag # 14 von 16
Beitrag ID: #499625
Bewertung:
(5551 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ Designerist ] ein div darf auf einer Seite nur 1x erscheinen. Hier heissen alle divs "album".


Das ist Quatsch. Man kann DIVs + Klassen beliebig oft verwenden. Was du meinst, sind unique identifiers - also <div id="foo"></div>. Bei <div class="foo"></div> ist das nicht der Fall.


als Antwort auf: [#499607]

Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen…

ganesh
Beiträge gesamt: 1981

20. Aug 2012, 04:21
Beitrag # 15 von 16
Beitrag ID: #499626
Bewertung:
(5550 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
@Turbohonk: schau dir mal die sogenannten "masonry" Techniken an, vielleicht wirst du hier fündig? http://designshack.net/articles/css/masonry/


als Antwort auf: [#499603]
(Dieser Beitrag wurde von ganesh am 20. Aug 2012, 04:22 geändert)
X

Aktuell

PDF / Print
pdf-standards-300x300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
19.10.2021

Online
Dienstag, 19. Okt. 2021, 10.00 - 10.30 Uhr

Webinar

Das Thema Farbmanagement in der Druckvorstufe ist für viele ein Buch mit sieben Siegeln. Was sind ICC-Profile? Wie kann ich Farbe sparen? Wie kann man Druckdaten für unterschiedliche Druckverfahren aufbereiten? Wir versorgen Sie mit unseren kostenlosen Webinaren mit Antworten.

kostenlos

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=237

Grundlagen Farbmanagement
Veranstaltungen
26.10.2021

Online
Dienstag, 26. Okt. 2021, 10.00 - 10.30 Uhr

Webinar

In unserem ca. 30-minütigen kostenlosen Webinar zeigt Ihnen unser Produktmanager Karsten Schwarze, wie Sie mit ColorLogic ColorAnt, CoPrA und ZePrA einen konsistenten Farbmanagement Workflow aufbauen und die Druckqualität sichern.

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=305

Mit ColorLogic ColorAnt & CoPrA & ZePrA zum perfekten Druckergebnis