Navicon positionieren

[franzsen]

Ich habe das Problem, daß ich das Navicon nicht in die rechte untere Seite bringe sondern es klebt einfach rechts mittig. Bei einem kleinem Monitor verschieben sich Überschrift und Navicon ineinander. Wahrscheinlich ist es wieder nur eine Kleinigkeit die ich übersehe.

header h1 {
	text-align: center;
	color: white;
	}
#navlink {
	position: relative;
	display: block;
	color: red;
	text-align: right;
	padding-right: 10px;
	padding-bottom: -10px;
	margin-top: -75px;
	text-decoration: none;
	visibility: hidden;
	}

<header>
	<h1>Buntes Allerlei</h1>
	<a id="navlink" title="Zum Menü" href="#mobilestart">☰ Menü</a>
</header>

Wie bringe ich das Navicon in die rechte unterste Ecke ohne Einfluß auf die Überschrift?

Link

[Matthias Scharwies]

Servus!

Ich habe das Problem, daß ich das Navicon nicht in die rechte untere Seite bringe sondern es klebt einfach rechts mittig. Bei einem kleinem Monitor verschieben sich Überschrift und Navicon ineinander.

Bei mir im Firefox sieht es gut aus. Erst ab weniger als 350px liegt es übereinander. Du kannst h1 bei kleinen Viewports mit text-align:left noch weiter links bringen. Ohne das Wort Menü nimmt das navicon noch weniger Platz ein.

Deine Seite sieht gut aus, habe sie grad durch den Validator laufen lassen:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fmembers.aon.at%2Fmeine_private_seite%2FRezepte%2FSuppen%2Fsuppen.html

einige Tipps:

• Regel Abstände über margin und padding, nicht über <br>

• Wenn schon <br>, aber nicht </br> (auf der Suppenseite)

• Innerhalb von ol und ul nur li-Elemente, <h1> kommt davor (auf der Suppenseite)

• Statt <div id="gesammt"> einfach <main>

• Meinst du mit <abr> <abbr>?

Herzliche Grüße

Matthias Scharwies

[franzsen]

Bei mir im Firefox sieht es gut aus. Erst ab weniger als 350px liegt es übereinander. Du kannst h1 bei kleinen Viewports mit text-align:left noch weiter links bringen. Ohne das Wort Menü nimmt das navicon noch weniger Platz ein.

Nun, ich dachte es läßt sich doch irgendwie das Navicon isoliert vom Titel positionieren. Die drei Balken werden, denke ich, bereits allgemein bekannt sein, daß es sich um einen Navigatoraufruf handelt. Ich könnte daher „Menü“ weg lassen. Habe aber auch schon überlegt die Überschrift an den linken Rand zu schieben.
Bei devices steht „Native Resolution, Virtual Resolution“. Welche Angabe ist für Media Queries maßgebend?

Deine Seite sieht gut aus, habe sie grad durch den Validator laufen lassen:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fmembers.aon.at%2Fmeine_private_seite%2FRezepte%2FSuppen%2Fsuppen.html

So etwas zu hören freut einem. Habe mich bemüht die neue Materie so gut wie möglich anzuwenden.
Als Meldung bekomme ich noch: „Element br not allowed as child of element ul in this context.“
Wie mache ich eine Leerzeile zwischen zwei Listenelementen? Ich habe es so hingebracht:

span {
	visibility: hidden;
	}

<ul>
	<li>Zeile 1</li>
	<li><span>Leerzeile</span></li>
	<li>Zeile 3</li>
	<li>Zeile 4</li>
</ul>

Ist das die Methode?

einige Tipps:

• Regel Abstände über margin und padding, nicht über <br>

• Wenn schon <br>, aber nicht </br> (auf der Suppenseite)

Habe ich inzwischen angepaßt. Wie die reingekommen sind, weiß ich nicht. Habe sonst die anderen alle normal geschrieben.

• Innerhalb von ol und ul nur li-Elemente, <h1> kommt davor (auf der Suppenseite)

Habe ich geändert aber bekomme zwar keine Fehlermeldung aber eine Warnung.

• Statt <div id="gesammt"> einfach <main>

• Meinst du mit <abr> <abbr>?

Ja, wurde korrigiert. Rechtschreibfehler kommen halt auch hier vor. Da ich keine Beschwerde vom Computer bekommen habe ist es mir nicht aufgefallen.

[Gunnar Bittersmann]

@@franzsen

Bei devices steht „Native Resolution, Virtual Resolution“. Welche Angabe ist für Media Queries maßgebend?

Wenn du diese Frage stellst, bist du immer noch auf dem falschen Weg.

Für Media-Queries sollte der Inhalt maßgeblich sein; nicht irgendwelche Geräte.

LLAP 🖖

[franzsen]

