Image rechts unten in Tabellenzelle positionieren

[Pit]

Hallo,

mir gelingt es nicht, ein Image rechts unten in einer Tabellenzelle zu positionieren.

.img_ruiz {
float: right;
vertical-align: bottom;
cursor:pointer;
}

Float greift, aber vertical-align nicht. Über die Tabellenzelle selber kann ich es nicht positionieren, da nicht alles innerhalb der Zelle rechts unten stehen soll, sondern nur das Image.

Pit

[Matthias Apsel]

Hallo Pit,

mir gelingt es nicht, ein Image rechts unten in einer Tabellenzelle zu positionieren.

Über die Tabellenzelle selber kann ich es nicht positionieren, da nicht alles innerhalb der Zelle rechts unten stehen soll, sondern nur das Image.

Das sieht für mich so aus, als ob die Tabelle nicht die richtige Option ist. Eine Tabelle dient der Darstellung tabellarischer Daten. Bild und noch mehr in einer Zelle widerspricht diesem Gedanken.

Je nach Charakter des Bildes könntest du auch ein Hintergrundbild verwenden. Zu vertical-align hilft der Artikel im Wiki.

Bis demnächst
Matthias

[Pit]

Hi Matthias,

Das sieht für mich so aus, als ob die Tabelle nicht die richtige Option ist. Eine Tabelle dient der Darstellung tabellarischer Daten. Bild und noch mehr in einer Zelle widerspricht diesem Gedanken.

Ich weiß... dieser Hinweis kommt, sobald jemand nur das Wort "Tabelle" in den Mund nimmt 😉 Aber keone Sorge, es handelt sich um einen Terminkalender, der neben Terminen in der Zelle unten rechts ein kleines Plus-Symbol beinhalten soll, um einen neuen Termin anzulegen.

Je nach Charakter des Bildes könntest du auch ein Hintergrundbild verwenden. Zu vertical-align hilft der Artikel im Wiki.

Hintergrundbild rechts unten wäre kein Problem. Das macht aber andere Probleme, nämlich die eindeutige ID des Hintergrundbildes fehlt (könnte ich ggf. über die Zelle nehmen) und das Bild muß ja anklickbar sein.

Pit

[Matthias Apsel]

Hallo Pit,

Ich weiß... dieser Hinweis kommt, sobald jemand nur das Wort "Tabelle" in den Mund nimmt 😉

Nicht zwangsläufig.

das Bild muß ja anklickbar sein.

Bilder sind nicht interaktiv. Buttons sind es.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

das Bild muß ja anklickbar sein.

Bilder sind nicht anclickbar!

(Nicht bei allen Nutzern; nur bei einigen.)

Bilder sind nicht interaktiv. Buttons sind es.

Und das sollte Pit auch schon seit ein paar Tagen wissen.

<button><img src="…" alt="neuer Termin"/></button>

oder <button><svg><title>neuer Termin</title> … </svg></button>

LLAP 🖖

[Klawischnigg]

Hi there,

Das sieht für mich so aus, als ob die Tabelle nicht die richtige Option ist. Eine Tabelle dient der Darstellung tabellarischer Daten. Bild und noch mehr in einer Zelle widerspricht diesem Gedanken.

Ich weiß... dieser Hinweis kommt, sobald jemand nur das Wort "Tabelle" in den Mund nimmt

Mach' Dir nichts d'raus. Das ist bei vielen hier im Forum eine Art angeborener Reflex. Die können nicht anders. Hat keine weitere Bedeutung, konzentrier' Dich lieber auf die Lösung Deines Problems…

[Matthias Apsel]

Hallo Klawischnigg,

ich halte es schon für wichtig, semantisch möglichst korrektes HTML zu schreiben und für sinnvoll, dass es hier im Forum hinterfragt wird.

Bis demnächst
Matthias

[Klawischnigg]

Hi there,

ich halte es schon für wichtig, semantisch möglichst korrektes HTML zu schreiben und für sinnvoll, dass es hier im Forum hinterfragt wird.

Das ist ja auch sehr sinnvoll; nicht sinnvoll ist es hingegen, sich hier als Anti-Tabellen-Talib zu gerieren. Leider versteht nicht jeder, daß Du nur auf die semantisch korrekte Verwendung hinweist, sondern es ensteht leicht der Eindruck, daß Tabellen an sich etwas ganz ganz Böses sind. Was dann das genaue Gegenteil des von Dir Beabsichtigen enstehen läßt, wie man an dem Posting eines Users vor ein paar Tagen sehen konnte, der aus lauter Verzweiflung, nur ja keine böse Tabelle zu verwenden, eine solche mit einer abenteuerlichen Konstruktion aus Div-Suppe nachgebaut hat...😉

