Fehlermeldung

[franzsen]

Ich verweise auf eine Seite die eine liste an links aufweist. Die Seite wird soweit tadellos angezeigt jedoch bekomme ich eine Meldung, daß ein Verweis nicht gefunden wurde. Ich habe in anderen HTML-Dokumenten es so gelöst, daß gleichzeitig ein Inhalt angezeigt wird. In diesem Fall klappt es nicht. Ich bekomme die Meldung> „Cannot GET /Rezepte/Allgemeines/allgemeines.html“. Außerdem stimmt der Dateibaum in der Fehlermeldung nicht. Eigentlich müßte es heißen „Rezepte/Allgemeines/abkuerzungen.html“. Ich komme nicht drauf wo der Fehler liegt. Ich habe es mit den anderen Dokumenten verglichen, aber es scheint alles zu stimmen.

Richtig ist

Ordner Rezepte  
	index.html  
	Ordner Allgemeines  
		abkuerzungen.html  
		gewuerzkunde.html  

Wieso wird der Tabulator nicht angezeigt? / Edit RolfB: Habe das mal in ~~~ eingeschlossen /

Woher die Fehlermeldung „allgemeines.html“ nimmt ist mir ein Rätsel. Wahrscheinlich fehlt wieder nur eine Kleinigkeit.

Hier die Liste:

<ul>  
	<li class="abstand">Allgemeines</li>  
	<ul class="liste">  
		<li><a href="Allgemeines/abkuerzungen.html" target="Inhalt">Maße und Gewichte</a></li>  
		<li><a href="Allgemeines/gewuerzkunde.html" target="Inhalt">Gewürzkunde</a></li>  
   </ul>
     <li><a href="Beilagen/beilagen.html">Beilagen</a></li>
     <li><a href="Gebaeck/gebaeck.html">Gebäck</a></li>
     <li><a href="Getraenke/getraenke.html">Getränke</a></li>
     <li><a href="Suppen/suppen.html">Suppen</a></li>
     <li><a href="Fleischrezepte/schwein.html">Fleischspeisen</a></li>
     <li><a href="Mehlspeisen/Mehlspeisen.html">Mehlspeisen</a></li>
     <li><a href="Suesspeisen/suesspeisen.html">Süßspeisen</a></li>
     <li><a href="Eisrezepte/eisrezepte.html">Eisrezepte</a></li>
     <li><a href="Kuchen/kuchen.html">Kuchen</a></li>
     <li><a href="Torten/torten.html">Torten</a></li>
     <li><a href="Puddings/puddings.html">Puddings</a></li>
     <li><a href="Marmeladen/marmeladen.html">Marmeladen</a></li>
     <li><a href="Weihnachstbaeckerei/weihnachtsbaeckerei.html">Weihnachtsbäckerei</a></li>
		<li class="abstand"><a href="../index.html">Zum Hauptmenü</a></li>
   </ul>

Habe zwar auf Quelltext getippt aber es kommt nicht in Listenform. Wie muß man einen Quelltext eingeben?

Wie muß es machen, daß der Verweis auf dieses Dokument gleich „abkuerzungen.html“ geladen wird?

Falls diese Informationen nicht ausreichen, dann sagt mir welche Informationen Ihr benötigt.

[Gunnar Bittersmann]

@@franzsen

aber es scheint alles zu stimmen.

Nö, die Verschachtelung der Listen stimmt schon mal nicht:

<ul>  
	<li class="abstand">Allgemeines</li>  
	<ul class="liste">  
		<li><a href="Allgemeines/abkuerzungen.html" target="Inhalt">Maße und Gewichte</a></li>  
		<li><a href="Allgemeines/gewuerzkunde.html" target="Inhalt">Gewürzkunde</a></li>  
   </ul>
     <li><a href="Beilagen/beilagen.html">Beilagen</a></li>
     ⋮
   </ul>

ul darf nicht Kind von ul sein. Die untergeordnete Liste gehört in ein li der übergeordneten:

<ul>  
	<li>Allgemeines
		<ul>  
			<li><a href="Allgemeines/abkuerzungen.html" target="Inhalt">Maße und Gewichte</a></li>  
			<li><a href="Allgemeines/gewuerzkunde.html" target="Inhalt">Gewürzkunde</a></li>  
		</ul>
	</li>  
	<li><a href="Beilagen/beilagen.html">Beilagen</a></li>
	⋮
</ul>

Habe zwar auf Quelltext getippt aber es kommt nicht in Listenform. Wie muß man einen Quelltext eingeben?

