Hallo beginner,
das Einbinden von Bildern mit jsfiddle ist durchaus möglich. Es kann nur dann ein Problem sein, wenn Du Bilder von einer http:// Quelle einbinden willst. jsfiddle ist https://, darum müssen Bilder ebenfalls von https:// kommen.
Wenn Du das Bild https://www.example.org/images/testbild.png einbinden willst, kannst Du das in jsFiddle bleistiftsweise so tun:
<img src="https://www.example.org/images/testbild.png" alt="Testbild mit farbigen Streifen">
Wenn deine Bilder auf einer http-Seite liegen, und Du erstmal keine Energie auf ein https-Zertifikat verwenden willst, kannst Du deine Experimente doch auch auf diese http-Seite hochladen. Dass die Bilderquelle eine Fremdseite ist, wo Du nichts hochladen kannst und deren Bilder Du einfach nutzt, will ich jetzt man nicht annehmen. Die Alternative sind Demobilder aus der Wikipedia, beispielsweise dieses - da musst Du im Fiddle lediglich die Quelle angeben (also genau die Seite, die ich gerade verlinkt habe). Dieses Bild könntest Du auch auf deiner Seite einsetzen, wenn Du Dich an die Lizenzregeln hältst und das Bild nicht direkt von commons.wikimedia.org einbindest, sondern es auf deinen Server kopierst.
Wenn das Einbinden von Bildern bei Dir nicht funktioniert, zeig dein Fiddle trotzdem mal vor. Dann kann man Dir vielleicht sagen, was Du beim Einbinden falsch machst.
Das Thema "alt" war für mich ein Nebenschauplatz, der aber, gerade bei Einsteigern, beim Einbinden von Bildern gern übersehen wird. Deswegen habe ich das erwähnt. Die wichtigere Frage war: <img> Element oder ein background-image via CSS, und die mussten wir klären, weil davon alles andere abhängt. Du schreibst, das müssten wir als die Experten entscheiden. Das ist ein Irrtum. Wir, als „Experten“ (mehr oder weniger) können beides. Was davon richtig ist, hängt von deinen Inhalten ab. Und die kennst ausschließlich du. Deswegen sollst Du ja auch was vorzeigen. Damit wir die Inhalte sehen und unsere Expertise nutzen können, um Dir einen Rat zur richtigen Verwendung der Möglichkeiten zu geben, die HTML und CSS bieten.
An konkreten Hinweisen hast Du Links auf unser Wiki bekommen, und die Idee von Tabellenkalk mit dem Ein- und Ausblenden. Wenn Du zu wenig Hintergrundwissen hast, um das einordnen zu können, ok, dann sag das. Aber eins machen wir hier nur sehr ungern: eine fertige Lösung zum Kopieren hinschmeißen. Copy+Paste Autoren gibt's zu viele auf dieser Welt.
Das HTML hast Du mit Kalk ja schon erörtert. Wenn es ein Seitenkopf ist, steckt man das in einen header. Je nach Relevanz der Bilder kann alt="" hinreichend sein, oder auch nicht.
<header>
<img src="...bild2..." alt="...">
<p>Text1</p>
<img src="...bild2..." alt="...">
<p>Text2</p>
<img src="...bild2..." alt="...">
</header>
Ob da nun <p> Elemente oder <span> Elemente besser sind, hängt vom Textumfang ab. Ist das ein längerer Text? Oder nur ein plakatives Stichwort? Ein HTML Element muss jedenfalls drumherum, sonst klappt das mit dem Nebeneinanderstellen nicht so gut. Das machst du, da es nur eine Zeile ist, ab besten mit einer Flexbox. Ich gebe Dir mal eine Basis, aber das ist noch unvollständig. Was Du für die Fragezeichen einsetzen musst, kannst Du selbst überlegen (wenn Du sie nicht kennst, schau sie im Wiki nach). Wenn Du Dinge findest, die Du so noch nicht gesehen hast, frag nach oder schau ins Wiki.
Ganz wichtig: Den Umschaltpunkt der Media-Abfrage nicht in Pixel festlegen, sondern in em. "em" ist eine Einheit, die sich auf die ausgewählte Schriftart bezieht. Bei einer font-size von 16px ist 1em=16px.
Die dritte Zahl in der flex-Eigenschaft ist die Basisbreite für dieses Element. "auto" ist ein guter Anfang, aber deine Bilder brauchen vielleicht eine Größenjustierung. Das kannst Du mit der Flex-Basis machen, oder mit einer width-Angabe. Wie Du das erste, zweite oder dritte Bild konkret ansprichst, ohne ihnen eine id oder class zu geben, siehst Du in meiner Vorlage.
Was Dir fremd sein könnte, ist das Komma in den CSS Selektoren. Du kannst damit erreichen, dass diese Regel für mehrere Selektoren gilt. Du könntest den ganzen Block auch kopieren und jeden mit einem der beiden Selektoren versehen, aber abschreiben ist öde und das wollen wir vermeiden.
header {
display: flex;
justify-content: ?;
align-items: center;
}
header img {
flex: 0 0 auto;
}
header p {
flex: 0 0 ?;
margin: 0;
padding: ? ?;
}
header img:nth-of-type(1), header img:nth-of-type(3) {
display: none;
}
header img:nth-of-type(2) {
display: inline;
}
@media (min-width: ?em) {
header img:nth-of-type(1), header img:nth-of-type(3) {
display: inline;
}
header img:nth-of-type(2) {
display: none;
}
header p {
}
}
Rolf
--
sumpsi - posui - obstruxi
nicht angemeldet
Rolf B
Matthias Scharwies
Tabellenkalk
Matthias Apsel
JürgenB
