Innerhalb des Menus die einzelnen Punkte der Datalist mit Seiten verlinken

[Sigi]

Hallo liebe Community. Ich komme momentan mit meiner Seite nicht weiter. Ich möchte innerhalb der Datalist z.Bsp den Punkt Datenschutz auf eine Seite Datenschutz.html verlinken. Nach unendlichen Versuchen farge ich hier mal höflich nach einer Idee. Das Menu sieht so aus:

<div class="menu">
<ul>
<li><a href="landingpage.html" id="start">Startseite</a></li>
<li><a href="bilder.html" id="bilder">Bilder</a></li>
<li><a href="datenschutz.html" id="datenschutz" target="blank">Datenschutz</a></li>
<li><a href="impressum.html" id="impressum">Impressum</a></li>
<li><a href="über-mich.html" id="mich">Über mich</a></li>
<li><a href="#">Suche nach</a>

<form action="#">
<p>
<div class="suche"></div>

<label>
Begriff
<input type="search" list="Suchbegriff"> 

                            
<datalist id="Suchbegriff">

<option value="Startseite"> 

<option value="Mitarbeiter"> 

<option value="Teilnehmer"> 
<option value="Bilder"> 

<option value="Über ProDi"> 

<option value="Datenschutz" input type="datenschutz" id="datenschutz">

<option value="Impressum">

<option value="Über mich"> 

<option value="Formulare"> 


</datalist> 
</label>
<button>finden!</button>
</p>
</form>   
</li>
</ul>
</div>

Ich bin für jeden Vorschlag dankbar. Sigi

[Felix Riesterer]

Liebe(r) Sigi,

ich habe Deinen HTML-Code als solchen ausgezeichnet, damit er besser dargestellt wird. Nun fällt mir aber auf, dass Du Dein Posting mit dem Tag JavaScript versehen hast, aber keinen JavaScript-Code anführst. Wie passt Dein Problem jetzt mit JavaScript oder HTML zusammen?

Ich möchte innerhalb der Datalist z.Bsp den Punkt Datenschutz auf eine Seite Datenschutz.html verlinken.

Du hast eine Datalist. Wozu? Es handelt sich um eine Suchfunktion, zumindest suggeriert das der HTML-Code. Dabei sollen wohl die möglichen Suchbegriffe zum Teil vorgegeben werden können. Da verknüpft man ein Eingabefeld mit einer Datalist. OK. Und wenn nun etwas eingegeben wird, das die Datalist kennt, willst Du einen passenden Link ausspucken?

Das Menu sieht so aus:

Herrjeh, da sind sehr seltsame Sachen darin:

<div class="menu">

Das div möchte gerne ein nav sein.

<li><a href="datenschutz.html" id="datenschutz" target="blank">Datenschutz</a></li>

Warum das target="blank"? Wieso glaubst Du dem Besucher vorschreiben zu dürfen, dass er Deine Datenschutzseite ausschließlich in einem neuen Tag betrachten darf? Lass' das weg!

<li><a href="#">Suche nach</a>
<form action="#">
<p>
<div class="suche"></div>
<label>
Begriff
<input type="search" list="Suchbegriff"> 
<datalist id="Suchbegriff">...</datalist> 
</label>
<button>finden!</button>
</p>
</form>   
</li>

Dieses Monster ist voller Fehler.

1. <p> darf kein <div> als Kindelement enthalten, sondern nur inline-Elemente.
2. Was soll das <div class="suche"></div> überhaupt?
3. Was soll der Link zur Suche und wohin glaubst Du dass er führt?
4. Warum führst Du die Formularinhalte zurück auf die Seite selbst (action="#")?
5. Wo ist Dein JavaScript-Code, für den Du dieses Posting als JavaScript getagged hast?

Liebe Grüße

Felix Riesterer

[Raketenwissenschaftler]

@Felix Riesterer

