Wie bei html bei bild so copyright machen?

1 Antwort

Von Experte medmonk bestätigt
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
22.06.2024, 20:56

Zuallererst solltest du dein HTML in Ordnung bringen. Es ist voller Fehler.

  1. Trenne alle Attribute via Leerzeichen voneinander.
  2. Das figure-Element hat keinen Endtag.
  3. Das figure-Element gehört nicht in einen Paragraph. Da es ein Blockelement ist, sorgt es dafür, dass ein davorgeschobener Paragraph vorzeitig geschlossen wird. Dem Endtag des Paragraph fehlt daraufhin ein Starttag.
  4. In ein figure-Element gehört jeweils nur ein Bild mit einem figcaption-Element.
  5. All deinen img-Elementen fehlt jeweils ein alt-Attribut, dessen Wert das jeweilige Bild textuell beschreibt.

Ansonsten gehe ich davon aus, dass es sich bei deinem Code nur um einen Auszug handelt.

(...) aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern. (...)

Natürlich nicht. Immerhin positionierst du zumeist nur die Bilder, aber nicht die figcaption- (bzw. besser die figure-)Elemente.

Bei all dem würde ich dir empfehlen, auf Inline-Styles zu verzichten und stattdessen mit CSS-Klassenselektoren zu arbeiten.

Beispiel:

<!doctype html>
<head>
  <title>Example</title>
  <style>
    .a { background: red }
    .b { background: blue }
    .c { 
       color: yellow;
       font-family: Arial;
    }
  </style>
</head>
<body>
 <div class="a">Box 1</div>
 <div class="b">Box 2</div>
 <div class="a c">Box 3</div>
</body>

Konkret in deinem Fall könnte man Bild und Copyright-Text mit einer Flexbox nebeneinander ordnen.

.image-box {
  column-gap: 5px;
  display: flex;
}

HTML:

<figure class="image-box">
 <img alt="..." src="...">
 <figcaption>...</figcaption>
</figure>

Und die figure-Elemente selbst ließen sich (größtenteils) sicherlich auch via Grid (statt mittels absoluter Positionierung) anordnen.
Mia1307 
Beitragsersteller
 23.06.2024, 16:39

ich habe meinen lehrer gefragt, weil er die htmls für uns erstellt hat und meins ist richtig und er meinte, dass weil er es so hergestellt hat, dass es nicht geht mit copyright und dann aht er es so für mich gemacht.

Und es war richtig was ich gemacht habe, weil er es uns gezeigt hat, aber das figcaption kann nur einmal sein

</figure>
        <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
        <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
        <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
        <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
        <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/originals/94/fa/40/94fa409cebbec2cb7b152ef16549ff6e.jpg">
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
        <figcaption class="copyright right" style="color: rgb(255, 255, 255); width: 500px; line-height: 100%;">
            Images by Denis Nigmatullin on artstation, altantrengsingf on Pinterest, Bibi Saint-Pol on wikimedia,
            sheepskeleton on tumblr, himanshiieee on Pinterest, accessorizepopup on Pinterest
        </figcaption>  
0
Mia1307 
Beitragsersteller
 23.06.2024, 17:06

mein Lehrer meint alles bei mir ist richtig

0
regex9  23.06.2024, 23:32
@Mia1307

Schaut gemeinsam in die W3C-Spezifikation. Die ist bezüglich der oben von mir angemerkten Punkte ja recht eindeutig:

(...) Attributes must be separated from each other by one or more ASCII whitespace.

Quelle

Content model:
Either: one figcaption element followed by flow content.
Or: flow content followed by one figcaption element.
Or: flow content.
Tag omission in text/html:
Neither tag is omissible.

Quelle

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image.

Quelle

Content model:
Phrasing content.
Tag omission in text/html:
A p element's end tag can be omitted if the p element is immediately followed by (...) figcaption, (...)

Quelle

0
Mia1307 
Beitragsersteller
 24.06.2024, 19:58
@regex9

keine Ahnung er ist Doktor Informatik und weiß schon, was er macht

0
Mia1307 
Beitragsersteller
 24.06.2024, 19:59
@regex9

und unser Lehrer hat das html teil schon vorprogrammiert für uns weil ich bin 9. Klasse

0
regex9  24.06.2024, 20:12
@Mia1307

Die W3C-Spezifikation bestimmt den Aufbau von HTML. Das muss an der Stelle dann auch genügen.

1
Mia1307 
Beitragsersteller
 24.06.2024, 20:16
@regex9

okay, aber mien Programm funktioniert trotzdem einwandfrei und die ganze Klasse hat es so wie ich

0
Ginpanse  24.06.2024, 23:46
@Mia1307

sollte man meinen, tut er offensichtlich aber nicht. informatik ist eben nicht gleich informatik.

0
regex9  25.06.2024, 02:53
@Mia1307

Aus Gründen der Abwärtskompatibilität sind Browser ziemlich flexibel beim Rendern. Eine Vielzahl an Fehlern können sie (auf ihre Weise) handhaben. In eine solche Abhängigkeit möchte man sich typischerweise nicht begeben, zumal es beim Bau von Webseiten um zwei Ziele geht: Eine visuelle und eine logische Darstellung der Informationen. Deine funktioniert einwandfrei-Beschreibung kann sich maximal auf das erstgenannte Kriterium beziehen und ist ganz sicher kaum getestet.

Das sich zwischen validem und invalidem Markup letzten Endes Unterschiede auftun, ist an diesem einfachen Beispiel gut sichtbar:

<p><figure><span>Fall 1</span></figure></p>
<div><figure><span>Fall 2</span></figure></div>

CSS:

* { margin: 0; padding: 0 }
p { background: red; min-height: 10px }
div { background: red; margin-top: 30px; min-height: 10px }

In Fall 1 rendert ein Browser 2-3 voneinander losgelöste, verschiedene Container, wobei die Hintergrundfarbe des zweiten Containers weiß bleibt.

In Fall 2 gibt es einen Container, der einen anderen schachtelt. Die Hintergrundfarbe ist einheitlich rot. Das gilt in jedem Browser so.

1