[Gunnar Bittersmann]

@@Klawischnigg

es ensteht leicht der Eindruck, daß Tabellen an sich etwas ganz ganz Böses sind.

[Cheatah, 2006]

LLAP 🖖

[Sophie]

Mach' Dir nichts d'raus. Das ist bei vielen hier im Forum eine Art angeborener Reflex. Die können nicht anders. Hat keine weitere Bedeutung, konzentrier' Dich lieber auf die Lösung Deines Problems…

Dem kann ich zu 100% zustimmen! Höre nicht auf andere, ziehe dein Ding durch.

[Rolf B]

Hallo Matthias,

Du meinst also, dass tabellarische Daten keine unterstützende Visualisierung mit Bildern oder Icons brauchen können?

Ein Ausrufezeichen, z.B., um Wichtigkeit darzustellen? Oder eine grüne Ecke für „Zelle hat Anmerkung“, a la Excel? Oder eine rote Ecke für „Zelle wurde bearbeitet“ a la Kendo Grid?

Ich bin nicht deiner Meinung.

Ich stimme dir allerdings zu, dass das kein img sein muss.

Kendo realisiert die rote Ecke mit einem absolut positionierten :before CSS, das einen linken und oberen Rand hat und genauso groß ist wie der Rand breit. Damit es in der Tabellenzelle bleibt, hat die ein position:relative. Glaub ich jedenfalls, sitze grad mit Handy im Zug und kann schlecht probieren.

Ich würde behaupten (hab es noch nicht gemacht), dass man dem :before auch ein Hintergrund Bild geben kann statt eines Randes.

Rein technisch kann man auch ein normales img absolut positionieren. Ob es sinnvoll ist, hängt von der Semantik des Bildes ab. Wenn das Bild ein Bedienelement sein soll, ist ein reines img ohnehin falsch.

Rolf

[Pit]

Hallo Rolf, Hallo Matthias,

Rein technisch kann man auch ein normales img absolut positionieren. Ob es sinnvoll ist, hängt von der Semantik des Bildes ab. Wenn das Bild ein Bedienelement sein soll, ist ein reines img ohnehin falsch.

das Bild muß ja anklickbar sein.

Bilder sind nicht interaktiv. Buttons sind es.

Das war auch miene Idee. Aber ich habe es nicht geschafft, einen Button zu konstruieren, der alleine aus einem Image besteht. Ein "reiner Button" sieht einfach nicht gut aus.

Und das Problem der Positionierung "unten rechts" in der Tabellenzelle bleibt doch auch gleich oder nicht?

Pit

[Gunnar Bittersmann]

@@Pit

Aber ich habe es nicht geschafft, einen Button zu konstruieren, der alleine aus einem Image besteht. Ein "reiner Button" sieht einfach nicht gut aus.

Du kannst für diese Buttons border: none; background: transparent setzen.

Und das Problem der Positionierung "unten rechts" in der Tabellenzelle bleibt doch auch gleich oder nicht?

Gleich ja. Bleibt nicht, denn Rolf hat dir eben schon eine Lösung gesagt. (Nur halt nicht für ein Pseudoelement, sondern für den Button anwenden.)

LLAP 🖖

[Pit]

Hi Gunnar,

Du kannst für diese Buttons border: none; background: transparent setzen.

Ok. Das probiere ich aus.

Und das Problem der Positionierung "unten rechts" in der Tabellenzelle bleibt doch auch gleich oder nicht?

Gleich ja. Bleibt nicht, denn Rolf hat die eben schon eine Lösung gesagt. (Nur halt nicht für ein Pseudoelement, sondern für den Button anwenden.)

Ja, das habe ich aber noch nicht ganz verstanden. Ich dachte, dass sich das :before oder auch :after auf den Container bezieht, in dem der Inhalt steht. Ok, da könnte ich das Image hereinsetzen, aber woher beziehe ich dann die Zellen-ID, wenn ich das Image per CSS einsetze? Dann kann ich doch auch gleich einen Tabellenhintergrund inkl. Image setzen? Oder nicht?

Übrigens, danke für Eure Hilfe an dieser Stelle mal. Ich nehm da viel bei mit.

Pit

[Matthias Apsel]

Hallo Pit,

Ich dachte, dass sich das :before oder auch :after auf den Container bezieht, in dem der Inhalt steht. Ok, da könnte ich das Image hereinsetzen, aber woher beziehe ich dann die Zellen-ID, wenn ich das Image per CSS einsetze? Dann kann ich doch auch gleich einen Tabellenhintergrund inkl. Image setzen? Oder nicht?

