clearen mit Hilfe von :after
0 0 
molily
clearen mit Hilfe von :after
Hi,
zwei Fragen zu folgendem Quellcode:
1.) Ist diese Lösung hinsichtlich der Semantik und des Markups ideal, oder könnte ich sie noch verbessern?
2.) Die Zeilen "Bildbeschreibung Zeile 1", "Bildbeschreibung Zeile 2" und "Bildbeschreibung Zeile 3" sollen bezogen auf die Höhe des Bildes zentriert werden. Was wäre hier die eleganteste Lösung?
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.picWithText img {
width: 250px;
height: 320px;
float: left;
}
.picWithText:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="picWithText">
<img src="test.jpg">
<p>Bildbeschreibung Zeile 1</p>
<p>Bildbeschreibung Zeile 2</p>
<p>Bildbeschreibung Zeile 3</p>
</div>
<h3>Diese Liste soll unter dem Foto stehen</h3>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</body>
</html>
-
zwei Fragen zu folgendem Quellcode:
1.) Ist diese Lösung hinsichtlich der Semantik und des Markups ideal, oder könnte ich sie noch verbessern?
2.) Die Zeilen "Bildbeschreibung Zeile 1", "Bildbeschreibung Zeile 2" und "Bildbeschreibung Zeile 3" sollen bezogen auf die Höhe des Bildes zentriert werden. Was wäre hier die eleganteste Lösung?Wenn ein Bild eine Beschreibung braucht, dann verwende den alt-Text.
Wenn ein Bild in der Tat aber ein Sprite ist, dann verwende in dem Fall separate Bilder, die dir separate alt-Texte zulassen.
Wenn das Bild aber nur als Hintergrund dient, so verwende kein img sondern verwende background zu den p Elementen.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
2.) Die Zeilen "Bildbeschreibung Zeile 1", "Bildbeschreibung Zeile 2" und "Bildbeschreibung Zeile 3" sollen bezogen auf die Höhe des Bildes zentriert werden.
Siehe https://forum.selfhtml.org/?t=185283&m=1229236
Mathias