nicht angemeldet
AugeHallo
Dann mach' ich mal den Anfang.
<!DOCTYPE html> <html lang="de"> <head> <title>Couture Anni</title> <meta charset="utf-8">
Setze <meta charset> vor jedes andere Head-Element. erstens muss es innerhalb der ersten 1024 Bytes des Dokuments stehen (was hier schon der Fall ist, mit einem längeren Titel aber fehlschlagen kann) und zweitens profitiert der Titel des Dokuments nicht von der Angabe.
Also:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Couture Anni</title>
Weiter.
<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
Wie kommt der kodierte Backslash (%5C = \) in den Dateinamen des Bildes?
body { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
Die Richtung des Gradienten fehlt (to-bottom, to-top, to-left oder to-right) als erste Angabe in linear-gradient. Weiterhin fehlt die Ortsangabe, wo die jeweilige Farbangabe zutreffen soll. Und zu allerletzt sind beide vorhandenen Farbangaben identisch. So ergibt das keinen Sinn.
body { background-image: linear-gradient(to-bottom, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.8) 80%), url('img/tape-measure.jpg');
In meinem Beispiel habe ich in einer Farbangabe zumindest den Wert der Transparenz verändert.
height: 1000px;
Eine Höhenangabe ist in den meisten Fällen unnötig. Der Inhalt nimmt sich seinen Platz. Um eine Mindesthöhe festzulegen – z.B. wegen eines Hintergrundbildes – sollte man eine Mindesthöhe festlegen (min-height).
.mainHeader nav { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
Man notiert solche Blöcke vom Speziellen zum Allgemeinen, eventuell mit vorangestelltem Fallback für gänzlich unfähige Browser, was allerdings speziell bei border-radius entfällt.
Richtig herum wäre es also, zuerst die Angaben mit den Vendor-Präfixen (hier: -moz-, -webkit-) zu notieren, von denen die betroffenen Browser die für sie zutreffende Angabe benutzen, und hinten dran die allgemeine Angabe, die in den fähigen Browsern benutzt wird bzw. dort die Angabe mit Vendor-Präfix überschreibt.
.mainHeader nav {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Allerdings sind in diesemm Fall (border-radius) die Angaben mit Präfix gänzlich irrelevant. Der letzte Firefox, der -moz-border-radius brauchte und konnte, war der Firefox 3.6 aus dem Jahre 2010. Die letzten Browser, die den -webkit--Präfix benötigten waren Safari 4 (OS-X), Safari 3.2 auf iOS, Chrome 4 und der bei Android 2.1 mitgelieferte Stock-Browser. Keiner davon hat heutzutage auch nur die geringste Relevanz.
Es bleibt also folgende Angabe übrig.
.mainHeader nav {
border-radius: 5px;
}
Bei den anderen rundgefeilten Blöcken ist analog zu verfahren.
Der Text/die Überschriften sitzen nicht mittig in der Navigationsleiste …
Doch, doch, das tun sie. Erstens sind alle Links zur Mitte des Containers hin ausgerichtet und zweitens sitzen die Linktexte jeweils in der Mitte des Links.
… und die Abstände/Aufteilung und Grösse der Hover-Effekte stimmt nicht wie man im Bild sehen kann.
Auf einem nichtbeweglichen Bild sind Hovereffekte wohl eher nicht zu sehen. Eine Seite mit einem funktionierenden Beispiel mit dem beschriebenen Fehler wäre jetzt angebracht, um das tatsächliche Verhalten studieren zu können.
Tschö, Auge
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett
Matthias Apsel
MudGuard
Rolf B
Gunnar Bittersmann
marctrix