<td>Text<button>Click</button></td>

td { position: relative; }
td button { position: absolute; bottom: 0; right: 0; }

Übrigens, danke für Eure Hilfe an dieser Stelle mal. Ich nehm da viel bei mit.

Gern.

Bis demnächst
Matthias

[Rolf B]

Hallo Pit,

wieso hatte ich es nur im Urin, dass das Bild mehr als ein Bild werden sollte...

Mit :before/:after kann man keine interaktiven Elemente bilden, da brauchst du das andere Konstrukt, das ich angedeutet habe.

Aber Felix hat ja die Lösung schon gepostet.

Rolf

[Matthias Apsel]

Hallo Pit,

Ein "reiner Button" sieht einfach nicht gut aus.

Da lässt sich so ziemlich alles erreichen.

Obwohl ein reiner Button den Vorteil hat, als solcher erkannt zu werden.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Da lässt sich so ziemlich alles erreichen.

Das Beispiel ist nicht gut. $Nutzer clickt auf die Icons und es passiert – nichts.

Die Icons gehören mit in die Buttons.

Obwohl ein reiner Button den Vorteil hat, als solcher erkannt zu werden.

Das sollte bei einer entsprechend gestalteten Grafik auch der Fall sein.

Den Alternativtext (nicht vergessen!) sollte man so gestalten, dass er auch als interaktives Element erkennbar ist.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Schlimmer noch, ich klicke auf ein Ding, das nach dem Button für Windows aussieht, aber de facto liegt da überlappend der Android Button. Und der Apfel trägt die Farben der dunklen Seite: Schwarz auf Schwarz.

Oder liegt da an einer kaputten Darstellung auf meinem Handy? (Gut 5 Zoll, kein Retina-Display)

Rolf

[Matthias Apsel]

Hallo Rolf B,

Oder liegt da an einer kaputten Darstellung auf meinem Handy? (Gut 5 Zoll, kein Retina-Display)

Daran, dass schmale Bildschirme nicht beachtet wurden.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

selbst Querformat reicht nicht. So „Max“ wie behauptet ist mein Zenfone also offenbar nicht 😂

Ich würd's ja fixen, aber nicht mit Handy in der Eisenbahn…

Rolf

[Pit]

Da lässt sich so ziemlich alles erreichen.

Wow, nicht schlecht!

[Tabellenkalk]

Hallo,

Button_mit_CSS-2.html

ist das gut, dass die Versionsnummern nur im CSS per ::after stehen? Ist das nicht eigentlich Inhalt, der mindestens auch ins HTML gehört?

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

ist das gut, dass die Versionsnummern nur im CSS per ::after stehen? Ist das nicht eigentlich Inhalt, der mindestens auch ins HTML gehört?

Man kann immer alles hinterfragen und vieles verbessern. Nur zu, es ist ein Wiki.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Nur zu, es ist ein Wiki.

und der zugehörige Bearbeiten-Button ist wo?

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

und der zugehörige Bearbeiten-Button ist wo?

Ich habe dich mal zum Beispieladministrator gemacht. Beachte, dass die Struktur mit main und h1 außerhalb erhalten bleiben muss, sonst funktioniert das frickl nicht mehr.

Jetzt solltest du den Schriftzug "bearbeiten …" in den Beispielheadern sehen.

https://wiki.selfhtml.org/wiki/Beispiel:Button_mit_CSS-2.html?action=edit

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Ich habe dich mal zum Beispieladministrator gemacht.

achwas, ich hab vor 5 Jahren mich da mal registriert? und dann auch tatsächlich einmal editiert…
man was war ich damals doch noch enthusiastisch!

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

achwas, ich hab vor 5 Jahren mich da mal registriert? und dann auch tatsächlich einmal editiert…
man was war ich damals doch noch enthusiastisch!

Und jetzt wieder⁉️ Soll ich dir mal was über Sterne verraten?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Soll ich dir mal was über Sterne verraten?

Sterne?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Sterne?

Sterne ff.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Pit,

eine Tabelle etwa so:

<table class="calendar">
 <tbody>
  <tr>
   <td>
    Lorem Ipsum dolor sit amet...
    <button name="irgendwas"><img src="..." alt="..."></button>
   </td>
  </tr>
 </tbody>
</table>

Das passende CSS dazu:

/* offest parent festlegen */
.calendar td {
 position: relative;
}

/* Platz für button unten schaffen*/
.calendar td {
 padding-bottom: 1.5em;
}

