• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Feedback gewünscht Bild in einem Tabellen-Zellverbund anzeigen.

DerHanno

DerHanno

Neues Mitglied
1738276584708.png
In die rot markierte Multizelle möchte ich ein Bild einfügen. Viele Versuche ergaben kein annehmbares Ergebnis, die Multizelle wird nicht ausgefüllt.
Habs versucht mit HTML und mit CSS. Z.B. so:
<td colspan="3" rowspan="7" bgcolor="#666666"><div style="background-image:url(pics/runningMan.gif); background-position:149px 0px"></td>
Irgendwie fällt mir hierzu nichts mehr ein. Wahrscheinlich ist der Ansatz mit Tabelle so nicht durchführbar.
Vielleicht doch?
 
Guten Morgen @DerHanno und willkommen im Forum!
Ein Hintergrundbild wird nur sichtbar, wenn das Element, wo es drin ist, schon eine bestimmte Größe hat, i. allg. durch andere Element darin. In deinem Fall ist das nicht der Fall, weil die benachbarten Zellen in der Reihe alle leer sind. Verwende statt dessen einfach ein img-Tag, dann sollte es funktionieren:
Code: 
<td colspan="3" rowspan="7" bgcolor="#666666"><img src="pics/runningMan.gif"></td>

Was die Tabelle an sich betrifft: Bei dem vielen Spanning drängt sich die Vermutung auf, dass sie für deinen Fall weniger angebracht ist. Aber um das zu beurteilen müsste man die vollständige Tabelle sehen.
 
Danke für den Rat. War mein erster Gedanke, aber funktioniert natürlich auch nicht für diese Multizelle. Hier die ganze Tabelle, nochmal mit Deinem Vorschlag:
Code: 
<table width="80%" height="627" border="1" align="center" cellpadding="3" cellspacing="0" bordercolor="#00FF00">
  <tr> 
    <td colspan="2" bgcolor="#666666">&nbsp;</td>
    <td colspan="9" bgcolor="#999999"><p style="text-align:center;font-family:Verdana; font-weight:bold">LIQUIDSKY TECH</p></td>
    <td colspan="3" bgcolor="#CCCCCC">&nbsp;</td>
    <td colspan="4" rowspan="4" bgcolor="#999999">&nbsp;</td>
  </tr>
  <tr> 
    <td rowspan="8" bgcolor="#999999">&nbsp;</td>
    <td colspan="6" bgcolor="#CCCCCC">&nbsp;</td>
    <td colspan="3" rowspan="7" bgcolor="#666666"><img src="pics/runningMan.gif"></td>
    <td colspan="3" rowspan="2" bgcolor="#333333">&nbsp;</td>
    <td rowspan="6" bgcolor="#999999">&nbsp;
</td>
  </tr>
  <tr> 
    <td colspan="4" rowspan="3" bgcolor="#666666">&nbsp;</td>
    <td colspan="2" rowspan="3" bgcolor="#999999"><a href="html/helper.html"><p style="text-align:center" rev="prev">HELPER</p></a></td>
  </tr>
  <tr> 
    <td colspan="3" rowspan="6" bgcolor="#CCCCCC">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="3" rowspan="3" bgcolor="#666666">&nbsp;</td>
    <td rowspan="6" bgcolor="#CCCCCC">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="6" bgcolor="#CCCCCC">&nbsp;</td>
  </tr>
  <tr> 
    <td rowspan="5" bgcolor="#999999">&nbsp;</td>
    <td colspan="5" rowspan="3" bgcolor="#999999">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="4" rowspan="3" bgcolor="#333333">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="3" rowspan="2" bgcolor="#333333">&nbsp;</td>
  </tr>
  <tr> 
    <td rowspan="2" bgcolor="#CCCCCC">&nbsp;</td>
    <td colspan="4" bgcolor="#666666">&nbsp;</td>
    <td rowspan="4" bgcolor="#AAAAAA">&nbsp;</td>
    <td colspan="3" bgcolor="#999999">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="4" bgcolor="#CCCCCC"><a href="html/stuff.html"><p style="text-align:center;">STUFF</p></a></td>
    <td rowspan="3" bgcolor="#999999">&nbsp;</td>
    <td rowspan="4" bgcolor="#666666">&nbsp;</td>
    <td colspan="2" rowspan="2" bgcolor="#CCCCCC"><a href="html/filter.html"><p style="text-align:center;">FILTER</p></a></td>
    <td colspan="7" rowspan="4" bgcolor="#999999">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="6" rowspan="2" bgcolor="#333333">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="2" rowspan="2" bgcolor="#333333">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="8" bgcolor="#CCCCCC"><a href="html/mixer.html"><p style="text-align:center;">MIXER</p></a></td>
  </tr>
  <tr> 
    <td colspan="3" rowspan="2" bgcolor="#666666">&nbsp;</td>
    <td colspan="8" bgcolor="#999999"><a href="html/b-plates.html"><p style="text-align:center;">BLINDPLATES</p></a></td>
    <td colspan="7" rowspan="2" bgcolor="#333333">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="3" rowspan="2" bgcolor="#333333">&nbsp;</td>
    <td height="76" colspan="5" bgcolor="#666666">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="2" rowspan="3" bgcolor="#CCCCCC">&nbsp;</td>
    <td rowspan="3" bgcolor="#666666">&nbsp;</td>
    <td colspan="5" rowspan="2" bgcolor="#333333">&nbsp;</td>
    <td colspan="4" rowspan="7" bgcolor="#CCCCCC">&nbsp;</td>
    <td rowspan="7" bgcolor="#999999">&nbsp;</td>
    <td rowspan="7" bgcolor="#666666">&nbsp;</td>
    <td rowspan="7" bgcolor="#CCCCCC">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="3" bgcolor="#999999">&nbsp;</td>
  </tr>