Womöglich sollte man solche „Schauplätze des Herumprobierens“ nicht überbewerten…

[Sigi]

Hi und danke für die schnelle Antwort. Ja, ich mache noch viele Fehler, Bin erst am Anfang. Ich schick mal ein Bild mit. Das Ding wird benotet. Ich hatte vor die einzelnen Suchbegriffe auf eine andere Seite weiter zu leiten und habe versucht mich da selbständig in Java reinzulesen um dies zu ermöglichen. Das stellt sich aber doch als eine größere Herausforderung dar.

Ich schaffe es nicht das in Java so zu schreiben, das es funktioniert. Grüßle Sigi

[Raketengenauheimer]

"Java" ist nicht "Javascript", weshalb "Javascript" nicht "Java", sondern, genau genommen, "ECMA-Script" heisst.

[Sigi]

Ja. Ich mache noch Fehler. Habe erst im Februar mit der Ausbildung begonnen und jetzt leider durch Corona keine Vor Ort Ausbildung mehr, sondern darf mir alles im Selbststudium beibringen. Ist nicht ganz so einfach. Waren einfach nicht darauf vorbereitet. Ich mache eine Ausbildung zum Fachinformatiker Systemintegration. Sorry für meine ganzen Fehler. Grüßle Sigi Foto senden funktioniert leider nicht.

[Gunnar Bittersmann]

@@Felix Riesterer

<li><a href="#">Suche nach</a>
<form action="#">
<p>
<div class="suche"></div>
<label>
Begriff
<input type="search" list="Suchbegriff"> 
<datalist id="Suchbegriff">...</datalist> 
</label>
<button>finden!</button>
</p>
</form>   
</li>

Dieses Monster ist voller Fehler.

1. <p> darf kein <div> als Kindelement enthalten

Deshalb wird das p-Element auch beim Einlesen des <div>-Tags geschlossen. Das div-Element ist also nicht als Kindelement in dem p-Element enthalten, sondern folgt als Geschwisterelement nach diesem.

Irgendwann kommt dann ein </p>-Tag, das zu keinem offenen p-Element gehört. Da ruft der Validator dann „Fehler!“, nicht vorher.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Raketenwissenschaftler]

Die datalist gehört zu einem input, verlinken geht also nicht.

Alternativen:

1. Javascript. Du wertest den input aus und setzt onchange die location.href neu. Dann wechselt der Browser zu der neuen Seite. Das würde ich im Hinblick auf die Punkte "Impressum" und "Datenschutz" aber nicht tun wollen, es sei denn Du hast viel Geld für Abmahner - oder baust mit <noscript> einen Bereich mit den Links ein. Was unter 2. steht gilt dann trotzdem.

2. Klappmenü mit reinem CSS. Aber auch da würde ich darauf achten, dass "Impressum" und "Datenschutz" auch für einen hinreichend böswilligen Betrachter leicht und unmittelbar erreichbar sind.

[Sigi]

Hi. Danke auch dir für die schnelle Antwort. Das wird keine offizielle Webseite , sondern wird eine Webseite die ich dann benotet bekomme. Da sie nicht veröffentlicht wird, ist das nicht so wild. Grüßle Sigi

[Raketenwissenschaftler]

sondern wird eine Webseite die ich dann benotet bekomme.

Nach welchen Maßstäben denn? Was ich beschrieben habe durchaus Einfluss auf die Note haben.

[Sigi]

