nicht angemeldet
Lieber Didier,
Ich bin Anfänger auf diesem Gebiet. Wie ist das in CSS realisierbar?
dazu solltest Du Dir das CSS-Kapitel in SelfHTML zu Gemüte führen!
Hier ein Ansatz, der Dir beim Erlernen von CSS sicherlich manche Denkaufgabe gibt:
<html>
<head>
<title>Hunde und Katzen</title>
<style type="text/css">
h1 { text-align: center; }
table.sonderklasse { margin: 0 auto; padding: 0; width: 250px; border: 1px solid black; border-collapse: collapse; }
th.t-ueberschrift { font-style: italic; margin: 0; padding: 1em; border: 1px solid black; }
td.t-inhalt { margin: 0; padding: 1em; border: 1px dotted black; }
td.t-inhalt img { max-width: 120px; max-height: 120px; }
</style>
</head>
<body>
<h1>Hunde und Katzen</h1>
<table class="sonderklasse">
<tr>
<th class="t-ueberschrift">Hunde</th><th class="t-ueberschrift">Katzen</th>
</tr>
<tr>
<td class="t-inhalt"><img src="pfad/hunde.jpg" alt="viele Hunde" /></td>
<td class="t-inhalt"><img src="pfad/katzen.jpg" alt="viele Katzen" /></td>
</tr>
<tr>
<td class="t-inhalt">Das hier sind viele Hunde.</td>
<td class="t-inhalt">Hier sieht man viele Katzen.</td>
</tr>
</table>
</body>
</html>
Wenn Du das Kapitel über CSS studierst, dann wirst Du in diesem Beispiel immer mehr verstehen. Es lohnt sich!
Ich habe oben Bilder in einer Tabellenzelle mit der Klasse t-inhalt als maximal 120 Pixel breit und lang definiert. Das funktioniert nicht im Internet-Explorer und führt auch zu verzerrten Bildern. Es ist daher ratsamer, diese CSS-Zeile weg zu lassen, um die Bildgröße mittels Javascript berechnen zu lassen. Aber wenn der User sein Javascript deaktiviert hat, dann klappt auch das nicht.
Liebe Grüße aus Ellwangen,
Felix Riesterer.