HTML style="" nur erster a href funktioniert?

5 Antworten

Von Experte medmonk bestätigt
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, IT
17.12.2022, 03:56

1) Das center-Element gehört aus gutem Grund nicht mehr zum HTML5-Standard. Wenn du Elemente zentrieren möchtest, verwende CSS. Du kannst dem Container beispielsweise eine feste Breite geben und die Außenabstände links und rechts automatisch berechnen lassen.

Da du mehrere Links aufzählst, könnte ein nav-Element ein passender Container sein.

HTML:

<nav class="image-links">
  <!-- ... -->
</nav>

CSS:

.image-links {
  margin: 0 auto;
  width: 960px;
}

2) Die br-Elemente sind dazu da, innerhalb von Textparagraphen Zeilenumbrüche zu erzwingen. Sie sind jedoch nicht dazu gedacht, Abstände zwischen Elementen zu erzwingen. Gib deinem Container stattdessen einen Außenabstand.

Anpassung des obigen CSS:

.image-links {
  margin: 120px auto 0;
  /* ... */
}

3) URLs mit Leerzeichen sind invalid. Bei dir kommt es öfter vor, dass man in den href- oder src-Attributen Leerzeichen findet. Entferne die Leerzeichen am besten oder ersetze sie beispielsweise gegen Bindestriche.

4) All deinen Links fehlt eine Linkbeschriftung und den Bildern ein alt-Attribut. Letzteres soll das Bild inhaltlich ersetzen können (indem es bspw. den Bildinhalt oder das, was es ausdrücken soll, prägnant beschreibt). In diesem speziellen Fall übernimmt das alt-Attribut die Aufgabe der Linkbeschriftung.

Beispiel:

<a href="cat-gallery.html">
  <img alt="Gehe zu Katzenfotogalerie" src="cats.jpg" />
</a>

5) Bei deinen img-Elementen hast du öfter den Wertbereich des style-Attributs nicht geschlossen. Das ist der Grund, wieso Folgetags vom Browser falsch interpretiert werden.

Im style-Attribut hast du zudem mehrmals ein CSS-Property align angeführt, welches es nicht gibt (auch in HTML5 ist das align-Attribut invalid). Wenn es das CSS-Property geben würde, müsste hinter den Doppelpunkt ein valider Wert angeführt werden.

Im besten Fall lässt du das style-Attribut (sowie die falschen align-Attribute) überall komplett weg. Sollten Styles notwendig sein, dann versuche diese über einen Selektor in deiner CSS-Datei zuzuordnen.

6) Die Attribute height und width erwarten jeweils einen numerischen Wert. Ein leerer Attributwert ist ein Fehler.

7) Die Links könnte man in einem Grid gut anordnen.

Beispiel:

.image-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 250px);
  /* ... */
}

Die br-Tags in deiner Linkliste fliegen natürlich raus.

Und um das an der Stelle gleich vorwegzunehmen: Eine HTML-Tabelle wäre hier keine passende Alternative, denn bei den Links handelt es sich nicht wirklich um tabellarische Daten, die semantisch miteinander verknüpft sind.
l3487171
16.12.2022, 23:16

Der Quelltext hat auf jeden Fall einige Fehler:

style="vertical-align:/></a>
style="align:/></a>

So was ist nicht erlaubt. Es gibt kein abschließendes " und die CSS-Eigenschaften haben keine Werte. Es muss z.B. so aussehen:

style="vertical-align: baseline" /></a>
style="text-align:center; /></a>

Es ist im Moment nicht ersichtlich, was du genau tun willst. Aber der Code muss valide sein.

Wenn du Infos brauchst, was diese CSS-Eigenschaften z.B. "text-align" bedeuten, gibt es viele Beispiele im Internet.
DummeStudentin
16.12.2022, 23:20

Da das ganze jetzt zumindest schon mal als Code formatiert ist, erkennt man direkt am Syntax Highlighting, dass es einige Fehler gibt.

Kein Wunder, dass der Browser nicht das anzeigt, was du willst.

Mein Tipp: Verwende eine anständige IDE. Die zeigt solche Fehler direkt an.
Woher ich das weiß:Studium / Ausbildung – Ich studiere Wirtschaftsinformatik
Esskah
16.12.2022, 23:16 
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/"></a>

Anführungszeichen am Ende vergessen... würde ich mal sagen
ChrisCat1, UserMod Light
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
16.12.2022, 23:19

Du hast bei den style Attributen vergessen die Angaben mit einem erneuten Anführungszeichen zu schließen.

Auch hast du für align keinen Wert nach dem Doppelpunkt angegeben.

style="align:
RotfuchsFinn12 
Fragesteller
 16.12.2022, 23:33

Wenn ich das Attribute hspace="0" oder negativ setze, bleibt der Abstand bei mehr als 0.

0
ChrisCat1, UserMod Light  16.12.2022, 23:46
@RotfuchsFinn12

hspace ist veraltet und wird in HTML5 nicht mehr unterstützt, entsprechend wird es auch nicht mehr von allen Browsern umgesetzt.

Verwende stattdessen die CSS Eigenschaft margin.

1
RotfuchsFinn12 
Fragesteller
 17.12.2022, 00:22
@ChrisCat1, UserMod Light

<table border="0" cellspacing="0" cellpadding="0"><tr>

<td><a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="margin-right: 0px;"/></a></td>

<td><a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235"/ style="margin-left: 0px;"></a></td>

</tr></table>

0