nicht angemeldet
eine Frage zu folgendem Code:
DOCTYPE fehlt
<html>
<head>
CSS besser in eine File auslagern und via <link> einbinden.
<style type="text/css"> * { margin: 0px; padding: 0px; }
Sehr Böse!
kein color und background für body definiert!
#foto { width: 250px; height: 320px; float: left; background: green;
color fehlt!
} #beschreibungFoto { height: 320px; display: table-cell;vertical-align: middle;
padding: 10px;
background: yellow;
}
color fehlt!
</style>
<title> Element fehlt.
</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?
Warum fragst du nicht den Validator?
Das kommt darauf an, was deine Seite später noch beinhaltet.
> 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.
Weil vertical-align je nach display-typ etwas verschiedenes bedeutet.
Um Bild neben Text anzuordnen, hättest du ja das Bild statt zu floaten auch gleich mit table-cell beschreiben können. Das hätte dir mindestens clearing Effekte erspart.
Eine andere Methode ist display-inline-block.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Gunnar Bittersmann