Navigation mit Pfeil

[franzsen]

Mit ::befor bzw. ::after content"" kann etwas eingefügt werden. Mich würde interessieren ob man das mit :hover anwenden kann? Ich meine damit, daß, wenn man mit der Maus über einen link fährt, soll am Ende beispielsweise ein Pfeil erscheinen. Der Nutzer sieht also über welchen link er gerade steht. Das so etwas möglich ist glaube ich schon gesehen zu haben. Geht das auch mit CSS oder nur mit java?

[Felix Riesterer]

Liebe(r) franzsen,

Mit ::befor bzw. ::after content""

diese Pseudoklassen kann man mit :hover verknüpfen:

a:hover:before {
    content: "→";
}

Liebe Grüße,

Felix Riesterer.

[franzsen]

Liebe(r) franzsen,

Mit ::befor bzw. ::after content""

diese Pseudoklassen kann man mit :hover verknüpfen:

a:hover:before {
    content: "→";
}

Liebe Grüße,

Felix Riesigerer.

Ah!!! Ja!
Warum verdecken die Bäume immer den ganzen Wald?

In manchen Fällen habe ich schon gesehen, daß der Inhalt auch leer bleibt:
content: "";
Was bezweckt man damit wenn nichts angehängt werden soll?

[Jörg Reinholz]

Moin!

In manchen Fällen habe ich schon gesehen, daß der Inhalt auch leer bleibt:
content: "";
Was bezweckt man damit wenn nichts angehängt werden soll?

Vielleicht, dass man was entfernen will. Vielleicht hat es jemand einfach stehen lassen, den Inhalt herausgenommen und sich gedacht: Dann brauche es (content: "") nicht tippen, wenn wieder was hinein soll. Vielleicht war es in einer Vorlage und der Webdesigner wusste damit nichts anzufangen ...

Jörg Reinholz

[MrMurphy1]

Hallo

Da werden aber noch ein paar andere CSS-Anweisungen stehen.

So können zum Beispiel grafische Effekte erzielt werden, für die der HTML-Quelltext nicht mißbraucht werden sollte.

Gruss

MrMurphy

[marctrix]

Hej franzsen,

In manchen Fällen habe ich schon gesehen, daß der Inhalt auch leer bleibt:
content: "";
Was bezweckt man damit wenn nichts angehängt werden soll?

Man benötigt das, damit man das Element gestalten kann. Heute hatten wir schon mal ein Beispiel für ein aus Rahmen zusammengesetztes Dreieck. Das hat keinen Inhalt. Die Content-Eigenschaft muss aber trotzdem angegeben werden, sonst wird das Element auch nicht gerendert (oder geht das in modernen Browsern, mache das seit eh und je so, dann wäre es nett, wenn mir das mal jemand sagt, damit ich damit aufhören kann)...

Marc

[Matthias Apsel]

Hallo marctrix,

Die Content-Eigenschaft muss aber trotzdem angegeben werden, sonst wird das Element auch nicht gerendert

Das ist korrekt:

CSS2.1

none

The pseudo-element is not generated.

normal

Initial, computes to 'none' for the :before and :after pseudo-elements.

CSS3

normal

Initial, for '::before', '::after', and '::line-marker' this computes to 'inhibit'.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@marctrix

In manchen Fällen habe ich schon gesehen, daß der Inhalt auch leer bleibt:
content: "";
Was bezweckt man damit wenn nichts angehängt werden soll?

Man benötigt das, damit man das Element gestalten kann. […] Die Content-Eigenschaft muss aber trotzdem angegeben werden, sonst wird das Element auch nicht gerendert (oder geht das in modernen Browsern, mache das seit eh und je so, dann wäre es nett, wenn mir das mal jemand sagt, damit ich damit aufhören kann)...

“For a '::before' or '::after' pseudo-element to be generated, all of the elements and pseudo-elements leading to it must be generated, and the pseudo-element must not have its 'content' property set to 'inhibit' or its 'display' property set to 'none'. Note that for '::before' and '::after' pseudo-elements, the initial value of 'content' computes to 'inhibit'.” [CSS3 Generated and Replaced Content Module] (Hervorhebung von mir)

Oh, der letzte Working Draft ist vom 14. Mai 2003 …

Dann gibt’s da einen Editor’s Draft, “Not Ready For Implementation”. Aber auch der besagt:

“content

[…] Initial: normal […]

normal

[…] For ::before and ::after, this computes to inhibit. […]

inhibit

[…] On pseudo-elements, this inhibits the creation of the pseudo-element, as if display computed to none.” (Hervorhebung von mir)

Damit ein Pseudoelement angezeigt wird, muss man dessen content-Eigenschaft auf einen von normal, none und inhibit verschiedenen Wert setzten. Also bspw. auf "".