/* button positionieren */
.calendar td button {
 bottom: 0.1em;
 position: absolute;
 right: 0.1em;
}

Liebe Grüße,

Felix Riesterer.

[Pit]

Hallo Felix,

/* offest parent festlegen */
.calendar td {
 position: relative;
}

Warum an dieser Stelle "position: relative;"?

/* button positionieren */
.calendar td button {
 bottom: 0.1em;
 position: absolute;
 right: 0.1em;
}

Ich hatte das bei meinen Versuchen einmal fast genauso umgesetzt und es lief nicht. Ich muß Deine Lösung mal probieren. Danke, Pit

[Matthias Apsel]

Hallo Pit,

Warum an dieser Stelle "position: relative;"?

Position richtig verwenden

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Pit

/* offest parent festlegen */
.calendar td {
 position: relative;
}

Warum an dieser Stelle "position: relative;"?

Absolute Positionierung erfolgt „with respect to its containing block. The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block…).“ [CSS 2.2 §9.8.4]

Nearest positioned ancestor heißt: das nächste Vorfahrenelement, dessen position-Eigenschaft nicht den Wert static (Defaultwert) hat.

Wenn sich die absolute Positionierung des Buttons also auf die Tabellenzelle beziehen soll, musst du deren position-Eigenschaft einen anderen Wert geben als static – und zwar einen, der die Tabelle nicht kaputtmacht o.a. Nebenwirkungen zeigt. Genau das leistet relative.

LLAP 🖖

[Pit]

Hi Gunnar,

Wenn sich die absolute Positionierung des Buttons also auf die Tabellenzelle beziehen soll, musst du deren position-Eigenschaft einen anderen Wert geben als static – und zwar einen, der die Tabelle nicht kaputtmacht o.a. Nebenwirkungen zeigt. Genau das leistet relative.

Bei mir leider grad nicht. Das "relative" bewirkt, dass der background-color meine Border "überschreibt", was in einem Kalender natürlich doof wäre. Ich google schon seit graumer Zeit, habe aber hierfür keine Lösung gefunden.

Pit

[Gunnar Bittersmann]

@@Pit

Das "relative" bewirkt, dass der background-color meine Border "überschreibt"

?? Lass mal sehen!

LLAP 🖖

[Pit]

Hi Gunnar,

Das "relative" bewirkt, dass der background-color meine Border "überschreibt"

?? Lass mal sehen!

Schau mal… Pit

[Gunnar Bittersmann]

@@Pit

Das "relative" bewirkt, dass der background-color meine Border "überschreibt"

?? Lass mal sehen!

Schau mal…

Ui, doch eine unerwünschte Nebenwirkung.

Aber: mit richtigem Markup wär das nicht passiert. td ist für Datenzellen; für Kopfzellen ist th da.

Sämtliche Zellen im thead sind Kopfzellen, sollten also th sein. Ebenso die jeweils ersten Zellen in jeder Zeile im tbody.

Wenn du nur Kopfzellen eine Hintergrundfarbe verpasst, stört td { position: relative } nicht.

LLAP 🖖

[Pit]

Wenn du nur Kopfzellen eine Hintergrundfarbe verpasst, stört td { position: relative } nicht.

Hi Gunnar,

das ist nicht ganz korrekt, denn ganz links die Mitarbeiterspalte hat ebenfalls einen Hintergrund. Und diese Zellen sind keine Kopfzellen…

Sieht man besser, wenn die Border rot sind.

Pit

[Gunnar Bittersmann]

@@Pit

das ist nicht ganz korrekt, denn ganz links die Mitarbeiterspalte hat ebenfalls einen Hintergrund.

Du meinst den gelben bei „Test“?

Und diese Zellen sind keine Kopfzellen…

Doch, sind sie: Zeilenköpfe.

LLAP 🖖

[Pit]

Doch, sind sie: Zeilenköpfe.

Ok, einverstanden, das ließe sich ändern. Bleiben aber immer noch die Sa und So, die dann ohne Background wären…

Pit

[Pit]

Wenn du nur Kopfzellen eine Hintergrundfarbe verpasst, stört td { position: relative } nicht.

Hi Gunnar,

das ist nicht ganz korrekt, denn ganz links die Mitarbeiterspalte hat ebenfalls einen Hintergrund. Und diese Zellen sind keine Kopfzellen…

Sieht man besser, wenn die Border rot sind.

Ebenso die jeweils ersten Zellen in jeder Zeile im tbody.

Was meinst Du damit?

Und zudem wären meine Sa-So-TDs ja dann auch nicht farblich markiert.

