tabelle EINFÜGEN Bild angepaßt also mittig anzeigen das es optisch besser aussieht.

Bitte nehmen Sie sich beim Verfassen einer Support-Anfrage mehr Zeit. Ihre Anfrage kann ich nicht parsen.

Beachten Sie auch folgendes:

Um Ihnen helfen zu können, benötigen wir mehr Informationen.

Wenn Sie Fehler / Probleme melden oder Fragen haben, seien Sie bitte so spezifisch wie möglich. "Funktioniert nicht" ist zum Beispiel für uns sehr schwer einzuschätzen. Wir wissen nicht, was Sie erwarten haben und was Sie getan haben, um das Erwartete zu erreichen. Es ist daher notwendig, alles genau zu beschreiben:

1. Welche Zeta Producer Version nutzen Sie?
2. Welches Layout nutzen Sie? Z.B.: "Smart Responsive" (Hilfe > Programminfo > Support-Informationen)
3. Was möchten Sie erreichen?
4. Was haben Sie gemacht? Beschreiben Sie Schritt für Schritt, welche Vorgänge Sie in Zeta Producer durchgeführt haben.
5. Welches Resultat haben Sie erwartet?
6. Was ist stattdessen passiert?
7. Wie ist die URL zur Website des veröffentlichten Projekts?
8. Falls etwas falsch aussieht, zeigen Sie uns das anhand eines Screenshot und teilen Sie uns die direkte URL der entsprechenden Seite mit.
9. Falls Sie eine Fehlermeldung erhalten, nutzen Sie die im Fehlerdialog enthaltene Option uns den Fehler zu berichten (unten links auf den Pfeil klicken). Alternativ klicken Sie die Option "Fehlerdetails" an posten den Text hier. Nur so erhalten wir genügend Details zur Fehlermeldung.

Wenn die Bilder in der Tabellenspalte nicht in einem Paragraph <p> wären, dann könnten Sie der Spalte per CSS eine Vertikale Ausrichtung beibringen: vertical-align: middle; Dazu würden Sie das Widget "Tabellarische Daten" zum bearbeiten öffnen, unten rechts auf das Zahnrad klicken, die Spalte für die Pflegesymbole anklicken und ins Feld HTML-Attribute folgendes eintragen: style="vertical-align: middle;"

Damit das greift, müssen aber, wie gesagt, die <p> Tags um das Bild herum entfernt werden (ggf. im Quelltext-Modus),

Ich habe das im Widget Tabellarische Daten so direkt nachgestellt. Die Spalte für die Bilder war bei mir vom Typ "Grafischer HTML-Editor" und bei mir wurde beim Einfügen eines Bilds kein <p> eingefügt. Ich habe auch allerdings nichts im Feld markiert um dann z.B. die zentrierte Textausrichtung zu wählen, was mir bei Ihnen der Fall scheint. Wenn das Icon auch horizontal zentriert sein soll, ergänzen Sie mein css und nuten Sie dieses: style="text-align: center; vertical-align: middle;"

Was an der Tabelle bei Ihnen noch nicht "wirklich" responsive sein soll, müssten Sie genauer beschreiben/erklären, denn ich weiß nicht, was Ihre Vorstellung davon ist.

Sie reden jetzt von der 2. Tabelle unten auf der verlinkten Seite, korrekt? Und was wollten Sie mit "…jetzt Sieht es so aus…" sagen?

Es sind immer noch <p>-Tags um die Icons, aber das ist doch nun so, wie Sie es wollten:

Die Icons sind Horizontal und vertikal zentriert. Wenn Ihnen die Spaltenbreiten nicht zusagen, müssen Sie diese halt noch anpassen (width: 1px;) oder alternativ, die Textausrichtung der Bildspalte wieder Linksbündig (text-align: left;) machen.

