nicht angemeldet
Gunnar Bittersmann@@Tackerharry
index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Du wirst vermutlich niemals XHTML verwenden. Also weg mit xmlns und xml:lang! Bleibt übrig: <html lang="de"> (wenn deine Seite denn auf deutsch ist).
<head> <title></title>
Da muss natürlich noch ein sinnvoller Seitentitel rein.
<link rel="stylesheet" type="text/css" href="style.css">
type="text/css" ist default, muss also nicht angegeben werden.
<meta charset="UTF-8" />
Die Angabe der Zeichencodiereung gehört weiter nach oben als erstes im head.
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
Wie @Matthias Scharwies schon sagte: Nutzern unbedingt das Scrollen erlauben, d.h. user-scalable=no und maximum-scale=1 weg.
<meta name="robots" content="index, follow" />
Das sollte default sein, kann also weg.
<script type="text/javascript">
type="text/javascript" ist default, muss also nicht angegeben werden. Aber wie @Matthias Scharwies schon sagte: Das ganze Script ist überflüssig. Weg damit!
<style type="text/css">
type="text/css" ist default, muss also nicht angegeben werden.
Außerdem: Du hattest oben bereits das externe Stylesheet style.css eingebunden. Warum stehen die Styleangaben dann hier im HTML-Dokument?
Wenn du nur eine Seite hast, dann ist es sinnvoll, ein internes Styelesheet zu verwenden. Wenn du mehrere Seiten hast, die gleich gestylt sein sollen, dann ist ein externes Stylesheet sinnvoll, auf das alle deine Seiten verweisen.
Beides, internes und externes Stylesheet, ist für dich vermutlich nicht sinnvoll.
header { font-family: Arial, Verdana, serif;
Arial ist keine gute Schriftart. „Sie wird genommen, weil sie im Computermenü … ganz oben steht. Würde sie Zarial heißen, hätte sie kein Mensch genommen“, wie Erik Spiekermann zusagen pflegt. Verdana wurde für niedrigauflösende (Röhren-)Monitore entwickelt, ist also nicht mehr zeitgemäß. Und sie hat fürs Deutsche falsche Anführungszeichen. Verwende bessere Schriftarten.
position:fixed !important; position:absolute;
Die doppelte Angabe von position ist sinnlos. Auch wäre sticky der geeignetere Wert – dann wäre zumindest sichergestellt, dass der übrige Seiteninhalt nicht unter dem Header verschwindet.
Man muss aber auch sicherstellen, dass Links (insb. bei Tastaturbedienung) nicht unter dem Header verschwinden. Da man die Höhe des Header i.A. nicht kennen kann, muss man sie mit JavaScript (ResizeObserver) auslesen und über eine custom property in CSS für scroll-padding-top verfügbar machen, so wie in diesem Beispiel.
Ein anderer Weg ginge über scrollBy() wie in jenem Beispiel.
Das ist nichts für Anfänger. Am einfachsten ist, den Header nicht per position zu fixieren, sondern die Seite mit Flexbox oder Grid aufzuteilen und nicht die ganze Seite zu scrollen, sondern nur den Hauptbereich, wie in diesem Beispiel gemacht.
startseite.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Nein. Verwende wie bei deiner index.html <!DOCTYPE html>, nichts anderes.
<html lang="de" dir="ltr">
dir="ltr" ist default, kann also weg.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Verwende niemals eine andere Zeichencodierung als UTF-8! Also alle HTML-Dateien als UTF-8 (bevorzugt ohne BOM) speichern und das angeben wie in deiner index.html: <meta charset="UTF-8"/>
<meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta name="language" content="de">
Interessieren diese Angaben noch die Bots von Suchmaschinen? Wenn ja, sinnvoll befüllen. Wenn nein, weg.
<meta name="robots" content="index, follow"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head>
Siehe das oben bei index.html Gesagte.
<h1>Dies ist Ihre Startseite.</h1>
Üblicherweise ist die index.html die Startseite einer Website.
🖖 Живіть довго і процвітайте
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter
Rolf B
Matthias Scharwies