Ein Code-Block muss eine Leerzeile drüber und drunter haben. Im Markdown steht dann ~~~[Sprache] am Anfang und ~~~ an Ende, nicht `.

LLAP 🖖

[Orlok]

Hallo Gunnar

Habe zwar auf Quelltext getippt aber es kommt nicht in Listenform.

Ein Code-Block muss eine Leerzeile drüber und drunter haben.

So sollte es eigentlich sein, ja. Ich hatte es damals so implementiert, dass wenn auf den Button geklickt wird, eine Leerzeile vor dem Cursor beziehungsweise der Auswahl ausreicht. Nach dem schließenden ~~~ wird dann automatisch eine Leerzeile eingefügt.

Der relevante Abschnitt des Forumscodes sieht so aus:

  case selectionIsCodeBlock():
    removeMarkup('block');
    break;

  case selectionIsInlineCode():
    removeMarkup('inline');
    break;

  case selectionContainsNewlines():
    createCodeBlock();
    break;

  case selectionIsPrecededByNewlines() && selectionIsWholeLine():
    createCodeBlock();
    break;

  default:
    createInlineCode();

Es wäre nicht sehr benutzerfreundlich, wenn man am Ende der Eingabe noch eine weitere Leerzeile einfügen müsste, damit beim Klick auf den Quelltext-Button die Begrenzer für einen Codeblock eingefügt werden. Eine Leerzeile zur Unterscheidung genügt.

Viele Grüße,

Orlok

[Robert B.]

Moin @franzsen,

eine „dumme“ Frage:

<ul class="liste">

Was soll das denn? „Use classes with semantics in mind.“

Viele Grüße
Robert

[Matthias Apsel]

Hallo Robert B.,

eine „dumme“ Frage:

<ul class="liste">

Was soll das denn? „Use classes with semantics in mind.“

BEM-Klassenbezeichner für eine allgemeine Liste 😉

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

ist BEM nun ein Gegensatz zu oder eine Erweiterung von semantischem Markup und Klassifizierung?

Rolf

[Gunnar Bittersmann]

@@Rolf B

ist BEM nun ein Gegensatz zu oder eine Erweiterung von semantischem Markup und Klassifizierung?

Eine Erweiterung.

Was es nicht einfacher macht, dagegen zu argumentieren.

LLAP 🖖

[Gunnar Bittersmann]

@@Robert B.

eine „dumme“ Frage:

<ul class="liste">

Was soll das denn? „Use classes with semantics in mind.“

Hach, da hatte ich doch glatt vergessen zu erwähnen, dass ich die unsinnigen Klassen gleich mit entsorgt hatte.

Wobei <li class="abstand"> mindestens ebenso unsinnig ist, wenn nicht gar noch unsinniger.

LLAP 🖖

[franzsen]

Eigentlich habe ich nach einer Überschrift und einen Querstrich (hr) einen Abstand zur nachfolgenden Liste einfügen wollen. Inzwischen habe ich das auch schon anders gelöst.

[Gunnar Bittersmann]

@@franzsen

Eigentlich habe ich nach einer Überschrift und einen Querstrich (hr)

Nei-en, hr ist kein Querstrich. hr ist ein Trenner.

Und „niemals will man, dass eine Überschrift von dem, was sie überschreibt, abgetrennt ist.“ Déjà vu.

LLAP 🖖

[franzsen]

Sicherlich ist meine Ausdrucksform nicht so Fachmännisch. Eigentlich ist es ein Querstrich bzw. waagrechte Linie den/die ich mit „hr“ erzeugt habe. Es soll die Überschrift (Inhalt) von der Liste optisch trennen. Oder liege ich da mit der Methode falsch? Die darauffolgende Liste soll nicht direkt an der Linie kleben und habe mit class="abstand" gemacht. Habe es inzwischen im Stylesheet durch hr{margin-bottom...} ersetzt. Das Element hr kennzeichnet einen thematischen Bruch.

[Matthias Apsel]

Hallo franzsen,

Sicherlich ist meine Ausdrucksform nicht so Fachmännisch. Eigentlich ist es ein Querstrich bzw. waagrechte Linie den/die ich mit „hr“ erzeugt habe. Es soll die Überschrift (Inhalt) von der Liste optisch trennen. Oder liege ich da mit der Methode falsch? Die darauffolgende Liste soll nicht direkt an der Linie kleben und habe mit class="abstand" gemacht. Habe es inzwischen im Stylesheet durch hr{margin-bottom...} ersetzt. Das Element hr kennzeichnet einen thematischen Bruch.

Eine hr trennt zunächst einmal aussschließlich inhaltlich. Sie lässt sich für einen Teil deiner Besucher so gestalten, dass sie auch visuell als Trenner wahrzunehmen ist. Aber eigentlich möchtest du keine Trennung, auch nicht visuell, sondern eine Unterscheidung von Überschrift und Listenelementen.

Deine Überschrift soll doch deine Liste beschreiben. In der Liste ist der Inhalt der Seite aufgeführt. Deshalb heißt die Überschrift ja auch "Inhalt". Überschrift und Liste gehören also zusammen. Wenn du eine Linie (= optisches Gimmick) brauchst, nimm irgendein border.

Die Klasse "abstand" zu nennen, ist auch nicht klug. Eigentlich brauchst du dafür überhaupt keine Klasse. Es könnte zum Beispiel h1 + ul oder nav ul als Selektor vollkommen ausreichend sein.

Bis demnächst
Matthias

[Regina Schaukrug]

Nun, Deine "Linie" könnte ein Rahmen border (nur unten: bottom) sein. Bei dem kann man das Aussehen bestimmen.

Den Abstand zwischen der Überschrift und dem Rahmen bestimmt das padding, den vom Rahmen zur äußeren Grenze des nächsten Textblocks der margin.

Fazit: CSS-Angaben wie

h2 {
  border-bottom:   2px solid red;
  padding-bottom:  .45rem;
  margin-bottom:   .60rem;
}

sollten nach Deinen Anpassungen bewirken was Du vor hast.

[Rolf B]

Hallo Regina,

habe meine Mod-Rechte mal genutzt, um den Typo buttom in bottom zu ändern.

Rolf

[Regina Schaukrug]

Ja. Richtig. Einer meiner konstantesten Typos.

Danke.

[Gunnar Bittersmann]

@@Regina Schaukrug

Ich kenne THF (inzwischen geschlossen).

Ich kenne TXL (wird hoffentlich bald geschlossen).

Aber THX? ✈️

LLAP 🖖

[Regina Schaukrug]

Aber THX?

• http://praxistipps.chip.de/abkuerzung-thx-das-bedeutet-sie_41888
• https://de.wiktionary.org/wiki/thx

[Rolf B]

Hallo Gunnar,

Aber THX? ✈️

Hier, an der Mündung der unteren Tunguska in den Jenissej.

Fundstelle der Info

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber THX? ✈️

Hier, an der Mündung der unteren Tunguska in den Jenissej.

Fundstelle der Info

Ich ließ unerwähnt, dass ich vorher auch schon auf http://www.iata.org/publications/Pages/code-search.aspx geschmult hatte … Spielverderber!

LLAP 🖖

PS: Einen Flughafen in einem 4000-Seelen-Dorf kann ich nicht ernstnehmen.

[Rolf B]

Hallo Gunnar,

den haben sie wohl seinerzeit gebraucht, um Stalin in die Verbannung zu fliegen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

den haben sie wohl seinerzeit gebraucht, um Stalin in die Verbannung zu fliegen.

Für ein Flugzeug, das nur einmal landen und nicht wieder starten soll, braucht man keinen Flughafen.

LLAP 🖖

[Gunnar Bittersmann]

@@franzsen

Eigentlich ist es ein Querstrich bzw. waagrechte Linie den/die ich mit „hr“ erzeugt habe. Es soll die Überschrift (Inhalt) von der Liste optisch trennen. Oder liege ich da mit der Methode falsch?

Ja. Das hatte ich doch schon gesagt. Und was stattdessen zu tun wäre auch.

Die darauffolgende Liste soll nicht direkt an der Linie kleben und habe mit class="abstand" gemacht.

Auch nicht gut. Den Abstand bekommst du mit unterem Abstand der Überschrift oder oberem Abstand der Liste hin.

Habe es inzwischen im Stylesheet durch hr{margin-bottom...} ersetzt. Das Element hr kennzeichnet einen thematischen Bruch.

Eben. Ein solcher Bruch ist bei dir nicht vorhanden, also ist das hr-Element falsch.

LLAP 🖖

[franzsen]

@@Gunnar Habe Deinen Rat befolgt und „hr“ gelöscht. Habe statt dessen „border-bottom“ gesetzt. Mit dem Abstand komme ich allerdings noch nicht ganz hin.

<ul>
  <li class="abstand"><a href="Allgemein/in_eigener_Sache.html" target="Inhalt">In eigener Sache</a></li>
    <ul>
       <li class="abstand"><a target="_blank" href="Ahnenforschung/index.html">Zur Ahnenforschung</a></li>
       <li class="abstand"><a href="Rezepte/index.html">Rezepte</a></li>
       <li class="abstand"><a href="Garten/Allgemein/index_garten.html">Gartenseite</a></li>
       <li class="abstand"><a href="Sprueche/sprueche.html">Sprüche</a></li>
       <li class="abstand"><a href="Politik/index_politik.html">Politik</a></li>
    </ul>
  <li class="abstand"><a href="Allgemein/links.html" target="Inhalt">Links</a></li>
  <li class="abstand"><a href="Allgemein/urheberrechte.html" target="Inhalt">Urheberrecht</a></li>
  <!--<li class="abstand"><a href="index.html">Zum Hauptmenü</a></li>
</ul>

Aussehen tut die Sache so:

Wenn ich den link „Rezepte“ wähle erhalte ich diese Liste:

<h2 id="mobilestart">Inhalt</h2>
<ul>
  <li>Allgemeines
     <ul>
       <li><a href="Allgemeines/abkuerzungen.html" target="Inhalt">Maße und Gewichte</a></li>
       <li><a href="Allgemeines/gewuerzkunde.html" target="Inhalt">Gewürzkunde</a></li>
     </ul></li>
  <li><a href="Beilagen/beilagen.html">Beilagen</a></li>
  <li><a href="Gebaeck/gebaeck.html">Gebäck</a></li>
  <li><a href="Getraenke/getraenke.html">Getränke</a></li>
  <li><a href="Suppen/suppen.html">Suppen</a></li>
  <li><a href="Fleischrezepte/schwein.html">Fleischspeisen</a></li>
  <li><a href="Mehlspeisen/Mehlspeisen.html">Mehlspeisen</a></li>
  <li><a href="Suesspeisen/suesspeisen.html">Süßspeisen</a></li>
  <li><a href="Eisrezepte/eisrezepte.html">Eisrezepte</a></li>
  <li><a href="Kuchen/kuchen.html">Kuchen</a></li>
  <li><a href="Torten/torten.html">Torten</a></li>
  <li><a href="Puddings/puddings.html">Puddings</a></li>
  <li><a href="Marmeladen/marmeladen.html">Marmeladen</a></li>
  <li><a href="Weihnachstbaeckerei/weihnachtsbaeckerei.html">Weihnachtsbäckerei</a></li>
	<li class="abstand"><a href="../index.html">Zum Hauptmenü</a></li>
</ul>

und bekomme ich dieses Bild:

Wie man sieht kleben hier die Listenelemente am Rahmen wobei ich dazu neige, daß es mir so besser gefällt. Wenn ich in CSS ul {margin-top...} selektiere werden beide ul angesprochen. Müßte es da nicht heißen ul ul {...}? Weiters sieht man die Fehlermeldung.

Die Ordnerstruktur sieht so aus:

Der link „Rezepte/index.html“ müßte eigentlich passen? Wieso kommt es zu dieser Fehlermeldung? Den link „Rezepte/Allgemeines/allgemeines.html“ gibt es gar nicht. Übersehe ich wieder etwas?

[Rolf B]

Hallo franzsen,

Ist das gezeigte HTML Snippet aus deinem Sourcecode oder aus den Entwicklerwerkzeugen des Browsers?

Wenn Sourcecode: vergiss das. Die Wahrheit liegt im Browser

Wenn Browser: treibt vielleicht ein JavaScript click-Handler sein Unwesen?

Rolf

[franzsen]

Hallo Rolf!

Das HTML Snippet ist aus dem Sourcecode des HTML-Editor Brackets. Der Browser dazu, der mir das Ergebnis anzeigt, ist Google Chrom.

Und wie kann ich dem JavaScript click-Handler sein Unwesen abgewöhnen?

[Rolf B]

Hallo franzsen,

willst Du mich nicht verstehen oder drücke ich mich so unklar aus?

Ich will wissen, was im Browser angekommen ist. Das findest Du in den Entwicklungswerkzeugen von Chrome (F12-Taste). Dort hast Du den Reiter Elements, der dir das aktuelle DOM aufbereitet, und den Reiter Sources, mit dem Du Dir den Quellcode anzeigen kannst, den Chrome erhalten hat.

Meine Vermutung ist, dass dort etwas anderes steht als dein Editor anzeigt. Wenn in den Entwicklerwerkzeugen von Chrome <a href="Allgemeines/abkuerzungen.html" ...> steht, aber trotzdem nach href="Allgemeines/allgemeines.html" verzweigt wird, dann muss man die Ursache dafür finden. Eine Möglichkeit ist ein JavaScript-Eingriff. Wenn's den gibt, müsstest DU ihn programmiert haben und davon wissen. Hast Du das nicht, muss man weiterschauen.

Rolf

[franzsen]

Leider wird hier oft vom Fragesteller das gleiche professionelle Wissen vorausgesetzt.

„Ich will wissen, was im Browser angekommen ist.“
Wer kommt da auf die Idee in den Entwicklerwerkzeugen nachzusehen?

„Das findest Du in den Entwicklungswerkzeugen von Chrome (F12-Taste). ...“ Ich hab's zwar unter „Anzeigen/Entwickler“ gefunden aber ich kenne das von Safari unter „Entwickler/Seitenquelltext einblenden“.

Ich habe darauf hin den Fehler gefunden aber nicht dort wo man ihn gesucht hätte. Das liegt wahrscheinlich daran, daß es schon eine Weile her ist, daß ich die Seiten erstellt habe. Nun möchte ich einiges umbauen. Man lernt ja dazu und möchte einiges verbessern oder anders machen. Jedenfalls ist dieses Problem bereinigt.

Ich habe mir auch gleich die Entwicklertools ein wenig angeschaut und gesehen, daß es eine Anzeige gibt die mir nicht einleuchtet.

Rechts im Bild ist margin durchgestrichen. Ist das eine Anzeige für einen Fehler? Ich habe im CSS nur eine einzige body-Einstellung:

Da gibt es nur ein Hintergrundbild. Was bedeutet es dann?

Meine Frage ist aber noch immer wie ich zwischen bestimmten Listenelementen einen Abstand schaffen kann, wenn das mit Klassen nicht bewerkstelligt werden soll? Ich habe jetzt folgende Liste:

<nav id="navi">
<h2 id="mobilestart">Inhalt</h2>
<ul>
  <li><a href="Allgemein/in_eigener_Sache.html" target="Inhalt">In eigener Sache</a>
  <ul>
     <li class="abstand"><a target="_blank" href="Ahnenforschung/index.html">Zur Ahnenforschung</a></li>
     <li><a href="Rezepte/index.html">Rezepte</a></li>
     <li> </li>
     <li><a href="Garten/Allgemein/index_garten.html">Gartenseite</a></li>
     <li><a href="Sprueche/sprueche.html">Sprüche</a></li>
     <li><a href="Politik/index_politik.html">Politik</a></li>
  </ul></li>
 <li class="abstand"><a href="Allgemein/links.html" target="Inhalt">Links</a></li>
 <li><a href="Allgemein/urheberrechte.html" target="Inhalt">Urheberrecht</a></li></li>-->
</ul>
</nav>

Das sieht nun so aus:

Ich habe es zwar mit einem leeren Listenelement versucht und in einem Test funktioniert es auch, aber hier nicht. Wahrscheinlich durch den code „list-style: none;“ wie ich im Test gesehen habe. Auch ein Abstand nach „Inhalt“ funktioniert nur im Test. Ich hätte es so probiert:

#navi h2 {
	padding-top: 5px;
	padding-bottom: 2px;
  border-bottom: solid 2px white;
  margin-bottom: 10px;
	}

[Matthias Apsel]

Hallo franzsen,

Rechts im Bild ist margin durchgestrichen. Ist das eine Anzeige für einen Fehler? Ich habe im CSS nur eine einzige body-Einstellung:

Nein, du legst für alle Elemente die Abstände auf Null fest. Keine gute Idee, imho..

Damit überschreibst du das Browser-Stylesheet, deshalb wird genau diese Angabe durchgestrichen.

Bis demnächst
Matthias

[franzsen]

Hallo Matthias!

Nein, du legst für alle Elemente die Abstände auf Null fest. Keine gute Idee, imho..

Soweit ich mich erinnern kann war der Gedanke eine einheitliche Formatierung zu erreichen weil jeder Browser ein anderes Stylesheet hat. Im Video Universalselektor wird dieser Schritt empfohlen.
Weiters wird dieser Vorgang im Hinblick auf das Responsive Design Im Buch „Jetzt lerne ich CSS3“ so beschrieben.

In einigen Layoutbeispielen haben Sie gesehen, daß wir alle Außen- und Innenabstände mit * { margin: 0; padding: 0; } entfernt haben. Dieses Zurücksetzen der Eigenschaften wird als «Reset« bezeichnet. Eleganter als die Holzhammermethode, die einfach auf alle Elemente angewandt wird, ist ein differenzierter Reset. Bei diesem werden die Elemente einzeln aufgezählt, für die die Abstände entfernt werden. Außerdem werden ein paar weitere grundlegende Formatierungen vorgenommen, etwa die Aufzäh-lungszeichen bei Listen entfernt und die Schriftgröße von Überschriften auf 100% gesetzt. Im Beispiel verwenden wir den Reset von Eric Meyer (http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ ).

Dieses Buch wurde 2012 herausgegeben. Vielleicht hat sich die Meinung in der Fachwelt inzwischen geändert?

Ich glaube sagen zu können, daß ich mich doch mit der Materie auseinandergesetzt habe. Zwischen Theorie und Praxis ist aber halt ein Unterschied und manchmal fehlt nur ein Strich-Punkt und man kommt nicht auf den Fehler drauf. Das hat sicherlich nichts mit mangelnder Kenntnis zu tun. Hier im Forum sitzen eben Leute die wahrscheinlich täglich mit der Materie zu tun haben und daher die Übung für fachliche Ausdrucksform und Praxis haben. Nun, inzwischen habe ich das Entwicklertool von Google Chrom auch kennen gelernt.

Jetzt fehlt mir noch der Abstand von einzelnen Listen-Elementen um die restlichen Klassen weg zu bringen.

Ich werde noch ein paar Änderungen vornehmen und es werden wahrscheinlich weitere Fragen auftauchen. Ich hoffe, ich werde weiter Hilfe bekommen auch wenn die Fehler für Euch plausibel sind und ich die Fragen nicht so stelle wie Ihr es tun würdet.

[Matthias Apsel]

Hallo franzsen,

die Stylesheets der Browser unterscheiden sich praktisch nicht. Die default-Angaben ergeben alle Sinn. Niemand deiner Besucher wird deine Seite in verschiedenen Browsern vergleichen.

Bis demnächst
Matthias

[franzsen]

Hallo Matthias!

Deine Antworten sind wie immer erleuchtend.👍👍👍 Es ist ja tatsächlich so, daß man einen Standardbrowser hat. Falls man wirklich einmal ausweichen muß bleibt das Design im Grunde gleich. Die kleinen Abweichungen spielen keine Rolle weil man sich ja auf den Inhalt konzentriert.
In diesem Fall werde ich keine Arbeitsintensiven Änderungen vornehmen.

[Rolf B]

Hallo franzsen,

wie du richtig zitiert hast, ist * { margin:0; padding:0 } der Holzhammer und es empfiehlt ein differenzierteres Vorgehen.

Das heißt nicht, dass Du mit dem Universalselektor Schiffbruch erleiden musst. Es ist nur so, dass Du dann etwas mehr Mühe hast, das Layout für Listen und andere Spezialmarkierungen wieder herzustellen.

Wegen deiner Abstände: das hier hast Du gesehen?

Rolf

[franzsen]

Hallo Rolf!

Danke für das Beispiel. Ja, ich habe es bereits gesehen. Prinzipiell hatte ich es ja richtig. Leider war wieder einmal der Schalk am Werk. Ich habe vergessen „abstand“ aus dem CSS zu löschen. Nun funktioniert die erste Liste. Bei der zweiten Liste kiefle ich noch. Hier habe ich auch zwei verschachtelte Listen, allerdings soll das letzte Listenelement ebenfalls ein Stück nach unten rutschen. Wahrscheinlich geht es mit „nth-child“?

[Matthias Apsel]

Hallo franzsen,

allerdings soll das letzte Listenelement ebenfalls ein Stück nach unten rutschen. Wahrscheinlich geht es mit „nth-child“?

Ist das letzte das 11., 12. oder 17.? Oder doch einfach nur das letzte? Wie wärs mit last-child?

Bis demnächst
Matthias

[franzsen]

Einfach nur das letzte. Leider werden dabei auch die Verschachtelten mit gerechnet?

nav ul li:nth-last-child(1) {
	margin-top: 10px;
  color: red;
}

Ich bekomme dann:

Ich habe es rot gefärbt um es besser erkennen zu können.
Gewürzkunde würde doch zu „nav ul ul li:...“gehören?

Ich habe

nav ul li:nth-child(15) {
	margin-top: 10px;
  color: red;
}

genommen und das funktioniert. In diesem Fall werden wirklich nur die Listen-Elemente der äußersten Liste gerechnet.

[Rolf B]

Hallo franzsen,

nimm nav > ul > li:last-child, das verhindert das Überspringen von Ebenen.

Ein Selektor "a b" bedeutet: nimm ein b, das direkt oder über beliebig viele Zwischenstufen ein Nachfahre von a ist.

Der Selektor "a > b" bedeutet: nimm ein b, das ein unmittelbares Kind von a ist.

Rolf

[franzsen]

Hallo Rolf!

Danke für die Erklärungen zu den Kindelementen. Ich habe ein wenig herum probiert und ist soweit gelungen. Die Kindelemente der zweiten Ebene sind auch kein Problem. Was mir nicht gelingt ist nur das erste Element der ersten Ebene anzusprechen.

nav > ul > li:nth-child(1) {
	margin-top: 10px;
	color: red;
}

In diesem Fall werden auch alle Kindelemente der zweiten Ebene angesprochen.

Eigentlich sollte nur „Allgemeines“ angesprochen werden.

[Gunnar Bittersmann]

@@franzsen

nav > ul > li:nth-child(1) {
	margin-top: 10px;
	color: red;
}

In diesem Fall werden auch alle Kindelemente der zweiten Ebene angesprochen.

Nein, das werden sie nicht …

… oder haben alle Kindelemente der zweiten Ebene 10px^[1] Abstand nach oben?

Was du hier siehst, ist Vererbung. Manche Eigenschaften (wie z.B. color) werden vererbt; andere (wie z.B. margin-top) nicht.

Ob eine Eigenschaft vererbt wird oder nicht, steht in der Spezifikation. Oder auch in MDN: color | margin-top

LLAP 🖖

---

1. Wenn irgendwo im Stylesheet px auftauscht, dann ist das blöd. Aber das ist ein anderes Thema. ↩︎

[franzsen]

Folgender Code wird verwendet. Es ist aber eine Übung und nicht die Hommpage. Es werden nur die Listentexte übernommen. Die eingerahmten codes bewirken nicht den entsprechenden Erfolg ganz gleich welchen ich davon verwende.

<!doctype html>
<html lang="de">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<title></title>
<style>
* {
  margin: 0;
  padding: 0;
}
nav {
  width: 10em; 
  background-color: #000;
  color: #ff0;
  padding: 1em;
  border-radius: 10px;
}
nav h2 {
  padding-top: 5px;
  padding-bottom: 2px;
  border-bottom: solid 2px white;
  margin-bottom: 5px;
}
nav ul {
  list-style: none;
  padding: 0;
  margin-left: 3px;
}
/*****************************/
nav > ul > li:nth-last-child(15) { /* soll das letzte Element der ersten Ebene beginnend von unten rot färben*/
	color: red;
}

nav > ul > li:nth-child(1) { /* soll das erste Element der ersten Ebene rot färben */
	color: red;
}
/*****************************/
nav > ul > li:nth-last-child(1) { /* erzeugt einen Abstand vor dem letzten Element*/
	margin-top: 15px;
}
nav ul ul {
  padding-left: 1em;
  margin-bottom: 10px;
}

</style>
</head>

<body>

<nav>
  <h2>Inhalt</h2>
  <ul>
    <li>Allgemeines
      <ul>
        <li>Abkürzungen</li>
        <li>Gewürzkunde</li>
      </ul></li>
    <li>Beilagen</li>
    <li>Gebäck</li>
    <li>Getränke</li>
    <li>Suppen</li>
    <li>Fleischspeisen</li>
    <li>Mehlspeisen</li>
    <li>Süßspeisen</li>
    <li>Eisrezepte</li>
    <li>Kuchen</li>
    <li>Torten</li>
    <li>Puddings</li>
    <li>Marmeladen</li>
    <li>Weihnachtsbäckerei</li>
    <li>Zum Hauptmenü</li>
  </ul>
</nav>
</body>
</html>

[Rolf B]

Hallo franzsen,

nav > ul > li:nth-last-child(15) { color: red; }

errötet das 15. LI von unten aus (bei 15 LI also das erste)

nav > ul > li:nth-child(1) { color: red; }

errötet das 1. LI von oben.

Die Vererbung bekommst Du damit aber nicht weg. Verschiebe oder kopiere dein color: #ff0; mal von nav zum ul Element, das gilt dann für alle ul und unterbricht die Vererbungskette. Wenn Du verschiebst statt kopierst, musst Du dein h2 separat färben.

Rolf

[franzsen]

Die Farbe ist eigentlich nur gedacht gewesen mir die Änderungen in der Übung sichtbar zu machen. Im Original wird es nicht benötigt.
Unten habe ich den gesamten Übungs-Code gezeigt. Anscheinend gibt es da keine Möglichkeit weil ich keine Rückmeldung bekommen habe.

Ich wünsche Euch allen Frohe Weihnachten und ein Gutes Neues Jahr und vielen Dank für die guten Ratschläge die ich von Euch immer bekommen habe.

[Rolf B]

Hallo franzsen,

"unten" meint dies hier?

Welches Problem genau bekommst Du nicht weg? Ich dachte, die Problem darin wären geklärt gewesen?!

Rolf

[franzsen]

Ja, diesen Code meine ich (vom 18.12.2017 16:46). Es ist der gesamte Übung-Code.

Den Grund verstehe ich; Die Unterliste ist ja Teil des ersten „li-Elementes“ da es vor dem end-Tag eingefügt wird. Aber wie vermeide ich, daß diese Unterliste trotz Vererbung gefärbt wird.

[Matthias Apsel]

Hallo franzsen,

Den Grund verstehe ich; Die Unterliste ist ja Teil des ersten „li-Elementes“ da es vor dem end-Tag eingefügt wird. Aber wie vermeide ich, daß diese Unterliste trotz Vererbung gefärbt wird.

Zum Beispiel durch nav ul ul { color: yellow; }.

Bis demnächst
Matthias

[franzsen]

Hallo Matthias!

Ich hoffe, Du hattest einen geruhsamen Heiligen Abend.

Das heißt also, man muß nachträglich korrigieren. Wenn ich richtig liege muß man auch auf die Reihenfolge achten weil ja in der Regel die letzte Eintragung die vorhergehende überschreibt.

Habe dann noch Fragen zu „hoover“. Dazu soll ich wahrscheinlich einen neuen Beitrag schreiben?

[Matthias Apsel]

Hallo franzsen,

Das heißt also, man muß nachträglich korrigieren.

Möglicherweise muss man das nicht, aber es ist eine Möglichkeit

Wenn ich richtig liege muß man auch auf die Reihenfolge achten weil ja in der Regel die letzte Eintragung die vorhergehende überschreibt.

Nein. Es kommt auf die Spezifität der Selektoren an.

Habe dann noch Fragen zu „hoover“. Dazu soll ich wahrscheinlich einen neuen Beitrag schreiben?

hover. Könntest du.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo franzsen,

Einfach nur das letzte. Leider werden dabei auch die Verschachtelten mit gerechnet?

nav ul li:nth-last-child(1) {
	margin-top: 10px;
  color: red;
}

Ja, alle letzten.

nav ul li:nth-child(15) {
	margin-top: 10px;
  color: red;
}

So wie hier auch alle 15. Listenelemente selektiert werden, nur das die eine Liste nicht so viele Elemente hat.

Wenn du nur das letzte der äußeren Liste haben möchtest:

nav ul > li:last-child

Wenn du nur das letzte der inneren Liste haben möchtest:

nav ul ul > li:last-child

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

nav ul > li:last-child

Nope, das nimmt das letzte li in jeder Liste innerhalb von nav.

Das letzte Kind nur der äußersten Liste bekommst Du nur mit nav > ul > li.

Mit nav ul > li trifft man auch nav ul li ul li. Taugt nicht.

Mit nav > ul li trifft man auch nav ul li ul li. Taugt nicht.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Stimmt. Da war ich zu schnell.

Bis demnächst
Matthias

[franzsen]

Danke für die sehr verständliche Erklärung. „nth-child ()“ ist so ein Kapitel das einiger Übung bedarf. Überhaupt der Klammerausdruck.

[Gunnar Bittersmann]

@@franzsen

Danke für die sehr verständliche Erklärung. „nth-child ()“ ist so ein Kapitel das einiger Übung bedarf. Überhaupt der Klammerausdruck.

Da hatte ich doch neulich erst auf der Spielwiese Rasen ausgesät.

LLAP 🖖

[Gunnar Bittersmann]

@@franzsen

Einfach nur das letzte. Leider werden dabei auch die Verschachtelten mit gerechnet?

Ja, klar. Der Selektor nav ul li:nth-last-child(1) wählt alle li Elemente innerhalb von ul innerhalb von nav, die das jeweils letzte Kind sind.

Der Selektor ist überspezifiziert. Da alle li sowieso innerhalb von ul sind, ist ul im Selektor überflüssig. (Es sei denn, du willst li innerhald von ol ausschließen. Willst du hier aber wohl nicht.)

Und wie Matthias sagte: für :nth-last-child(1) kannst du auch :last-child schreiben.

Gewürzkunde würde doch zu „nav ul ul li:...“gehören?

Ja. Und damit eröffnet sich eine Möglichkeit, eine Regel für nav ul li:… (bzw. nav li:…) wieder zu überschreiben.

Besser ist es aber, ungewollte Angaben gar nicht erst zu machen. Wenn du nur die Listitems der äußeren Liste auswählen willst, dann die äußere Liste als Kind (nicht Nachfahre) von nav und die Listitems als Kinder dieser Liste: nav > ul > li:….

Ich habe nav ul li:nth-child(15) … genommen und das funktioniert. In diesem Fall werden wirklich nur die Listen-Elemente der äußersten Liste gerechnet.

Nicht wirklich. Du hattest einfach nur Glück, dass in der inneren Liste nicht auch 15 oder mehr Punkte waren.

Und das hört auch sofort auf zu funktionieren, wenn du einen Menüpunkt hinzufügst oder entfernst. Dann ist der 15. Menüpunkt nicht mehr der letzte.

LLAP 🖖

[Gunnar Bittersmann]

@@franzsen

Leider wird hier oft vom Fragesteller das gleiche professionelle Wissen vorausgesetzt.

Nein.

„Ich will wissen, was im Browser angekommen ist.“
Wer kommt da auf die Idee in den Entwicklerwerkzeugen nachzusehen?

Jeder, der sich ernsthaft mit Webentwicklung beschäftigt. Und „ernsthaft“ meint nicht zwangsläufig professionell, sondern Verständnis dafür aufbringen, was man da tut. Energie des Verstehens.

Ich habe mir auch gleich die Entwicklertools ein wenig angeschaut und gesehen, daß es eine Anzeige gibt die mir nicht einleuchtet.

Rechts im Bild ist margin durchgestrichen. Ist das eine Anzeige für einen Fehler?

Durchaus nicht.

Dort ist auch angegeben, wo diese Deklaration herkommt: user agent stylesheet – das browserinterne Stylesheet, das gewisse Grundeinstellungen enthält, z.B.

• dass Überschriften und Textabsätze Blöcke bilden
• dass Überschriften fett dargestellt werden und je nach Hierarchie-Ebene in verschieden großer Schrift
• dass body 8px Randabstand hat.

Letzters ist das, was du da siehst. Durchgestrichen, weil die Angabe aus dem Browserstylesheet nicht mehr gilt, weil du sie mit
* { margin: 0 } überschrieben hast.

(Dass dein Selektor * weniger spezifisch als derjenige body im Browserstylesheet ist, tut nichts zur Sache, da die Herkunft in der Kaskade eine höhere Bedeutung hat.)

LLAP 🖖

[Rolf B]

Hallo franzsen,

einiges hast Du schon zu hören bekommen, nur noch eins von mir:

„Ich will wissen, was im Browser angekommen ist.“
Wer kommt da auf die Idee in den Entwicklerwerkzeugen nachzusehen?

Du zum Beispiel, weil ich Dich im Post zuvor danach gefragt hatte.

„Das findest Du in den Entwicklungswerkzeugen von Chrome (F12-Taste). ...“ Ich hab's zwar unter „Anzeigen/Entwickler“ gefunden aber ich kenne das von Safari unter „Entwickler/Seitenquelltext einblenden“.

Tut mir leid, ich benutze Windows und wenn Chrome das unter anderen Betriebssystemen anders macht, wusste ich das nicht.

Jedenfalls ist dieses Problem bereinigt.

Top 👍

Ich habe mir auch gleich die Entwicklertools ein wenig angeschaut…

Top 👍👍👍👍 - das ist dein wichtigstes Werkzeug überhaupt.

Rechts im Bild ist margin durchgestrichen.

Wurde bereits erklärt. Der * Selektor gilt für JEDES Element.

Meine Frage ist aber noch immer wie ich zwischen bestimmten Listenelementen einen Abstand schaffen kann, wenn das mit Klassen nicht bewerkstelligt werden soll?

Ich verstehe Dich so, dass die Unterliste nach oben und unten etwas abgesetzt werden soll, dazu auch noch eingerückt. Die Einrückung bekommst Du durch das linksseitige Padding des ul Elements. Abstand nach oben und unten kannst Du durch top/bottom Margin auf inneren ul Elementen schaffen, z.B. so:

#navi ul ul {
   margin: 0.5em 0;
   padding-left: 1em;
}

#navi ul ul trifft alle ul Elemente innerhalb von #navi, die in ein anderes ul Element geschachtelt sind. Die Regel definiert oben und unten 0.5em Abstand und links/rechts keinen. Das linksseitige Padding brauchst Du, weil Du ja mit * { padding:0 } das Standard-Padding des Browsers für ul-Elemente weggenommen hast.

Für den Unterstrich unter dem Header justierst Du den Abstand Headertext zu Strich mit dem padding-bottom des h2 Elements, und den Abstand Strich-zu-Liste mit dem margin-bottom. Also machst Du es eigentlich richtig.

Hier mein Bastelbeispiel: https://jsfiddle.net/3yvrg4tk/

Du kannst übrigens in den Entwicklerwerkzeugen auch die Werte in den Styles ändern und siehst dann live, wie sich das auswirkt. Oder mit der Checkbox davor eine Eigenschaft aus- und anschalten.

Rolf

[Matthias Apsel]

Hallo franzsen,

<ul>
  <li class="abstand"></li>
  <ul>

Ist ungültiges HTML. Warum immer noch class="abstand"?

Bis demnächst
Matthias

[franzsen]

Hallo Matthias!

Schon wieder nicht aufgepaßt. Man hatte mich schon am Anfang auf solchen Fehler aufmerksam gemacht.

Ich habe es in dem einem Beispiel noch so belassen um zu zeigen wo und wie ich den Abstand meinte. Im zweiten nav habe ich es schon korrigiert. Ich werde es auch hier ändern. Wie schaffe ich aber einen Abstand nach Border bzw. Weihnachtsbäckerei und "Zum Hauptmenü einen Abstand so wie es im ersten Menü ist?

[Rolf B]

Hallo,

ich habe diesen Text mal übersetzt und ins Wiki übernommen

Rolf

[Robert B.]

Danke @Rolf B :)

[franzsen]

Hallo Robert!

„liste“ habe ich deshalb gewählt, weil mir die Einrückung bei einer Liste zu groß ist. Daher hätte class= "liste" einen sprechenden Namen und man weiß auf was es sich bezieht. Inzwischen habe ich die Classe wieder rausgenommen.

[franzsen]

Hallo Gunnar!

Tja, da habe ich wahrscheinlich in der Früh vergessen meine Augen zu Kalibrieren. Ich habe beim anderen Code nachgesehen und da hätte ich die Verschachteln ja richtig geschrieben. Habe es gleich korrigiert. Das Dokument „abkuerzungen.html“ wird aber trotzdem nicht geladen. Im Ordner „Rezepte“ liegt das Dokument „index.html“ sowie der Ordner „Allgemeines“. Somit müßte der link richtig geschrieben sein.

<ul>
  <li class="abstand">Allgemeines
    <ul>
      <li><a href="Allgemeines/abkuerzungen.html" target="Inhalt">Maße und Gewichte</a></li>
      <li><a href="Allgemeines/gewuerzkunde.html" target="Inhalt">Gewürzkunde</a></li>
    </ul></li>
  <li><a href="Beilagen/beilagen.html">Beilagen</a></li>
  <li><a href="Gebaeck/gebaeck.html">Gebäck</a></li>
  <li><a href="Getraenke/getraenke.html">Getränke</a></li>
  <li><a href="Suppen/suppen.html">Suppen</a></li>
  <li><a href="Fleischrezepte/schwein.html">Fleischspeisen</a></li>
  <li><a href="Mehlspeisen/Mehlspeisen.html">Mehlspeisen</a></li>
  <li><a href="Suesspeisen/suesspeisen.html">Süßspeisen</a></li>
  <li><a href="Eisrezepte/eisrezepte.html">Eisrezepte</a></li>
  <li><a href="Kuchen/kuchen.html">Kuchen</a></li>
  <li><a href="Torten/torten.html">Torten</a></li>
  <li><a href="Puddings/puddings.html">Puddings</a></li>
  <li><a href="Marmeladen/marmeladen.html">Marmeladen</a></li>
  <li><a href="Weihnachstbaeckerei/weihnachtsbaeckerei.html">Weihnachtsbäckerei</a></li>
	<li class="abstand"><a href="../index.html">Zum Hauptmenü</a></li>
</ul>