Das sollte natürlich nicht 1px sein, sondern z.B. 100px – je nachdem wir breit Sie die Spalte wünschen. Der Code wird einfach an den von mir oben genannten (vor dem letzten ") angefügt.

Halo,

das können Sie durch die im folgenden Artikel beschriebene Lösung optimieren, dann werden lange Zeilen umbrochen und die Spaltenbreite regiert responsive:

Widget Tabellarische Daten - Zeilenumbruch?

Zitat von Norman Behrens

Perfekt DANKE

Bei der CSS-Klasse singleimage kannste noch ein vertical-align: middle; einbauen, dann sieht es noch eleganter aus.

Hallo Norman Behrens ,

die Symbole zu den Pflegehinweisen (https://nbehrens.lima-city.de/1/pflege.htm) scheinen mir etwas unscharf zu sein.

Vielleicht würde es optisch besser wirken, wenn man diese austauscht?

Hier habe ich einige Symbole gefunden, die als SVG-Dateien veröffentlicht sind: https://de.wikipedia.org/wiki/Textilpflegesymbol

Soweit ich das beurteilen kann, sind sie "gemeinfrei" (Beispiel: https://commons.wikimedia.org/wiki/File:B%C3%BCgeln_1.svg, https://de.wikipedia.org/wiki/Textilpfl…w%C3%A4sche.svg).

Ob man sie nun allerdings auch auf einer gewerblichen Internetpräsenz nutzen darf, da bin ich mir nicht ganz sicher.

Vielleicht finden sich ja andernorts Symbole in besserer Qualität, die man käuflich erwerben kann.

Hallo Norman Behrens & jjonline ,

die Wikipedia-Bilder sind tatsächlich gemeinfrei und können auch gewerblich genutzt werden. Bei gemeinfreien Bildern empfiehlt es sich, zumindest im Impressum unter Bildnachweise auf die Gemeinfreiheit zu verweisen. "Bilder xyv gemeinfrei" oder "Symboldarstellungen gemeinfrei"

Die SVG bietet mit 375x375 px eine ausreichende Qualität.

Bitte Post #27 beachten.

Danke für die Info, Thomas!

War mir nicht ganz sicher, was die gewerbliche Nutzung angeht und wollte Norman hier nicht auf einen falschen Pfad führen.

Würdest Du die SVG-Dateien benutzen oder diese in ein anderes Dateiformat konvertieren für den Einsatz auf einer Website?

Hallo Jörg,

die Dinger sind ja quasi für das Netz geschrieben. Dadurch, dass der Hintergrund transparent ist, sind sie auch problemlos einzubinden.

Hi Thomas, danke Dir!

Dachte mehr in Bezug auf Ladegeschwindigkeit der Website.

SVG vs GIF vs PNG.

Bieten SVG hier (neben der Darstellung) Vorteile?

Wie schaut es mit der Kompabilität zu gängigen Browsern aus?

Hallo Jörg,

unter http://www.hanabi-pirna.de/test.php habe ich mal ein Wäschesymbol in jpg, png und svg nebeneinander gestellt. Mit der speziellen waschen.svg von Wikipedia stimmt übrigens etwas nicht, wie man dem Größenvergleich und Versatz des Bildtextes entnehmen kann. SVG-s lassen sich aber, wenn sie korrekt geschrieben sind, auch direkt über html-Quelltext anwenden. Bei der waschen.svg erfolgt zwar noch die Anzeige in Zeta, nach Veröffentlichung kommt jedoch für die Seite eine PHP-Fehlermeldung. Ich habe daher mal eine andere SVG als Quelltext und daneben als Bild beigefügt.

Wer das mit SVG als Quelltext mal probieren möchte, hier der Code:

<svg xmlns="http://www.w3.org/2000/svg" width="510" height="490" version="1">
  <path fill="#FFF" stroke="#000" stroke-width="12.5" d="M335.4 412.27l63.28 32.9c14.98 13.03 11.24 21.9 21.65 29.96 10.26 9.43 16.8 10.96 22.9 2.08 4.85-10.1 3.88-20.2 5.4-31.2 7.08-6.8 12.9-10.2 18.74-17 6.38-7.1 6.1-14.1-3.75-19.1-8.2-3.3-15.96-5-25.8-2.1-6.26 2-12.92 3.1-21.24-.4l-68.28-31.7-194-67.3c-26.1-12.7-47.78-22.2-73.6-36.5-14.02-11.1-9.5-23.8-26.48-34.1-7.47-3.7-12.87-5.4-18.85 4.8-3.82 9-3.52 18.6-4.1 27.9-6.68 7.2-14.24 11.4-19.73 20.3-7.95 12.8 4.1 17 10.6 18.6 18.44 4.6 25.1-3.7 42.1-.3 33.05 15.4 66.4 31.4 98.3 47.1z" stroke-linejoin="round"/>
  <path fill="#FFF" stroke="#000" stroke-width="12.5" d="M349.56 354.82l94.5-44.54c17.9-7.08 20.4 2.9 36.2 0 12.08-.14 22.07-4.86 21.24-16.23-6.1-9.03-11.8-14.7-22.48-24.57.56-10.54-1.4-20.67-5.4-30.8-4.17-5.97-11.67-8.6-22.9 2.08-11.38 8.6-7.78 20.12-22.07 32.05-23.3 11.6-44.54 21.8-70.35 34.6l-196.5 67.9c-22.75 12.1-43.42 23.3-69.5 33.3-21.24 5.3-20.4-7.7-46.2.9-7.37 5.8-7.23 14.2-1.26 20.4 6.93 6.8 11.8 11.1 17.9 17.1 1.94 8.6 2.22 16 3.33 26.3 4.16 12.6 13.33 11.9 21.23 5.8 3.47-4.3 7.77-8.2 10.4-12.9 3.6-6.2 7.64-13.3 12.5-19.1l62.85-33.3z" stroke-linejoin="round"/>
  <path fill="#FFF" stroke="#000" stroke-width="12.5" d="M128.5 221.56c-19.14-18.6-32.5-50.9-34.37-85.75-2-38.4 18.22-76.5 48.54-98.3C176.64 13.6 233.43 7 268.75 8.8c23.92.02 77.2 12.42 96.02 26.43 33 24 50.68 58.04 51.9 96.85 1.82 38.98-14.6 68.68-34.7 87.2"/>
  <path fill="#FFF" d="M130.4 215s-23.13 70.03 21.44 81.97l16.25 93.66c17.1 73.72 154.4 73.77 174.6 0l16.2-93.66c45.7-12.2 22.5-82 22.5-82z"/>
  <path fill="none" stroke="#000" stroke-width="12.5" d="M129.66 112.27c-7.75 6.78-6.77 16.97-5.38 32.2 1.1 11.55 8.48 22.93 8.87 33.5 2.7 22.27-3.88 44.56-6.98 62.78-2.13 20.92 3.88 38.95 11.63 45.92 7.75 6.88 17.76 9.73 28.27 12.94 9.55 2.5 14.5 6.9 21.73 12.3 8.6 9.2 10.66 16.7 10.46 26m183.8-226.1c7.75 6.8 6.77 17 5.38 32.2-1.1 11.6-8.48 23-8.87 33.5-2.7 22.3 3.88 44.6 6.98 62.8 2.13 21-3.88 39-11.63 46-7.75 6.9-21.94 10.6-28.27 12.9-7.37 2.6-14.92 7.3-21.72 12.7-8.2 7.9-10.66 16.3-10.47 25.6"/>
  <path fill="none" stroke="#000" stroke-width="12.5" d="M151.82 296.96c6.94 16.8 14.3 33.16 15 50.37-3.2 13.88-2.23 30.25 1.24 43.3 4.44 17.9 21.78 39.12 39.13 46.2 17.7 6.45 28.8 8.12 48.7 8.12"/>
  <path fill="none" stroke="#000" stroke-width="12.5" d="M358.92 296.96c-6.94 16.8-14.3 33.16-14.98 50.37 3.2 13.87 2.22 30.25-1.25 43.3-4.5 17.9-22 38.5-39.4 45.58-17.4 7.1-28.5 8.8-48.3 8.8"/>
  <path stroke="#000" stroke-width="1pt" d="M251.9 245.7c-9.7 7.38-11.86 9.86-17.22 18.02-1.94 3.15-5.56 10.5-6.55 15.44-1 4.94-1.73 12.1-1.72 15.9.1 12.85 4.1 20.9 8.6 20.63 4-.5 9.1-4.7 16.8-14.1m7.1-55.7c9.7 7.3 11.9 9.8 17.2 18 2 3.1 5.6 10.5 6.6 15.4s1.8 12.1 1.7 15.9c0 12.8-4.1 20.9-8.5 20.6-4-.5-9.1-4.7-16.8-14.1m-89.5-112.3c13.5-2.4 26.5-3.9 40-5.4 17.6-4.5 26.5 15.6 21.7 30.8-6.1 13.4-14.7 25.2-24.5 36.6-7.6 8.6-16.7 9.9-25.4 7-7-2-13.4-6.3-20.4-16.3-3-8.6-5.6-13.1-9.5-23.7-3.02-9.9 1.7-24.6 18.3-29.2zm172.1 0c-13.4-2.4-26.5-3.9-39.9-5.4-17.6-4.5-26.5 15.6-21.6 30.8 6.1 13.4 14.7 25.2 24.6 36.6 7.7 8.6 16.8 9.9 25.4 7 7-2 13.5-6.3 20.4-16.3 3.1-8.6 5.7-13.1 9.6-23.7 3.1-9.9-1.7-24.6-18.3-29.2z"/>
  <path fill="none" stroke="#000" stroke-width="6.25" d="M169.23 304.53c5.7 13.34 7.45 18.4 11.55 31.72 3.5 12.3 4.8 19.8 6.95 37.26m153.37-69.7c-5.7 13.4-7.46 18.4-11.57 31.7-3.5 12.3-4.78 19.8-6.94 37.3"/>
  <path fill="none" stroke="#000" stroke-width="5" d="M193.52 335.73c14.7 9.03 40.16 10.42 62.95 10 25.4-.12 47.13-1.95 61.4-10.6m-119.2 24.15c16.23 10.2 35.33 13.7 57.32 12.88 22.8-.56 40.3-2.48 56-13.17"/>
  <path fill="none" stroke="#000" stroke-width="6.25" d="M186.9 371.64c17.36 20.95 41.6 24.6 69.17 25.32 29.5 1.08 59.16-10.65 66.8-25.3"/>
  <path stroke="#000" stroke-width="5" d="M198.44 340.26l-.4 41.2m13.93-36.83l-.2 44.12m15.2-42.25l-.43 46.2m13.96-45.16l-.22 46.83m15.4-46.4v46.82m14.57-47.1l.2 46.8m12.92-48.1l.4 46m14.8-48.5l.2 44.1m13.53-49.6l.4 41.6"/>
</svg>

Wichtiger Nachtrag: Ich bin wegen des Fehlers in der SVG nochmals durch den gesamten Wikipedia-Artikel durchgegangen, es gibt hier eine Diskrepanz zwischen der deklarierten Gemeinfreiheit der Bilddatei und der markenrechtlichen Hinterlegung durch GINETEX. Wenn man etwas tiefer bohrt, findet sich die ISO 3758 als internationale Normung, in der ebenfalls der Schutz der Symbole durch Ginetex erwähnt wird.

Bitte vor Verwendung der Symbole Kontakt aufnehmen mit GINETEX, um verbindlich zu klären, inwieweit hier ein Markenschutz greift.

Guten Morgen Thomas,

vielen Dank für Dein ausführliches Feedback und auch für den Hinweis in Sachen GINETEX!

Man lernt nie aus. 😉