Also irgendwie klappts so jedenfalls nicht wirklcih, es sei denn, man nimmt Workarounds her, die dann aber nciht dem eigentlich gewünschten Ergebnis entsprechen.

Pit

[Matthias Apsel]

Hallo Pit,

Also irgendwie klappts so jedenfalls nicht wirklcih, es sei denn, man nimmt Workarounds her, die dann aber nciht dem eigentlich gewünschten Ergebnis entsprechen.

Als allererstes solltest du eine semantisch korrekte Tabelle bauen.

<table>
  <thead>
    <tr>
     <th class='kalenderwoche'>KW 42</td>
     <th class='arbeitstag'>Mo, 16.10.17</th>
     <th class='arbeitstag'>Di, 17.10.17</th>
     <th class='arbeitstag'>Mi, 18.10.17</th>
     <th class='arbeitstag'>Do, 19.10.17</th>
     <th class='arbeitstag'>Fr, 20.10.17</th>
     <th class='wochenende'>Sa, 21.10.17</th>
     <th class='wochenende'>So, 22.10.17</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <th class='MA'>Test</th>
      <td class='arbeitstag'> </td>
      <td class='arbeitstag'> </td>
      <td class='arbeitstag'> </td>
      <td class='arbeitstag'> </td>
      <td class='arbeitstag'> </td>
      <td class='wochenende'> </td>
      <td class='wochenende'> </td>
    </tr>
  </tbody>
</table>

Bis demnächst
Matthias

[Pit]

Hallo Matthias,

Als allererstes solltest du eine semantisch korrekte Tabelle bauen.

Genau das habe ich auch gemacht, während Du das tatst 😉

Pit

P.S: Ändert aber nichts an den Sa/So-Zellen ohne background...

[Matthias Apsel]

Hallo Pit,

Ändert aber nichts an den Sa/So-Zellen ohne background..

Was soll da passieren?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Pit

Und zudem wären meine Sa-So-TDs ja dann auch nicht farblich markiert.

Davon war im Fiddle nichts zu sehen. Geht aber auch: mit vordefinierten Spalten, die die Hintergrundfarbe verpasst bekommen. ☞ Beispiel

Problematisch wird es nur, falls du vorhaben solltest, einzelnen Datenzellen auch noch eine Hintergrundfarbe zu geben (wie im Beispiel beim 3. Oktober).

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Beispiel

Problematisch wird es nur, falls du vorhaben solltest, einzelnen Datenzellen auch noch eine Hintergrundfarbe zu geben (wie im Beispiel beim 3. Oktober).

Du kannst auch das Rahmenmodell mit nicht zusammenfallenden Rahmen nehmen und für die Zellen rechten und unteren Rahmen setzen. Die Zellen im thead bekommen zusätzlich noch Rahmen oben; die jeweils ersten Zellen einer Zeile zusätzlich noch Rahmen links.

☞ Beispiel

LLAP 🖖

[Pit]

Hi Gunnar,

Du kannst auch das Rahmenmodell mit nicht zusammenfallenden Rahmen nehmen und für die Zellen rechten und unteren Rahmen setzen. Die Zellen im thead bekommen zusätzlich noch Rahmen oben; die jeweils ersten Zellen einer Zeile zusätzlich noch Rahmen links.

Sieht gut aus, das Modell. Ob ichs übernehme, kommt drauf an, ob ichs verstehen werde. 😉

Geht das übrigens auch mit ganz dünnen Linien?

Pit

[Matthias Apsel]

Hallo Pit,

Geht das übrigens auch mit ganz dünnen Linien?

Klar, ersetze alle thick durch thin.

Bis demnächst
Matthias

[Pit]

Hallo Matthias,

Klar, ersetze alle thick durch thin.

Klasse. Sieht sehr schön aus mit dünnen Linien.

Pit

[Felix Riesterer]

Lieber Pit,

in meinem neuesten Projekt, in dem ich einen Kalender pflege, ist die Darstellung auch eine Tabelle (eben der Kalender mit seinen Tagen). In den Tabellenzellen habe ich auch ein Plus-Symbol, um neue Termine hinzufügen zu können. Diese aber sind echte Links. Und da sich das Tagesdatum in der linken oberen Ecke befindet, ist in der rechten Platz für eben dieses Symbol. Ich benötige keine Buttons und keine absolute Positionierung, sondern kommen mit gefloateten Links zurecht. Absolute/relative Positionierung verwende ich für "generierten Content" (also das +-Zeichen) innerhalb dieser gefloateten Links.

Liebe Grüße,

Felix Riesterer.