nicht angemeldet
Gunnar Bittersmann@@Alex12345
Matthias hat schon einiges gesagt, aber noch nicht alles.
<html>
Hier solltest du die Sprache des Seiteninhalts angeben. (Warum?)
Wenn dieser auf deutsch ist:
<html lang="de">
<title>Title</title>
Hier denkst du noch dran, einen sinnvollen Seitentitel einzusetzen?
<body><div id="all">
Wie Matthias schon sagte (im folgenden abgekürzt WMSS) und at auch: dieses div ist überflüssig.
<div id="Navigation">
WMSS, dieses div wäre gern ein nav-Element. Das hilft menschlichen und nicht-menschlichen Seitenbesuchern, die Seitenstruktur zu verstehen.
<li class="borderright navigationslink"><a href="" >A</a> <li class="borderright navigationslink"><a href="" >B</a> <li class="borderright navigationslink"><a href="" >C</a> <li class="borderright navigationslink"><a href="" >D</a> <li class="borderright navigationslink"><a href="">E</a> <li class="borderright navigationslink"><a href="">F</a> <li class="navigationslink"><a href="#kontakt">G</a>
Benenne Klassen nicht nach der gegenwärtig(!) gewünschten Darstellung, also nicht sowas wie borderright.
Außerdem ist die Klasse überflüssig, um das erste bzw. letzte Geschwisterelement anzusprechen gibt die Pseudoklassen :first-child/:last-child (:first-of-type/:last-of-type). WMSS – und MrMurphy1 hätte sagen können, denn hier sind sie angebracht.
Die Klasse navigationslink ist ebenfalls überflüssig; die Listitems kannst du per #Navigation li ansprechen. (Falls du bei der Großschreibung der ID im HTML bleiben solltest. Ich empfehle Kleinschreibung.)
(Ebenfalls WMSS. Er verwendete nav li – kann man machen, wenn es denn nur ein nav-Element im Dokument gibt (oder wenn es mehrere gibt, die alle gleich gestylt werden sollen).
#navigation ul li a {
Der Selektor ist überspezifiziert. Mache Selektoren immer so kurz wie möglich! Hier also #navigation a (wenn du die ID klein schreibst).
#all { margin: -9px auto;
-9px ist eine magic number – der Wert mag bei dir passen, aber nicht zwangsweise bei anderen. Sowas sollte man immer vermeiden.
Was willst du mit dem negativen margin überhaupt erreichen? Was auch immer, das geht anders.
width: 1094px;
Mein Viewport ist – wie der vieler anderer – deutlich schmaler als 1094px. WMSS solltest du keine Breiten von Boxen in px angeben. Responsive design
Damit sich der Inhalt dem Viewport anpassen kann, ist noch die eine Angabe in den head hinzuzufügen:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
border-style: solid; border-width: 1px 1px 1px 1px; border-color: #3e3c3c;
Das hättest du auch zu border: 1px solid #3e3c3c zusammenfassen können.
#navigation ul { line-height: 48px;
Nein. line-height dient dazu, den Abstand zwischen Zeilen zu regeln. Das darf nicht dafür missbraucht werden, Abstände über und unter einem Text festzulegen, das ist mit padding zu regeln.
font-family: verdana;
Hier solltest du noch eine generische Schrift angeben, in dem Fall sans-serif:
font-family: Verdana, sans-serif;`
Es haben ja nicht alle Verdana auf ihrem System. (Zumal Verdana aussieht wie 1996 – etwas unschön.)
background:-moz-linear-gradient(bottom,#595656,#8d8b8b); background:-webkit-gradient(linear,left top,left bottom,from(#595656),to(#8d8b8b)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b595656',endColorstr='#8d8b8b'); background-image: linear-gradient(#595656 0%, #8d8b8b 100%);
Die Vendor-Präfixe für linear-gradient oder gar MS-Filter sind längst nicht mehr erforderlich – WMSK (wie Matthias stillschweigend korrigierte).
LLAP 🖖
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Matthias Scharwies