Bei devices steht „Native Resolution, Virtual Resolution“. Welche Angabe ist für Media Queries maßgebend?

Wenn du diese Frage stellst, bist du immer noch auf dem falschen Weg.

So falsch kann die Frage nicht sein. Bevor ich den Inhalt an das Gerät „anpassen kann“ muß ich ja vorher wissen welche Werte ich eingeben muß oder soll. 25em, 60em oder was? Natürlich könnte ich alles durchprobieren bzw. gleich mit dem Taschenrechner rechnen und 21em probieren. Wer Erfahrungswerte hat gibt gleich die richtigen Werte ein und erspart sich viel überflüssige Arbeit. Wie Mathias schreibt tritt das Problem erst ab „weniger als 350px“ auf. Das erklärt aber noch immer nicht den Unterschied zwischen Native- und Virtual Resolution.

Für Media-Queries sollte der Inhalt maßgeblich sein; nicht irgendwelche Geräte.

Soweit ich das beurteilen kann, natürlich als Neuling, habe ich meine Webseite so ziemlich auf verschiedene Geräte gut abgedeckt, also den richtigen Weg eingehalten.
Wie Du richtigerweise sagst ist der Inhalt maßgebend. Aber, trotzdem bleibt die Reihenfolge @media screen and (...) und dann erst wird der Inhalt angepaßt. Ich sollte also vorher schon ungefähr wissen was ich in die runden Klammern eingebe, ab welchen Wert (Gerät) ich meine Webseite anpassen muß. Eine Webseite muß vielleicht mit 60em bereits angepaßt werden, eine andere genügt wenn ich sie erst ab 38em anpasse. Ich denke, einerseits ist der Inhalt abhängig vom Gerät, andererseits das Gerät vom Inhalt. Natürlich stehe ich nicht auf den Standpunkt, daß es die alleinige Wahrheit ist und mich irren kann.

[Matthias Apsel]

Hallo franzsen,

Bevor ich den Inhalt an das Gerät „anpassen kann“ muß ich ja vorher wissen welche Werte ich eingeben muß oder soll. 25em, 60em oder was? Natürlich könnte ich alles durchprobieren bzw. gleich mit dem Taschenrechner rechnen und 21em probieren.

Nö. Am besten, probierst - aber anders als du es beschreibst.

Du stellst deine Seite im Browser dar und vergrößerst (mobile first) oder verkleinerst (desktop first) das Browserfenster, bis du den Eindruck hast, die Gestaltung ist nicht mehr passend. Dann lässt du dir von einem Entwicklertool die Größe des Browserfensters sagen und setzt ebenfalls im Entwicklertool die entsprechenden Breakpoints (in em).

Bis demnächst
Matthias

[franzsen]

Hallo franzsen,

Bevor ich den Inhalt an das Gerät „anpassen kann“ muß ich ja vorher wissen welche Werte ich eingeben muß oder soll. 25em, 60em oder was? Natürlich könnte ich alles durchprobieren bzw. gleich mit dem Taschenrechner rechnen und 21em probieren.

Nö. Am besten, probierst - aber anders als du es beschreibst.

Du stellst deine Seite im Browser dar und vergrößerst (mobile first) oder verkleinerst (desktop first) das Browserfenster, bis du den Eindruck hast, die Gestaltung ist nicht mehr passend. Dann lässt du dir von einem Entwicklertool die Größe des Browserfensters sagen und setzt ebenfalls im Entwicklertool die entsprechenden Breakpoints (in em).

Nun, dann habe ich ja gar nicht so falsch gearbeitet. Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest, dann passe ich den Inhalt an. Mangels an passenden Geräten „desktop first“. Vielleicht war es Zufall, daß ich den richtigen Breackpoint gleich erwischt habe ab den meine Webseite Anpassungsbedarf hat. Gemessen habe ich mit einem digitalem Lineal. Mit dem Emulator konnte ich feststellen, daß alle Kategorien soweit berücksichtigt waren. Eine Änderung ergab sich erst durch das Navicon. Wäre also noch einen Breackpoint einbauen.

[Matthias Apsel]

Hallo franzsen,

Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest, dann passe ich den Inhalt an.

Nein, du stellst kein Gerät fest.

Mangels an passenden Geräten „desktop first“.

Wieso mangels Geräten? Desktop first bedeutet, dass du ausgehend von einem großen Viewport zu kleineren hinarbeitest.

Mach das Browserfenster so lange schmaler, bis das Aussehen nicht mehr passt.

Eine Änderung ergab sich erst durch das Navicon. Wäre also noch einen Breackpoint einbauen.

Du kannst auch für einzelne Elemente viewportabhängige Eigenschaften vergeben.

Bis demnächst
Matthias

[franzsen]

Hallo franzsen,

Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest, dann passe ich den Inhalt an.

Nein, du stellst kein Gerät fest.

