Bessere Lösung von Der Martin, 22.03.2020 10:16

Bessere Lösung

Der Martin 22.03.2020 10:16

html

Moin,

<!DOCTYPE html>
<html lang="de">
  <head>
	<meta charset="utf-8" />
	<meta name="author" content="Goldletter-Design" />
    <meta name="description" content="Matthias Klein Tischlermeister informiert über Fensterservice. Reparaturen, Wartungen und Instandsetzungen." />
	<meta name="keywords" content="Fenster, Türen, Rolladen, Reparaturen, Service, Wartung, Instandsetzung, Meisterbetrieb, Nachrüsten, Scheiben, Fensterscheiben, Austausch, Montage, Überprüfungen, Wärmedämmung," />   
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
	 <link rel="stylesheet" href="design.css" /> 

 
  </head>
  <body>
  <figure id="imagemap">
<svg viewBox="0 0 1920 1080" >
  <defs>
    <style>
      rect:hover {
	    fill: white;
	    opacity:0.5;
	  }
    </style>
  </defs> 
  <image width="1920" height="1080" xlink:href="start.jpg">
    <title>Auswahl</title>
  </image>	
  

 
 
	<a  xlink:href="Anfang.mp3" >
    <rect x="205" y="848" opacity="0" width="120" height="130" /> </a>

	<a xlink:href="ansage.mp3">
    <rect x="1525" y="648" opacity="0" width="120" height="130" /> </a>
	
	
	
	
	 <a xlink:href="Home.html">
    <rect x="404" y="292" opacity="0" width="90" height="35" /> </a>
	
	 <a xlink:href="Leistungen.html">
    <rect x="520" y="292" opacity="0" width="136" height="35" /> </a>
	
	 <a xlink:href="Foto.html">
    <rect x="695" y="292" opacity="0" width="175" height="35" /> </a>
	
	 <a xlink:href="Impressum.html">
    <rect x="887" y="292" opacity="0" width="140" height="35" /> </a>
	
	<a xlink:href="Kontakt.html">
    <rect x="1056" y="292" opacity="0" width="99" height="35" /> </a>
	
	 <a xlink:href="Datenschutz.html">
    <rect x="1190" y="292" opacity="0" width="156" height="35" /> </a>
	
	<a xlink:href="Ueber.html">
    <rect x="1370" y="292" opacity="0" width="125" height="35" /> </a>
	
</svg>
  
</figure> 
		</body>
</html>

Ich hoffe, jetzt kann man sehen, was ich gemacht habe.

du meine Güte, ja. Was ist denn das? Schlechte Angewohnheiten der frühen 2000er-Jahre mit modernen Mitteln wiederbelebt?

Warum SVG? Was hast du gegen normales HTML? Ich sehe in deinem Beispielcode nichts, was man nicht ebenso einfach mit HTML umsetzen könnte - nur eben mit deutlich mehr Semantik. SVG nur um ein paar rechteckige Boxen, Links und Rastergrafiken zusammenzubauen, ist Overkill. Im übrigen bin ich nicht sicher, ob das audio-Element innerhalb von SVG ebenfalls anwendbar wäre.

Und dann das ganze Layout festbetoniert - das meinte ich mit der 20 Jahre alten Unart. Ja, mittlerweile können die Browser auch zoomen anstatt scrollen, aber sinnvoll ist eine solche starre Struktur trotzdem nicht.

Ich sehe in deinem Code - wenn man ihn mal "normal" in HTML formuliert, einfach ein Seiten-Grundgerüst mit einer horizontalen Navigationsleiste. Links (am Anfang) und rechts (am Ende) je ein Audio-Element, dazwischen sieben Links zu anderen Seiten.
Also ein nav-Element mit einer Liste (ol, weil du die Reihenfolge für wichtig erachtest), die insgesamt neun li-Kinder enthält. Das Ganze mit CSS ein bisschen "schön" gemacht, that's it.

Übrigens fehlt auch das title-Element im head. Das aber nur am Rande, hat mit dem eigentlichen Thema nichts zu tun.

Live long and ~~pros~~ healthy,
Martin

--
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Der Martin: Bessere Lösung

Beitrag lesen

Bessere Lösung

Bessere Lösung