nicht angemeldet
Matthias Scharwies
Matthias Scharwies
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Scharwies
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Hallo,
eine Frage. Was ist denn der Unterschied zwischen diesen beiden Schreibweisen.
Tabellenkalknav ul {
/* Weitere Angaben */
}
nav li {
/* Weitere Angaben */
}
nav, nav > ul {
/* Weitere Angaben */
}
nav > ul > li {
/* Weitere Angaben */
}
nav > ul > li > ul {
/* Weitere Angaben */
}
Was bewirken die ">"?
hallo
Hallo,
eine Frage. Was ist denn der Unterschied zwischen diesen beiden Schreibweisen.
nav ul { /* Weitere Angaben */ }
Matche jedes ul das irgendwo in einem nav element vorkommt
nav li { /* Weitere Angaben */ } ~~~
Matche jedes li das irgendwo in einem nav element vorkommt
nav, nav > ul { /* Weitere Angaben */ }
Matche jedes nav UND jedes ul welches direktes Kindelement von nav ist.
nav > ul > li { /* Weitere Angaben */ }
Matche jedes li welches direktes Kindelement von ul ist, welches direktes Kind von nav ist.
nav > ul > li > ul { /* Weitere Angaben */ }
Matche jedes ul Element welches direktes Kind von einem li Element ist welches direktes Kind von einem ul Element ist, welches direktes Kind von einem nav Element ist.
Was bewirken die ">"?
Es ist ein Selektor für direkte Nachfahren.
Danke.
Dann kann es damit eigentlich nichts zu tun haben. Die Schriftdeklaration (Farbe, Größe) hat in meinem Markup (aus mir unerfindlichen Gründen) keine Auswirkung.
html {
background: #9D9E9E;
}
body {
background: #9D9E9E;
max-width: auto;
margin: 0;
padding: 0;
}
main {
position: relative;
}
svg {
background: #9D9E9E;
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
height: 208px;
margin: 0;
}
#logo {
background-image: url(images/Logo.png);
z-index: 2;
width: 1437px;
height: 208px;
position: absolute;
top: 0;
left: 0;
margin: 0;
border: 0;
}
/* Navigation Listenelemente */
nav {
background-color: #4D4D4D;
position: absolute;
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
width: 1024px;
height: 49px;
top: 208px;
left: 448px;
border: 0px solid black;
border-radius: 0 0 7px 7px;
}
nav > ul {
text-align: center;
width: auto;
margin: 0;
padding: 0;
border: 0px solid red;
}
nav > ul > li {
display: inline-block;
list-style: none;
margin: 0;
padding: .2em;
border: 0px solid white;
}
/* Navigation Navicon */
/*button {
color: white;
vertical-align: bottom;
}
a {
text-decoration: none;
}
main > :nth-child(7n+2) {font-size: .5rem; }
main > :nth-child(7n+3) {font-size: 1rem; }
main > :nth-child(7n+4) {font-size: 1.2rem; }
main > :nth-child(7n+5) {font-size: 1.5rem; }
main > :nth-child(7n+6) {font-size: 1.8rem; }
main > :nth-child(7n+7) {font-size: 2rem; }*/
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="description">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Geänderte Darstellung für mobile Endgeräte -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<title>TITEL DER WEBSITE</title>
</head>
<body>
<main>
<svg viewbox="0 0 100% 208">
<defs>
<linearGradient id="verlauf" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#5C5C5C"></stop>
<stop offset="41%" stop-color="#5C5C5C"></stop>
<stop offset="67%" stop-color="#767776"></stop>
<stop offset="100%" stop-color="#5C5C5C"></stop>
</linearGradient>
</defs>
<rect id="eins" x="0" y="0" width="100%" height="208" fill="url(#verlauf)"></rect>
</svg>
<div id="logo"></div>
<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</nav>
</main>
</body>
</html>
Wo ist denn da mein Fehler? Es ist auch egal, ob die Textdeklaration im NAV, NAV UL oder NAV IL steht.
Servus!
Dann kann es damit eigentlich nichts zu tun haben. Die Schriftdeklaration (Farbe, Größe) hat in meinem Markup (aus mir unerfindlichen Gründen) keine Auswirkung.
Wo ist denn da mein Fehler? Es ist auch egal, ob die Textdeklaration im NAV, NAV UL oder NAV IL steht.
Ja, denn innerhalb des nav li hast du ein a-Element. Dieses hat ein bestimmtes Standardverhalten. Jeder Browser hat ein Browser-Stylesheet, dass das a-Element blau färbt, damit das Standardverhalten (man kann draufklicken) erkennbar bleibt.
Du müsstest einen CSS-Regelsatz für
nav li a {
color: midnightblue;
font-size: 2rem;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: skyblue;
}
festlegen.
Herzliche Grüße
Matthias Scharwies
Servus!
Du müsstest einen CSS-Regelsatz für
nav li a { color: midnightblue; font-size: 2rem; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: skyblue; }festlegen.
Oder, noch einfacher nav a !
Herzliche Grüße
Matthias Scharwies
Herzliche Grüße
Matthias Scharwies
Hallo,
Was bewirken die ">"?
Es ist ein Selektor für direkte Nachfahren.
Die zielführenden Links kamen bereits von Mathias, der das auch als Nachfahrenselektor bezeichnet. (Auch so im Wiki)
Aber genaugenommen ist ">" kein Selektor, sondern ein Kombinator. Es werden zwei Selektoren kombiniert.
Gruß
Kalk
Hallo Tabellenkalk,
Die zielführenden Links kamen bereits von Mathias, der das auch als Nachfahrenselektor bezeichnet. (Auch so im Wiki)
Ich hab das jetzt im Wiki umgebaut.
Aber genaugenommen ist ">" kein Selektor, sondern ein Kombinator. Es werden zwei Selektoren kombiniert.
Stimmt. Das Ergebnis ist aber wiederum ein Selektor.
Bis demnächst
Matthias
Servus!
Was bewirken die ">"?
Das > ist der Kindselektor, der nur direkte Kindelemente formatiert.
Herzliche Grüße
Matthias Scharwies
Jetzt muss ich mich nochmal melden. Das will nicht so, wie ich will.
Zusammengefasst:
Die Navigation soll stets so breit sein wie der Inhaltsbereich. Daher habe ich die Navigation in den ID-Selektor Content gepackt, um mit display: flex arbeiten zu können. Ursprünglich befand sie sich im MAIN-Element. Nicht elegant, aber eine andere Idee hatte ich nicht. Wenn´s eleganter geht, wie?
Der Content soll auf Monitoren/Notebooks 1024px breit sein. Auf Mobile flexibel. Wobei der Content nicht das Thema ist. Geht nur um die Breite wegen Navigation.
Weiter sollen die Listenelemente der Navigation entlang der Querachse zentriert und entlang der Hauptachse mit space-between ausgerichtet werden.
Die Ausrichtung will mir nicht gelingen. Egal, welchen Befehlen zur Anwendung kamen. Die Eigenschaften display: flex, justify-content: space-between und align-content: center wollten keine Wirkung zeigen. Bitte nicht wunden, ich habe den Code, der ohnehin nicht funktionierte, wieder entfernt (auch, wenn er vielleicht richtig gewesen wäre). Damit kann ich nichts vergessen, zu löschen.
Servus!
Jetzt muss ich mich nochmal melden. Das will nicht so, wie ich will.
Am Besten wäre es, Du hättest ein Live-Beispiel bei bplaced, etc.
- Die Navigation soll stets so breit sein wie der Inhaltsbereich. Daher habe ich die Navigation in den ID-Selektor Content gepackt, um mit display: flex arbeiten zu können. Ursprünglich befand sie sich im MAIN-Element. Nicht elegant, aber eine andere Idee hatte ich nicht. Wenn´s eleganter geht, wie?
Übrigens. HTML-Elemente werden seit ca. 2000 klein notiert!
Das main-Element kennzeichnet den Inhaltsbereich, also ist #content überflüssig.
Gib entweder main eine max-width von 64 em (1024/16=64; 16Px pro em in den Standardeinstellungen der meisten Browser) oder sogar dem body.
Verwende für Schriftgrößen, Längen- und Breitenangaben immer em oder rem.
- Der Content soll auf Monitoren/Notebooks 1024px breit sein. Auf Mobile flexibel. Wobei der Content nicht das Thema ist. Geht nur um die Breite wegen Navigation.
Lies dir mal die Tutorials zu Flexbox durch. In diesem Kapitel gibt es eine repsonsive Navigation, die soch dem Viewport anpasst.
Die Ausrichtung will mir nicht gelingen. Egal, welchen Befehlen zur Anwendung kamen.
Das sind entweder Elemente bei HTML oder Regelsätze / Festlegungen bei CSS. Das mag jetzt kleinlich wirken, aber je eher Du die Begriffe lernst, desto schneller wirst Du hinter die Feinheiten kommen.
Herzliche Grüße
Matthias Scharwies
Hallo. Danke für dein Feedback. Das eine oder andere habe ich vereinfacht oder umgeschrieben. Es ist etwas besser. Allerdings konnte ich mein Hindernis dadurch nicht überwinden. Und lange Rede, kurzer Sinn. Hier die gewünschten Beispieldateien.
Der Selektor main (Content) bekam eine maximale Breite von 64em zugewiesen. Und wie man dank der zum testen hinzugefügten border-Eigenschaft sehen kann, hält sich der Element in HTML auch daran. Und das, obwohl der Testtext schmaler als die max. Breite ist. Für den Selektor nav wurde ebenfalls eine maximale Breite von 64em festgelegt. Die Navigation hingegen ignoriert die festgelegte Breite.
P.S.: Die von dir verlinkten Artikel zu Flexbox und der responsiven Navigation waren mir bekannt. Ich habe sie bereits gelesen, allerdings noch nicht vollumfänglich verstanden. Aber natürlich werde ich darin weiter lesen. Dennoch kann ich mir das Verhalten der Breitendarstellung nicht erklären. Ich baue meine Navigation Schritt für Schritt auf bzw. will das Thema Schritt für Schritt verstehen. Ich beginne bei A(fang) und nicht bei M(ittendrin). Auch das Thema Navicon steht noch aus.
Ich hoffe dennoch, dass Du mir erklären kannst, weshalb meine Navigation sich nicht an die 64em hält.
Hallo Da Ignaz,
Hier die gewünschten Beispieldateien.
Mach doch bitte aus diesen Dateien ein Beispieldokument, z.B. auf bplaced.net.
Bis demnächst
Matthias
Bitte sehr.
Hallo Da Ignaz,
Bitte sehr.
Nein, niemand möchte die Dateien herunterladen. Erstelle ein HTML-Dokument (quasi eine Webseite), das man sich direkt anschauen kann.
Bis demnächst
Matthias
Hallo.
Dann muss ich gestehen, ist mir nicht klar, was Du meinst. Das ist doch das HTML Dokument mit dem dazugehörigen Stylesheet. Das ist ja die Webseite. Wenn Du etwas anderes meinst, stehe ich auf dem Schlauch.
Und falls Du eine URL meintest, welche voraussetzt, das ein Webspace vorliegt, muss ich Dich enttäuschen. Das existiert noch nicht.
Hallo Da Ignaz,
Und falls Du eine URL meintest, welche voraussetzt, das ein Webspace vorliegt, muss ich Dich enttäuschen. Das existiert noch nicht.
Nutze einen Anbieter wie bplaced.net.
Bis demnächst
Matthias
So, nun denn.
Hallo Da Ignaz,
Lass mal den ganzen Quatsch mit position weg. Ebenso die maximale Breite der Navigation, dann display: flex und justify-content: space-between für die Liste.
Bis demnächst
Matthias
Hallo Matthias,
wenn ich die Eigenschaften Position und die dazugehörigen Festlegungen entferne, kommt das dabei raus.
Traue mich kaum, Dir zu widersprechen. Zumindest die Position Festlegungen für den Header hatten schon ihren Sinn. display: flex und align-content: flex-start funktionieren hier zumindest nicht.
Die aktuelle Version ohne Position, top und left liegt auf dem Server. Kannst es begutachten. Danke Dir für deinen Beistand.
Hallo Da Ignaz,
Traue mich kaum, Dir zu widersprechen. Zumindest die Position Festlegungen für den Header hatten schon ihren Sinn.
Absolute Positionierung brauchst du für deine gewünschte Gestaltung nicht.
display: flex und align-content: flex-start funktionieren hier zumindest nicht.
ich schrieb auch, du sollst der Liste diese Eigenschaften geben.
nav > ul {
display: flex;
justify-content: space-between;
}
auto ist kein gültiger Wert für max-width.
Die aktuelle Version ohne Position, top und left liegt auf dem Server.
Nein, header hat immer noch eine absolute Positionierung. Und svg auch.
Dann noch
nav {
max-width: 64em;
margin: 0 auto;
}
Und schon ist die Navigation mittig und die Menüpunkte schön verteilt.
Bis demnächst
Matthias
Servus!
So, nun denn. Link
Vielen Dank! So kann man arbeiten!
Ich untersuche Deine Seite mit dem Seiteninspektor (F12 drücken):
nav ist zwar display:flex; hat aber nur 1 Kindelement ul, welches sich über die komplette Breite zieht. (Da Du keinen Wert gesetzt hast, ist das nur die Breite aller Linktexte ohne weitere Ränder.) Du wolltest nav doch oberhalb des Inhalts haben:
main, nav {
max-width: 64em;
margin: auto;
border: 2px dotted;
}
main {
border-color: black;
}
nav {
border-color: blue;
}
display:block; ist nicht nötig. Das wissen alle Browser.
Tipp: Du kannst Elemente kennzeichnen, indem Du ihnen einen Rand (border) gibst, einen background-color oder eine outline. Der Rand verfälscht das Ergebnis etwas, da er ja 2px breit ist. Das spielt bei Flexbox aber keine Rolle - früher bei display schon.
Du müsstest die ul zum Flex-Container machen und ihre Kinder li zu Flex-Items:
nav ul {
display: flex;
}
nav li {
flex: auto;
}
Jetzt verteilen sich die nav li über die gesamte Breite.
Tipp: Wenn Du eh den Header mit Logo noch platzieren willst, probier mal Grid Layout.
Wenn Du display: flex durch display: grid ersetzt, benötigst Du keine Festlegungen für die Kindelemente!
Tipp: Mach die Klickfläche von nav a so groß wie möglich:
nav a {
display: inline-block;
width: 90%;
text-decoration: none;
background: tomato;
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em; /* Festlegungen immer in relativen Größenangaben! */
}
Tipp: Öffne die Beispiele der Tutorials in einem neuen Tab und untersuche mit dem Seiteninsektor F12 die CSS-Eigenschaften. Ändere die Werte und versuche sie so zu verstehen.
Nicht aufgeben!
Herzliche Grüße
Matthias Scharwies
Hallo Matthias (2),
der Seiteninspektor ist mir bekannt. Diesen nutze ich auch, um Dinge zu verstehen. Manchmal ist das mit dem Verstehen nur nicht so einfach. Die Beispiele konnte ich nachvollziehen, bei mir funktioniert das dann wieder nicht. Beispiel.
Ich habe die Änderungen von Matthias (1) umgesetzt/übernommen und er hatte recht. Nun passt das so. Mit einer Ausnahme. Das Logo betreffend komme ich (noch) nicht ohne die absolute Positionierung aus, da sonst z-index nicht mehr funktioniert und das Logo unter dem Hintergrund verschwindet. Das das nur nebenbei.
Nun zum Unterschied zwischen Theorie und Praxis. nav ul verteilt sich nun über die Breite. Allerdings zickt die vertikale Ausrichtung rum. Artikel wiki.selfhtml. Obwohl mir der Selektor section nicht klar ist, da dieser weder unter CSS festgelegt noch unter HTML aufgerufen wurde, glaube ich, dass mir das Beispiel schon klar ist.
Was soll geschehen? nav ul (roter Rahmen)(bitte nicht an den Rahmen stören. Die dienen nur der Visualisierung während der Programmierung.) soll neben justify-content: space-between; auch vertikal zentriert ausgerichtet werden. Lege ich innerhalb nav display: flex und align-items: center fest, wird nav ul vertikal zentriert. Allerdings platzt die horizontale Ausrichtung. Halte ich mich an Matthias' (1) Feedback und lege display: flex innerhalb nav ul fest und weise weiter die Eigenschaft justify-content: space-between zu, zeigt hingegen align-items: center keine Wirkung - egal, in welchem Selektor. Wie an den Kommentaren zu erkennen habe ich wirklich alles ausprobiert - ob sinnvoll und plausibel oder nicht.
Theoretisch (laut dem Wiki) sollte es m.E. funktionieren. Tut es aber nicht.
Hallo Da Ignaz,
Ich habe die Änderungen von Matthias (1) umgesetzt/übernommen und er hatte recht. Nun passt das so. Mit einer Ausnahme. Das Logo betreffend komme ich (noch) nicht ohne die absolute Positionierung aus, da sonst z-index nicht mehr funktioniert und das Logo unter dem Hintergrund verschwindet. Das das nur nebenbei.
position muss für einen wirkenden z-index lediglich ungleich static sein, relative täte es auchAm besten wäre es aber, den Hintergrund als Hintergrund zu definieren, also das SVG speichern und dann
header {background-image: url(pattern.svg);}
Bis demnächst
Matthias
Hallo Matthias,
Tausche ich die Reihenfolge der HTML Elemente SVG und LOGO, hat das lediglich die Auswirkung, dass das SVG vertikal unter das LOGO rutscht. Mit Ausnahme von relative und einem negativen top-Wert. Aber ist das dann nicht wurscht?
Die Eigenschaft von position zu ändern brachte auch nicht den gewünschten Erfolg.
Und natürlich könnte ich das ganze als SVG-Grafik speichern und als solches einbinden. Allerdings soll man ja auch immer versuchen, so wenig Grafiken wie möglich einzusetzen - im Hinblick auf die Größe der kompletten Website. Genaugenommen geht das noch weiter. Jetzt muss die Seite ja erst einmal fertig werden. Aber ich habe Blut geleckt. Langfristig gesehen möchte ich das ganze Logo mit SVG programmieren. Demnach ist der aktuelle Weg schon der richtige.
Hallo Da Ignaz,
Und natürlich könnte ich das ganze als SVG-Grafik speichern und als solches einbinden. Allerdings soll man ja auch immer versuchen, so wenig Grafiken wie möglich einzusetzen
Vor allen Dingen soll man semantisch korrektes HTML verwenden. Das bedeutet, dass Grafiken, die keinen Inhalt transportieren sondern nur Verzierung sind, im HTML nichts verloren haben.
Das Logo hingegen sollte ein img-Element sein.
Bis demnächst
Matthias
Vor allen Dingen soll man semantisch korrektes HTML verwenden. Das bedeutet, dass Grafiken, die keinen Inhalt transportieren sondern nur Verzierung sind, im HTML nichts verloren haben.
Was meinst Du denn damit? Logos haben nie einen inhaltlichen Kontext, sind aber keine Verzierung. Sie stellen ein Markenzeichen dar.
Aber Du meinst, dass man das nicht machen sollte (inline-SVG)?
Hallo Da Ignaz,
Was meinst Du denn damit? Logos haben nie einen inhaltlichen Kontext, sind aber keine Verzierung. Sie stellen ein Markenzeichen dar.
Dein Logo stellt sehr wohl einen inhaltlichen Kontext dar. Es ist eine gute Idee, dies als SVG umzusetzen.
Bis demnächst
Matthias
@@Matthias Apsel
Das Logo hingegen sollte ein img-Element sein
Es sei denn, es sollte ein svg-Element sein.
LLAP 🖖
Hallo beide Matthias,
ich möchte nochmal auf das Thema zurückführen. Damit Ihr nicht blättern müsst, hier der Link.
Kleine Änderungen haben stattgefunden, das CSS Markup wurde etwas entschlackt. Eines bleibt bestehen. Mit Flexbox, margin & padding (weder sinnvoll noch elegant, aber wenn´s hilft) oder Festlegungen der Höhe lies sich nav a in vertikaler Ausrichtung zentrieren. Mit line-height wäre es möglich, aber auch das wäre unelegant und sicher nicht im Sinne des Erfinders.
Dafür muss es doch eine richtige Umsetzung geben. Idee?
Hallo Da Ignaz,
ich möchte nochmal auf das Thema zurückführen. Damit Ihr nicht blättern müsst, hier der Link.
Da sind ja immer noch absolute Positionierungen drin. Und vergiss am besten auch noch die betonierten Höhenangaben. auto ist immer noch kein gültiger Wert für max-width.
Dafür muss es doch eine richtige Umsetzung geben. Idee?
Wenn ich dich richtig verstehe nav > ul {padding: 1em 0;}.
Bis demnächst
Matthias
Hallo Matthias,
es existiert nur noch eine Positionsangabe, die ich nicht entfernen kann. Sonst sieht der Header nicht mehr aus, wie er aussehen soll. Ich ändere das Logo eh noch komplett bzw. stelle es komplett auf inline-SVG um. Insofern im Moment einfach ein Auge zudrücken. Die betonierten Höhenangaben wurden ebenfalls bis auf eine (Höhe der Navigation) entfernt.
ja, fast. Wie bekomme ich den Abstand zwischen Header und Main entfernt bzw. was verursacht den? Nochmal ein herzliches Dankeschön an alle, die sich meinem Problem angenommen und Geduld mit mir hatten.
Hallo Da Ignaz,
ja, fast. Wie bekomme ich den Abstand zwischen Header und Main entfernt bzw. was verursacht den?
Da ist kein Abstand. Nutze den Seiteninspektor und du wirst sehen, dass der Abstand zwischen svg und nav ist. Der kommt durch reservierten Platz für Unterlängen zustande. Abhilfe durch vertical-align: bottom oder display: block. (wiki/vertical-align)
PS: Ich habe deine Beispielseite als problematische Seite gesetzt.
Bis demnächst
Matthias
@@Matthias Scharwies
Übrigens. HTML-Elemente werden seit ca. 2000 klein notiert!
HTML ist seit 1989 case-insensitiv. Daran hat sich auch um die Jahrtausendwende nichts geändert.
Wenn du eine best pracitice erwähnst, solltest du diese auch als solche benennen.
LLAP 🖖