[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, 22:27
Beitrag # 1 von 16
Bewertung:
(6146 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, 13:04
Beitrag # 2 von 16
Beitrag ID: #499605
Bewertung:
(6098 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: 1965

19. Aug 2012, 13:51
Beitrag # 3 von 16
Beitrag ID: #499606
Bewertung:
(6082 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
^^


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, 13:53
Beitrag # 4 von 16
Beitrag ID: #499607
Bewertung:
(6082 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, 14:08
Beitrag # 5 von 16
Beitrag ID: #499608
Bewertung:
(6067 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, 14: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, 14:30
Beitrag # 6 von 16
Beitrag ID: #499609
Bewertung:
(6044 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, 14:35
Beitrag # 7 von 16
Beitrag ID: #499610
Bewertung:
(6033 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, 14:39
Beitrag # 8 von 16
Beitrag ID: #499611
Bewertung:
(6025 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, 15:40
Beitrag # 9 von 16
Beitrag ID: #499612
Bewertung:
(5986 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, 16:56
Beitrag # 10 von 16
Beitrag ID: #499613
Bewertung:
(5944 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, 17:04
Beitrag # 11 von 16
Beitrag ID: #499614
Bewertung:
(5939 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, 17:07
Beitrag # 12 von 16
Beitrag ID: #499615
Bewertung:
(5926 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, 17:15
Beitrag # 13 von 16
Beitrag ID: #499616
Bewertung:
(5914 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, 06:18
Beitrag # 14 von 16
Beitrag ID: #499625
Bewertung:
(5826 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, 06:21
Beitrag # 15 von 16
Beitrag ID: #499626
Bewertung:
(5825 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, 06:22 geändert)
X

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
14.05.2024

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Horizon

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

Einsparpotenziale in der Weiterverarbeitung
Veranstaltungen
16.05.2024

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

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

Und es geht doch: Automatisierung im Großformatdruck!