Die Vorgaben sind: -Ein individuelles Webseitendesign auf allen Seiten -Mindestens 5 Seiten -Links von jeder Seite auf jede andere Seite -Eine Seite mit mindestens 10 Bildern, die mit Lightbox-Effekt oder ähnlichem dargestellt werden -Verwendung von Flexbox oder einem Framework -Responsives Design -eine Seite mit einem Formular -Formular auslesen und bestätigen (Dafür habe ich die Scufunktion genommen, da das laut Ausbilder dazu zählt

Bin ja erst am Anfang. Da darf ich noch Fehler machen. Learning by doing.

[Felix Riesterer]

Lieber Sigi,

Die Vorgaben sind:

(omg)

-Ein individuelles Webseitendesign auf allen Seiten

Was meint "Design"? Und was soll das "individuell" heißen? Jede Seite anders, oder Aussehen von Dir?

-Mindestens 5 Seiten

Okay, das hat einen Sinn.

-Links von jeder Seite auf jede andere Seite

Also Navi/Menü.

-Eine Seite mit mindestens 10 Bildern, die mit Lightbox-Effekt oder ähnlichem dargestellt werden

Aha. Dieses "oder ähnlichem" klingt nicht gut. Es gäbe da reine CSS-basierte Lösungen.

-Verwendung von Flexbox oder einem Framework

In dieser Formulierung klingt das nach völligem Unsinn. Was hat Flexbox mit Framework zu tun?

-Responsives Design

Das ist eine sinnvolle Forderung. Nur die Umsetzung ist so eine Sache...

-eine Seite mit einem Formular

Schau Dir unsere Tutorials zu Formularen an.

-Formular auslesen und bestätigen (Dafür habe ich die Scufunktion genommen, da das laut Ausbilder dazu zählt

Es gibt eine serverseitige und eine clientseitige Auswertung. Beides benötigt eine Scriptsprache, die sich wesentlich von HTML unterscheidet, da HTML eben keine "Programmiersprache" ist. Du hast nun also die Qual der Wahl zwischen serverseitig (üblicherweise PHP) oder clientseitig (JavaScript).

Bin ja erst am Anfang. Da darf ich noch Fehler machen. Learning by doing.

Auf Fehler muss man hinweisen, wenn sie dem Lernenden nicht offensichtlich sind.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Lieber Sigi,

Du meinst: Liebe:r Sigi.

(Mir geht’s nicht um den Genderdoppelpunkt als solchen, sondern um die unpassende männliche Anrede, wo du gar nicht wissen kannst, ob Sigi männlich, weiblich, divers oder sonstwas ist.)

Die Vorgaben sind:

(omg)

Yep.

Was hat Flexbox mit Framework zu tun?

Frameworks wie Bootstrap verwenden Flexbox fürs Seitenlayout.

Oftmals nicht die beste Technik, CSS Grid ist in vielen Fällen besser geeigenet. Und dann braucht man kein Framework – bzw. natives CSS ist das Framework.

-Responsives Design

Das ist eine sinnvolle Forderung.

Die übrigens eingangs schon gestellt wurde: „Ein individuelles Webseitendesign“.

Webseitendesign und responsive Design ist dasselbe, wie John Allsopp sagt. Recht hat er.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Scharwies]

Servus!

@@Felix Riesterer

Lieber Sigi,

Du meinst: Liebe:r Sigi.

(Mir geht’s nicht um den Genderdoppelpunkt als solchen, sondern um die unpassende männliche Anrede, wo du gar nicht wissen kannst, ob Sigi männlich, weiblich, divers oder sonstwas ist.

Bitte nicht zu kleingeistig werden. Die Wikipedia hat folgendes zu: Sigurd (siehe email-Adresse)

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Gunnar,

Lieber Sigi,

Du meinst: Liebe:r Sigi.

(Mir geht’s nicht um den Genderdoppelpunkt als solchen, sondern um die unpassende männliche Anrede, wo du gar nicht wissen kannst, ob Sigi männlich, weiblich, divers oder sonstwas ist.

wir stellen jedes Jahr 10 Fachinformatiker Systemintegration ein. Bei den Bewerbern ist das Verhältnis m:w etwa 30:1. In meinem Bereich kamen auf ca 20 Azubis eine Frau. Felix hat also beim Raten die Statistik auf seiner Seite.

Als ich noch IT-Sitzungen geleitet habe, war meine Begrüßung immer „Guten Tag meine <suchender Blick> Herren, …“. Leider.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

(Mir geht’s nicht um den Genderdoppelpunkt als solchen, sondern um die unpassende männliche Anrede, wo du gar nicht wissen kannst, ob Sigi männlich, weiblich, divers oder sonstwas ist.

wir stellen jedes Jahr 10 Fachinformatiker Systemintegration ein. Bei den Bewerbern ist das Verhältnis m:w etwa 30:1. In meinem Bereich kamen auf ca 20 Azubis eine Frau. Felix hat also beim Raten die Statistik auf seiner Seite.

Den Status quo in der Sprache festzuzementieren macht das nicht besser. Im Gegenteil.

Auf die Idee, über das ✉️-Symbol zu hovern, muss man aber auch erstmal kommen. Vielleicht kam nicht nur Matthias, sondern auch Felix drauf? Dann will ich nichts gesagt haben.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

Den Status quo in der Sprache festzuzementieren macht das nicht besser. Im Gegenteil.

sieh meine Antwort als Bedauern des Status quo.

Gruß
Jürgen

[Felix Riesterer]

Lieber Gunnar,

Du meinst: Liebe:r Sigi.

nein, ganz sicher nicht.

(Mir geht’s nicht um den Genderdoppelpunkt als solchen, sondern um die unpassende männliche Anrede, wo du gar nicht wissen kannst, ob Sigi männlich, weiblich, divers oder sonstwas ist.)

Ich habe die Mailadresse zum Anlass genommen. Die kann man sehen.

Was hat Flexbox mit Framework zu tun?

Frameworks wie Bootstrap verwenden Flexbox fürs Seitenlayout.

Sind sie für Anfänger empfehlenswert? Meine letzten Informationen waren, dass man dann dafür eine fette Divitis inkauf nehmen muss. Aber ich mag mich irren.

Oftmals nicht die beste Technik, CSS Grid ist in vielen Fällen besser geeigenet. Und dann braucht man kein Framework – bzw. natives CSS ist das Framework.

Aha, siehste.

-Responsives Design

Das ist eine sinnvolle Forderung.

Die übrigens eingangs schon gestellt wurde: „Ein individuelles Webseitendesign“.

Soso. Ich kann das nicht darin lesen.

Webseitendesign und responsive Design ist dasselbe, wie John Allsopp sagt. Recht hat er.

Auch für Anfänger? Dieses hübsche Wörtchen Design wird in so vielen Varianten verstanden... wie auch John Allsopp beweist.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Ich habe die Mailadresse zum Anlass genommen. Die kann man sehen.

Einigen wir uns auf: Die kann man erahnen? 😉

Und das hast du auch nicht gleich. Und als du’s noch nicht hattest, hast du „Liebe(r) Sigi“ geschrieben. Jetzt seh ich’s.

Frameworks wie Bootstrap verwenden Flexbox fürs Seitenlayout.

Sind sie für Anfänger empfehlenswert?

Nein, das sind sie nicht, denn CSS Grid ist einfacher als Bootstrap. Sagen yours truly und Vasilis.

Meine letzten Informationen waren, dass man dann dafür eine fette Divitis inkauf nehmen muss.

Nö, nicht unbedingt. Man kann die Bootstrap-Klassen an schon bestehende Elemente hängen. Look Ma, no div! 🙂

Allerdings ist in der Bootstrap-Dokumentation alles mit div. Anwender werden so ins Verderben geführt.

Webseitendesign und responsive Design ist dasselbe, wie John Allsopp sagt. Recht hat er.

Auch für Anfänger?

Ja, gerade auch für Anfänger. Wenn man von Anfang an berücksichtigt, dass das Web ein flexibles Medium ist, muss man später nicht angelerntes Falsches mühsam korrigieren.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo Gunnar,

Ich habe die Mailadresse zum Anlass genommen. Die kann man sehen.

Einigen wir uns auf: Die kann man erahnen? 😉

die sieht man laut und deutlich, wenn man's ordentlich[tm] macht. Bei mir steht

.author-homepage:after
 { content:attr(href);
   font-family: Sans-Serif;
   padding: 0.25em;
 }
.author-email:after
 { content:attr(href);
   font-family: Sans-Serif;
   padding: 0.25em;
 }

im User-Stylesheet.

Webseitendesign und responsive Design ist dasselbe, wie John Allsopp sagt. Recht hat er.

Auch für Anfänger?

Ja, gerade auch für Anfänger. Wenn man von Anfang an berücksichtigt, dass das Web ein flexibles Medium ist, muss man später nicht angelerntes Falsches mühsam korrigieren.

Das gilt eigentlich für fast alle Lebensbereiche.

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Die Vorgaben sind: -Ein individuelles Webseitendesign auf allen Seiten -Mindestens 5 Seiten -Links von jeder Seite auf jede andere Seite

Schau dir mal diese Layouts an: CSS/fertige_Layouts

Nimm eins, was dir gefällt,

• lad es herunter
• entpacke es
• Ändere die Farben. Dafür musst du ins CSS.

-Eine Seite mit mindestens 10 Bildern, die mit Lightbox-Effekt oder ähnlichem dargestellt werden

Schau Dir das da an:

• HTML/Tutorials/Bilder_im_Internet
• HTML/Tutorials/Lightbox_einbinden

-Verwendung von Flexbox oder einem Framework -Responsives Design

Ist in den Vorlagen oben drin

-eine Seite mit einem Formular -Formular auslesen und bestätigen (Dafür habe ich die Scufunktion genommen, da das laut Ausbilder dazu zählt

Dafür:

• HTML/Tutorials/Formulare
• JavaScript/Tutorials/Formulareingaben_mit_JavaScript_auswerten

Bin ja erst am Anfang. Da darf ich noch Fehler machen. Learning by doing.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Raketenwissenschaftler

2. Klappmenü mit reinem CSS.

Schmeckt nicht. Nicht machen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Sigi]

Hi. Darf ich dich da bitte um ein einfaches Bsp bitten, damit ich das verstehe. Ich sitze da schon stundenlang dran. Grüßle Sigi

[Rolf B]

Hallo Sigi,

so weit ich das beurteilen kann, geht das nicht mit HTML. Das Innenleben einer datalist ist "text-only".

Du kannst das nur mittels JavaScript lösen. Du müsstest Dich auf das change-Event des input Elements registrieren, und wenn es feuert, den value des Elements aus den values der options heraussuchen.

Das Link-Target kannst Du beispielsweise den Optionen über ein data-href Attribut mitgeben.

Du musst aber alle Linkziele der Suchliste auch auf anderem Weg verfügbar machen. datalist ist zwar recht gut unterstützt, aber Uraltbrowser kennen es nicht und die User könnten auch JavaScript abgeschaltet haben.

Eine alternative Lösung - aber auch mit JavaScript - könnte darin bestehen, dass bei Eingaben in das Suchfeld eine Trefferliste aufpoppt, die Du selbst befüllst. Das kann eine einfache Liste von a Elementen sein, und du filterst sie auf Grund der Eingabe im Suchfeld. Ideengeber

Rolf

[MudGuard]

Hi,

datalist ist zwar recht gut unterstützt, aber Uraltbrowser kennen es nicht und die User könnten auch JavaScript abgeschaltet haben.

Wie ist das bei einem Screenreader? Liest der die Werte der DataList vor?

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

keine Ahnung. Ich bin keiner und habe keinen. Aber vom Konzept her würde ich sagen: Ja.

Bei einer selbstgemachten DataList ist's natürlich anders, hier muss man ggf. noch A11Y nachbessern, aber dafür gibt's hier andere Experten.

Rolf