nicht angemeldet
Hallo,
eine Frage zu folgendem Code:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#foto {
width: 250px;
height: 320px;
float: left;
background: green;
}
#beschreibungFoto {
height: 320px;
display: table-cell;
vertical-align: middle;
padding: 10px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<h2>Startseite</h2>
<div>
<img id="foto" src="test.jpg"/>
<div id="beschreibungFoto">
<p>Beschreibung Foto Zeile 1</p>
<p>Beschreibung Foto Zeile 2</p>
<p>Beschreibung Foto Zeile 3</p>
</div>
</div>
<h3>Hobbys</h3>
<ul>
<li>Hobby 1</li>
<li>Hobby 2</li>
<li>Hobby 3</li>
</ul>
</div>
</body>
</html>
Es geht mir momentan nur um die Darstellung im Firefox. Mit dem von mir genutzen Markup und dem entsprechenden CSS wird der ganze Kram im Firefox so dargestellt wie ich das gerne hätte. Die Frage ist, ob das Markup bzw. das CSS so in Ordnung sind, oder ob man die gleiche Darstellung auch mit einem eleganteren Lösungsweg erreichen könnte?
Des weiteren eine Frage zu der CSS-Zeile "display: table-cell;". Der Kram wird nur dann so dargestellt wie ich das gerne hätte, wenn ich diese Zeile im Code lasse. Ich weiß aber nicht warum der ganze Kram ohne diese Zeile nicht auch wie gewünscht dargestellt wird. Könnt ihr mir vielleicht sagen warum diese Zeile notwendig ist bzw. was sie genau macht?
Gunnar Bittersmann