LLAP 🖖

[franzsen]

Hej franzsen,

In manchen Fällen habe ich schon gesehen, daß der Inhalt auch leer bleibt:
content: "";
Was bezweckt man damit wenn nichts angehängt werden soll?

Man benötigt das, damit man das Element gestalten kann. Heute hatten wir schon mal ein Beispiel für ein aus Rahmen zusammengesetztes Dreieck. Das hat keinen Inhalt. Die Content-Eigenschaft muss aber trotzdem angegeben werden, sonst wird das Element auch nicht gerendert (oder geht das in modernen Browsern, mache das seit eh und je so, dann wäre es nett, wenn mir das mal jemand sagt, damit ich damit aufhören kann)...

<!doctype html>
<html lang="de">

<head>
	<meta charset="utf-8" />
	<title>Transition</title>

<style>
body {
	padding: 0;
	margin: 0;
	}
ul {
	width: 100%;
	background: black;
	margin: 0;
	padding: 0;
	text-align: center;
	}
ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
	}
ul li a {
	position: relative;
	display: block;
	padding: 25px 25px 25px 25px;
	color: white;
	text-decoration: none;
	z-index: 1;
	}
ul li a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background-color: #3bb631;
	transition: all 250ms;
	z-index: -1;
	}
ul li a:hover::before {
	height: 100%;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="#home">Home</a></li>
		<li><a href="#home">Abenteuer</a></li>
		<li><a href="#home">Kontakt</a></li>
		<li><a href="#home">About</a></li>
	</ul>
</body>
</html>

Hier habe ich ein Beispiel. "Content" bleibt leer. Wozu?

Weites stelle ich fest, daß sowohl der Inhalt von Content, sofern ich etwas einfüge, oberhalb des Textes steht. Auch ein Rahmen wird nur oben angefügt. Eigentlich müßte alles links von "li a" erscheinen?

Li wird in diesem Beispiel als "inline-block" dargestellt. Das heißt, die Listenelemente werden waagrecht dargestellt aber bekommen die Eigenschaft eines Blockes? Der Inhalt (a href..) bleibt ein Inline-Element bis "display: block"?

Durch Einfügen bz. Ändern von Werten ist mir das aufgefallen.

Wenn man mit Flex-Boxen arbeitet, soll man wie schreiben:

body {
  display: flex; <!--items = header u. div-->
  }

<body>
  <header>
    <nav>
     <ul>
       <...>
     </ul>
    </nav>
  </header>

  <div>
  </div>

</body>

oder

body { <!--items = nav. div-->
  display: flex;
  }

<body>
    <nav>
     <ul>
       <...>
     </ul>
    </nav>

  <div>
  </div>

</body>

Soll man in diesem Fall die vielen Verschachtelungen vermeiden oder soll man die Deklaration nav, header, footer, ... konsequent anwenden?
Soll man die Liste normal formatieren oder ebenfalls als Flexbox gestalten?

[MrMurphy1]

Hallo

Zum leeren Content

Hier habe ich ein Beispiel. "Content" bleibt leer. Wozu?

Als Platzhalter für die Hintergrundfarbe, die beim Hovern von oben eingefügt wird. Dafür muss das Element nur erzeugt werden, benötigt aber keinen Inhalt.

Weites stelle ich fest, daß sowohl der Inhalt von Content, sofern ich etwas einfüge, oberhalb des Textes steht. Auch ein Rahmen wird nur oben angefügt. Eigentlich müßte alles links von "li a" erscheinen?

Durch das position:absolute mit den Angaben top:0 und left:0 erscheint alles oben links innerhalb des nächsten umgebenden Elements mit position:relative. Genauer: Innerhalb des nächsten umgebenden Elements mit einer position ungleich static.

Li wird in diesem Beispiel als "inline-block" dargestellt. Das heißt, die Listenelemente werden waagrecht dargestellt

Ja

aber bekommen die Eigenschaft eines Blockes?

Nur teilweise.

Der Inhalt (a href..) bleibt ein Inline-Element bis "display: block"?

Ja

Wobei mit HTML5 wohl die Begriffe inline- und block-Elemente abgeschafft wurde. Da bin ich mir aber nicht ganz sicher.

Gruss

MrMurphy

[MrMurphy1]

Hallo

Zu Flexbox

Wenn man mit Flex-Boxen arbeitet, soll man wie schreiben:

Das kommt auf den Inhalt der Seite an. Für bestimmte Informationen sind bestimmte Container vorgesehen. Eine bestimmte Verschachtelung ist hingegen nur in einigen Ausnahmefällen vorgesehen.

Soll man in diesem Fall die vielen Verschachtelungen vermeiden oder soll man die Deklaration nav, header, footer, ... konsequent anwenden?

Eine konsequente Anwendung der Container ist deshalb falsch. Es kommt halt auf den Inhalt der Seite an.

Soll man die Liste normal formatieren oder ebenfalls als Flexbox gestalten?

Erst mal: nav muss sich weder innerhalb eines headers befinden noch muss es eine Liste beinhalten. Nach den aktuellen Regeln von HTML5 sind Listen für eine normale Navigation innerhalb eines nav sogar falsch. Außerdem erfordern sie überflüssige Layout-Angaben.

Grundsätzlich ist es sinnvoll flex durchgehend für das Layout anzuwenden. Außer es gibt sinnvollere Lösungen. Für den Inhalt von nav ist flex aber in der Regel sinnvoll.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Wenn man mit Flex-Boxen arbeitet, soll man wie schreiben:

Das kommt auf den Inhalt der Seite an. Für bestimmte Informationen sind bestimmte Container vorgesehen. Eine bestimmte Verschachtelung ist hingegen nur in einigen Ausnahmefällen vorgesehen.

Zu beachten ist aber, das Flexbox nur deren Kindelemente positioniert, nicht Enkel usw.

Erst mal: nav muss sich weder innerhalb eines headers befinden noch muss es eine Liste beinhalten.

So weit richtig.

Nach den aktuellen Regeln von HTML5 sind Listen für eine normale Navigation innerhalb eines nav sogar falsch.

?? Wie meinen? Und warum sind die Beispiele in der Spec dann mit Listen?

Außerdem erfordern sie überflüssige Layout-Angaben.

Erfordern oder ermöglichen; das liegt im Auge des Entwicklers.

LLAP 🖖

[Gunnar Bittersmann]

@@franzsen

Hier habe ich ein Beispiel. "Content" bleibt leer. Wozu?

Das hatte ich doch schon beantwortet:

Der Ausgangswert der content-Eigenschaft ist "normal". Für ::before- und ::after-Pseudoelemente ergibt das einen berechneten Wert "inhibit", der bedeutet, dass das Pseudoelement nicht gerendert wird. Damit es also überhaupt zu sehen ist, muss content auf einen anderen Wert gesetzt werden.

Wenn man mit Flex-Boxen arbeitet, soll man wie schreiben:

body {
  display: flex; <!--items = header u. div-->
  }

Na so nicht. HTML-Kommentare haben in CSS-Code nichts zu suchen. (Der Inhalt des style-Elements muss CSS-Code sein.)

CSS-Kommentare beginnen mit /* und enden mit */.

Und wie MrMurphy1 schon sagte, muss nav nicht innerhalb von header stehen. (Kann aber.)

LLAP 🖖

[franzsen]

Wenn man mit Flex-Boxen arbeitet, soll man wie schreiben:

body {
  display: flex; <!--items = header u. div-->
  }

Na so nicht. HTML-Kommentare haben in CSS-Code nichts zu suchen. (Der Inhalt des style-Elements muss CSS-Code sein.)

CSS-Kommentare beginnen mit /* und enden mit */.

Kommentare werden üblicherweise von mir oberhalb geschrieben bzw. als Abschnitte zusammengefaßt. Hier habe ich es nur als Erklärung eingefügt.

/*****Navigator****/
nav ul {  
    ...  
    }  
/******Inhalt*******/  
   etc.  

[Felix Riesterer]

Lieber franzsen,

Kommentare werden üblicherweise von mir oberhalb geschrieben bzw. als Abschnitte zusammengefaßt. Hier habe ich es nur als Erklärung eingefügt.

das darfst Du auch weiterhin so handhaben. Aber in CSS sind HTML-Kommentare schlicht ein Syntaxfehler!

/*****Navigator****/
nav ul {  
    ...  
    }  
/******Inhalt*******/  
   etc.  

Und was spricht gegen dieses Beispiel?

/*****Navigator****/
nav ul {
    color: #ff8844; /* Textfarbe orange */
    border: 1px solid #44ff88; /* Rahmenfarbe grün */
}

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Servus!

Mit ::befor bzw. ::after content"" kann etwas eingefügt werden. Mich würde interessieren ob man das mit :hover anwenden kann?

Schau dir mal das Design-Beispiel 8 bei den CSS-Templates an. Da ist sowas verwirklicht.

Unter Besonderheiten werden die mit Pseudoelementen erzeugten Dreiecke erklärt.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Unter Besonderheiten werden die mit Pseudoelementen erzeugten Dreiecke erklärt.

Und dort werden auch die mit Border erzeugten Streifen erklärt – was man nicht nachmachen sollte, liebe Kinder!

Dafür gibt es linear-gradient. Es ja niemand was dagegen, wenn ich das Beispiel abändere?

Und noch etwas wäre abzuändern …

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Und dort werden auch die mit Border erzeugten Streifen erklärt – was man nicht nachmachen sollte, liebe Kinder!

Dafür gibt es linear-gradient. Es ja niemand was dagegen, wenn ich das Beispiel abändere?

@@Gunnar Bittersmann

Eine Wikimitarbeit, gerade von Dir, ist jederzeit willkommen.

btw: Die Design-Vorlagen waren mein Einstieg in SelfHTMl, nachdem sich die Könner & Cracks bei der Umarbeitung vornehm zurückgehalten haben. Als ich Matthias Apsel fragte, wo diese Vorlagen denn mal später hochgeladen werden sollten, wies er auf das Wiki hin, was mir bis dahin völlig entgangen war.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Dafür gibt es linear-gradient. Es ja niemand was dagegen, wenn ich das Beispiel abändere?

@@Gunnar Bittersmann

Eine Wikimitarbeit, gerade von Dir, ist jederzeit willkommen.

+1

Wenn @Gunnar Bittersmann die Beschreibung und den sichtbaren Code verbessert hat,

• müssen auch die Wiki-Beispiele selbst verändert werden
• das Template zum herunterladen angepasst werden
• die Prüfsumme neu berechnet werden <i>

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Gunnar,

Und noch etwas wäre abzuändern …

Du alte Meckerhexe! Könntest ja mal darauf reagieren, dass das schon abgeändert worden ist!

Liebe Grüße,

Felix Riesterer.

[marctrix]

Hej Leute,

Schau dir mal das Design-Beispiel 8 bei den CSS-Templates an. Da ist sowas verwirklicht.

Unter Besonderheiten werden die mit Pseudoelementen erzeugten Dreiecke erklärt.

Um mal zu erwähnen, dass nicht nur Dreiecke mit CSS zu erschaffen sind (nicht unbedingt sinnvoll für den Produktiv-Einsatz, zumal diese Zeichensätze nur wenige Zeichen beinhalten):

http://nicolasgallagher.com/pure-css-gui-icons/

http://saeedalipoor.github.io/icono/

Gruß,

Marc

[Matthias Apsel]

Hallo marctrix,

Um mal zu erwähnen, dass nicht nur Dreiecke mit CSS zu erschaffen sind (nicht unbedingt sinnvoll für den Produktiv-Einsatz, zumal diese Zeichensätze nur wenige Zeichen beinhalten):

u.A. auch wegen der Rechenlast? Akku an mobiles?

Ich ergänze noch: https://forum.selfhtml.org/self/2014/jun/24/die-simpsons-in-css/1614444#m1614444

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Um mal zu erwähnen, dass nicht nur Dreiecke mit CSS zu erschaffen sind (nicht unbedingt sinnvoll für den Produktiv-Einsatz, zumal diese Zeichensätze nur wenige Zeichen beinhalten):

u.A. auch wegen der Rechenlast? Akku an mobiles?

Ich ergänze noch: https://forum.selfhtml.org/self/2014/jun/24/die-simpsons-in-css/1614444#m1614444

Sehr nett! Würde mich freuen, wenn hier mehr so was in diesen Thread gepostet wird! - Ich mache dann gerne einen kleinen Beitrag für das Blog draus!

CSS Kuriosa oder so ähnlich. Kann ja mal ruhig was unterhaltsames sein!

Vielleicht auch mal Eric Meyers ollen Slanty Claus aus der Versenkung holen... - passt ja gerade so schön

Marc

[Tabellenkalk]

Hallo,

Ich mache dann gerne einen kleinen Beitrag für das Blog draus!

CSS Kuriosa oder so ähnlich. Kann ja mal ruhig was unterhaltsames sein!

im historischen Abriss könntest du den csszengarden unterbringen, ich hatte letztens den Eindruck, meine Anspielung darauf war nicht von allen verstanden worden.

Gruß
Kalk

[Gunnar Bittersmann]

@@marctrix

CSS Kuriosa oder so ähnlich. Kann ja mal ruhig was unterhaltsames sein!

Ich erinnere mich da, mal eine mit CSS gebaute Dampflok gesehen zu haben (viele HTML-Elemente).

Und an meine Flaggen (angefangen von simplen 🇩🇪 und 🇮🇹 bis hin zu 🇬🇧, 🇺🇸 und 🇰🇷) mit einem einzigen HTML-Element, gestylt nur mit Gradienten (linear, radial, conic). Die wollte ich auch noch in Artikelform bringen … Baustellen, ihr kennt das.

LLAP 🖖