[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:
(5747 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:
(5699 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, 13:51
Beitrag # 3 von 16
Beitrag ID: #499606
Bewertung:
(5683 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, 13:53
Beitrag # 4 von 16
Beitrag ID: #499607
Bewertung:
(5683 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:
(5668 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:
(5645 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:
(5634 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:
(5626 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:
(5587 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:
(5545 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:
(5540 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:
(5527 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:
(5515 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:
(5427 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:
(5426 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

Aktuell

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
07.12.2020 - 08.12.2020

Digicomp Academy AG, Küchengasse 9, 4051 Basel
Montag, 07. Dez. 2020, 08.30 Uhr - Dienstag, 08. Dez. 2020, 17.00 Uhr

Kurs

Dieser Basic-Kurs ist der perfekte Einstieg in die Welt von InDesign, dem vielseitigen Layout-Programm. Sie lernen, wie InDesign aufgebaut ist, wie saubere Dokumente erstellt werden und wie man korrekt mit gelieferten InDesign-Projekten umgeht.

CHF 1'400.-
Dauer: 2 Tage

Nein

Organisator: Digicomp Academy AG

Kontaktinformation: Isil Günalp, E-Mailisil.guenalp AT digicomp DOT ch

https://www.digicomp.ch/weiterbildung/software-anwendungs-trainings/adobe-trainings/desktop-publishing/adobe-indesign-cc/kurs-indesign-cc-basic

Veranstaltungen
21.01.2021 - 22.01.2021

Digicomp Academy AG, Bern oder Basel
Donnerstag, 21. Jan. 2021, 08.30 Uhr - Freitag, 22. Jan. 2021, 17.00 Uhr

Kurs

Dieser Basic-Kurs ist der perfekte Einstieg in die Welt von InDesign, dem vielseitigen Layout-Programm. Sie lernen, wie InDesign aufgebaut ist, wie saubere Dokumente erstellt werden und wie man korrekt mit gelieferten InDesign-Projekten umgeht.

Dauer: 2 Tage
Preis: CHF 1'400.–

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/INDEM1

Neuste Foreneinträge


Affiniti und was noch

Suchen/Ersetzen-Funktion bei Textübernahme

iPhone Farbprofil

Lab - 8 bit/16bit

Austauschen

Home-Office

Fehlende Bilddarstellung in Mail

Wer bist du? - Stell' dich vor!

Anpassung von Scriptfunktion auf Bleedbox

Jobs aus dem Quark sollen im Acrobat verglichen werden
medienjobs