Ja, vielleicht drücke ich mich falsch aus. Gerät steht halt in Hinterkopf noch immer für unterschiedliche Viewpoints. Gerät iPhone 5c bzw. iPad Air, etc.

Mangels an passenden Geräten „desktop first“.

Wieso mangels Geräten? Desktop first bedeutet, dass du ausgehend von einem großen Viewport zu kleineren hinarbeitest.

Nun, wenn ich Besitzer eines Tablets oder Smartphones wäre könnte ich es direkt ansehen. Ich habe daher das Browserfenster (iMac 27") verändert. Im Prinzip meinte ich aber sicher das gleiche. Profis und Amateure haben halt doch eine unterschiedliche Ausdrucksweise.

Eine Änderung ergab sich erst durch das Navicon. Wäre also noch einen Breackpoint einbauen.

Du kannst auch für einzelne Elemente viewportabhängige Eigenschaften vergeben.

Das habe ich vor.

[Gunnar Bittersmann]

@@franzsen

Nun, dann habe ich ja gar nicht so falsch gearbeitet.

Doch.

Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest

Solange „Gerät“ in deinem Gedankengang vorkommt, hast du falsch gearbeitet.

Mangels an passenden Geräten „desktop first“.

Schon wieder irgendwas mit „Geräten“. Im Übrigen ist „mobile first“ meist der bessere Ansatz.

LLAP 🖖

[Matthias Apsel]

Hallo franzsen,

Wie mache ich eine Leerzeile zwischen zwei Listenelementen? Ich habe es so hingebracht:

span {
	visibility: hidden;
	}

<ul>
	<li>Zeile 1</li>
	<li><span>Leerzeile</span></li>
	<li>Zeile 3</li>
	<li>Zeile 4</li>
</ul>

Ist das die Methode?

Nein.

Was ist der Grund für den Abstand?

<ul>
	<li>Zeile 1</li>
	<li class="Grund_des_Abstands">Zeile 3</li>
	<li>Zeile 4</li>
</ul>

li.Grund_des_Abstands {
  margin-top: 1em;
}

Bis demnächst
Matthias

[franzsen]

Was ist der Grund für den Abstand?

<ul>
	<li>Zeile 1</li>
	<li class="Grund_des_Abstands">Zeile 3</li>
	<li>Zeile 4</li>
</ul>

li.Grund_des_Abstands {
  margin-top: 1em;
}

Wie Du bei der Startseite siehst, möchte ich die Links gruppieren. Erreichen wollte ich dies optisch mit Abständen.

Danke für Hilfe. Manchmal steht man bei den einfachsten Dingen daneben.

[Matthias Apsel]

Hallo franzsen,

Wie Du bei der Startseite siehst, möchte ich die Links gruppieren. Erreichen wollte ich dies optisch mit Abständen.

Hab ich jetzt mal reingeschaut. Wenn fast jedes Element die Klasse "Abstand" hat, ist das ein untrügliches Zeichen dafür, dass die Klasse überflüssig ist. "Abstand" ist zudem ein präsentationsbezogener Klassenbezeichner. In Screenreadern gibt es keinen Abstand. "neue_gruppe" wäre ein besserer Bezeichner, wenn denn die entsprechenden Elemente gemeinsam eine Gruppe bilden. Dann wäre es vielleicht besser, die zusammengehörenden li-Elemente in eine eigenene Liste zu stecken.

Deine Lösung könnte lauten:

nav > ul > li:not(:first-child) {
  margin-top: 1em;
}

oder besser

nav > ul > li {
  margin-bottom: 1em;
}

denn der letzte Abstand nach unten wird nicht stören, möglicherweise sogar gewünscht sein.

Lesestoff:

• >: wiki/Kindselektor
• :not: wiki/Pseudoklasse not
• :first-child: wiki/Pseudoklasse first-child

Bis demnächst
Matthias

[franzsen]

Inzwischen habe ich das auch mit dem Navicon erledigt.

Jetzt habe ich noch eine Frage zur Webseite. Nachdem ich ursprüngliche Fehler bereinigt habe bekomme ich vom Validator noch diese Meldungen:

Bei der Startseite: „Consider using the h1 element as a top-level heading only“ Soll man eine Sprungmarke nicht in ein Element wie h1 geben? Kann man so wie classen mehrere ids in eine Zeile packen.

Nachdem ich die Überschriften wie Mathias geraten hat aus den Listen herausgenommen habe, bekomme ich Trotzdem die Meldung bei „http://members.aon.at/meine_private_seite/Rezepte/Suppen/suppen.html“

„Consider using the h1 element as a top-level heading only“

Was denkt Ihr über Validome?

[Der Martin]

Hi,

Bei der Startseite: „Consider using the h1 element as a top-level heading only“

also frei übersetzt etwa: Man sollte h1 nur einmal als oberste Überschriftenebene benutzen.
Vermutlich verwendest du mehrere h1-Überschriften auf deiner Seite. Das ist nicht verboten, gilt aber als schlechter Stil. Es ist eher üblich, nur eine einzige h1-Überschrift als Überschrift des gesamten Dokuments zu verwenden.

Soll man eine Sprungmarke nicht in ein Element wie h1 geben?

Nein. Du kannst eine Sprungmarke (sprich: eine ID, die als Sprungziel dienen kann) jedem beliebigen Element geben. Also auch Überschriften zweiter oder dritter Ebene.

Kann man so wie classen mehrere ids in eine Zeile packen.

Diese Frage ergibt keinen Sinn. Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen. (Übrigens schreibt mal "Klassen" im Deutschen mit 'K'.)

Was denkt Ihr über Validome?

Keine Ahnung. Sagt mir nichts.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Kann man so wie classen mehrere ids in eine Zeile packen.

Diese Frage ergibt keinen Sinn.

So abwegig finde ich die Frage gar nicht.

Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen.

Während letzteres selbstverständlich ist, ist es ersteres nicht unbedingt. Du hast ja auch mehrere IDs: die Personalausweisnummer, die Sozialversicherungsnummer, die Steuernummer, …

Doch in HTML sind mehrere IDs für ein Element nicht vorgesehen.

LLAP 🖖

[franzsen]

Hi,

Bei der Startseite: „Consider using the h1 element as a top-level heading only“

also frei übersetzt etwa: Man sollte h1 nur einmal als oberste Überschriftenebene benutzen.
Vermutlich verwendest du mehrere h1-Überschriften auf deiner Seite. Das ist nicht verboten, gilt aber als schlechter Stil. Es ist eher üblich, nur eine einzige h1-Überschrift als Überschrift des gesamten Dokuments zu verwenden.

Nach dem Ändern der zweiten Überschrift sind alle Fehlermeldungen weg; also auch die wegen der Sprungmarke. Manchmal sind es wirklich nur Kleinigkeiten.

Kann man so wie classen mehrere ids in eine Zeile packen.

Diese Frage ergibt keinen Sinn. Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen. (Übrigens schreibt mal "Klassen" im Deutschen mit 'K'.)

Nun, da habe ich wahrscheinlich wieder mehr wie ein Amateur formuliert. Ich wußte, daß „id“ mehrfach im Dokument vorkommen kann, aber der Name einer id nur einmal. Nicht klar war mir ob pro Element nur eine id vergeben werden kann. Bei Klassen ist das ja anders (<p class="beispiel Hinweis">).

[Der Martin]

Hallo,

Bei der Startseite: „Consider using the h1 element as a top-level heading only“

also frei übersetzt etwa: Man sollte h1 nur einmal als oberste Überschriftenebene benutzen.
Vermutlich verwendest du mehrere h1-Überschriften auf deiner Seite. Das ist nicht verboten, gilt aber als schlechter Stil. Es ist eher üblich, nur eine einzige h1-Überschrift als Überschrift des gesamten Dokuments zu verwenden.

Nach dem Ändern der zweiten Überschrift sind alle Fehlermeldungen weg; also auch die wegen der Sprungmarke. Manchmal sind es wirklich nur Kleinigkeiten.

zumal das ja gar keine Fehlermeldung war, sondern nur ein Hinweis.

Kann man so wie classen mehrere ids in eine Zeile packen.

Diese Frage ergibt keinen Sinn. Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen. (Übrigens schreibt mal "Klassen" im Deutschen mit 'K'.)

Nun, da habe ich wahrscheinlich wieder mehr wie ein Amateur formuliert. Ich wußte, daß „id“ mehrfach im Dokument vorkommen kann, ...

Klar, theoretisch kann jedes Element eine ID haben. Aber eben nur eine.

aber der Name einer id nur einmal. Nicht klar war mir ob pro Element nur eine id vergeben werden kann. Bei Klassen ist das ja anders (<p class="beispiel Hinweis">).

Ja, der Einwand von Gunnar ist berechtigt; mehrere IDs pro Element wären wohl denkbar, sind aber nicht vorgesehen. Ich war übrigens vor allem deshalb verunsichert, weil ich nicht wusste, was du in diesem Zusammenhang mit "Zeile" meinst. Ich hab mal angenommen, du meintest "Element".

So long,
 Martin

[Matthias Apsel]

Hallo franzsen,

Was denkt Ihr über Validome?

Validome ist ein Validator, der den Vorteil hat, deutschsprachige Meldungen zu liefern aber den Nachteil, dass da seit langer Zeit nichts mehr gemacht wurde. Die letzte Version ist vom 16.11.2010.

Nimm den nu-Validator.

Bis demnächst
Matthias