</table>


1738311941613.png
 
Anscheinend habe ich da etwas falsch verstanden: Dein Bild ist schon sichtbar aber es füllt die Zelle nicht vollständig aus. Das kannst Du beheben durch object-fit:
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Gib dem img-Tag eine Klasse, z. B. so:
Code: 
<img class="running-man" src="pics/runningMan.gif">
Und setze object-fit auf cover oder contain, je nach dem, was Du erreichen willst:
Code: 
<style>
    img.img-running-man {
        object-fit: contain;
    }
</style>
Denke aber an folgendes: Wenn jetzt das Bild die Zelle nicht ausfüllt, muss es vergrößert werden und dabei wird die Qualität leiden.

Was die Frage "Tabelle oder nicht" betrifft: In der Tat ist eine Tabelle weniger geeignet für dieses Layout. Stattdessen grid:
css-tricks.com

CSS Grid Layout Guide | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
css-tricks.com css-tricks.com
Aber ich will jetzt nicht eine weitere Baustelle auf machen.
 
PS: Ich habe das jetzt in einer Testdatei untersucht mit dem Ergebnis, dass das object-fit in einer Tabellenzelle mit spanning nicht funktioniert. background-size für ein Hintergrundbild funktioniert jedoch:
HTML: 
            <td class="running-man" colspan="3" rowspan="7" bgcolor="#666666"></td>
CSS: 
    <style>
        td.running-man {
            background-image: url(images/88x64.jpg);
            background-size: cover;
        }
    </style>
Platziere das CSS im head-Bereich.
 
Danke für die schnelle Antwort. Ich werde es versuchen mit object-fit, aber ich glaube auch damit nicht an einen Erfolg. Ich versuche es trotzdem - man lernt eben nie aus. Grund (meiner Meinung nach) ist, dass wir es hier nicht mit EINER Zelle zu tun haben, sondern durch die Tabellenkonstruktion hier eine Multizelle entstanden ist, wo nur eine Teilzelle bebildert werden kann. Ich könnte das Bild ja in entsprechende Stücke zerschneiden und in jede der Einzelzellen ein entsprechendes Teilstück einfügen, aber damit kommen wir in einen Bereich, der sehr viel Zeit beanspruchen dürfte.
Der Hintergrund für dieses Layout war, ohne großartige Bilder ein Themen-angepasstes Design mit nur einem kleinen Zentralbild zu erzeugen. Wichtig hierbei ist ein minimaler Speicherbedarf.
 
Grund (meiner Meinung nach) ist, dass wir es hier nicht mit EINER Zelle zu tun haben, sondern durch die Tabellenkonstruktion hier eine Multizelle entstanden ist, wo nur eine Teilzelle bebildert werden kann.
Zum Vergrößern anklicken....
Den Eindruck habe ich auch. Hast Du auch mein "PS" gelesen? Lade mal die Seite neu. Mit background-image und background-size funktioniert es.
 
Huii! es klappt. Muss jetzt noch die Bildgröße anpassen. Damit kann ich das Tabellenlayout behalten. Werde diese Variante evtl. auch in den eingebetteten Links mit kleinen Bildchen durchführen... bin begeistert, vielen Dank!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben