JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="tk1234, post: 14951, member: 4335"] Wie schon mehrfach geschrieben: zu erraten wie der HTML- und CSS-Code aussieht ist nicht zielführend und eine pauschale Lösung gibt es nicht. Besser noch wäre gewesen ein JSfiddle o.ä. zu erstellen und zu verlinken. Als erstes solltest du dein HTML aufräumen: [LIST] [*]du kannst nicht einfach neue Elemente erfinden bzw. musst dich dabei an [URL='https://wiki.selfhtml.org/wiki/Web_Components/custom_elements']gewisse Regeln halten[/URL] (u.a. müssen die Elemente einen Bindestrich enthalten). Das von dir verwendete gattung, art und ix ist nicht zulässig [*] Tabellen sind nur für tabellarische Daten gedacht, deine Tabelle unterhalb von h2 möchte gerne eine [URL='https://wiki.selfhtml.org/wiki/HTML/Tutorials/Listen/Beschreibungslisten']Beschreibungsliste[/URL] sein [*]du leidest unter akuter Divitis: viele Divs sind falsch oder überflüssig. div#menu wäre gerne ein <nav> (oder <menu>), den Inhalt würde ich nicht in ein fieldset stecken sondern in ein ul bzw. li-Elemente; div#content ist ganz falsch: div hat kein name-Attribut und das div wäre ohnehin gerne ein <main>; die div.text sind überflüssig, das .text kann auch dem jeweiligen Kindelementen verpasst werden; für die div.(fe)male würde ich auch eher ein <section> nehmen [*]Die Seite ist unbedienbar: die Radiobuttons im Menü haben keine Beschriftung - da fehlen zwingend erforderliche label-Elemente (die dann auch gleich den Vorteil haben dass man auch die Beschriftung anklicken kann, nicht zwingend die radio-Buttons treffen muss); zudem sind nicht interaktive Elemente (also alle außer input, button und a) per Tastaturbedienung nicht erreichbar und dürfen auch nicht per Javascript auf Klicks reagieren - dein ix ist per Tastaturbedienung nicht erreichbar (ja, das a blubbert vermutlich durch, trotzdem); die a-Elemente die auf das Menü verweisen haben keine Beschriftung, ich glaube nicht dass Screenreader hier etwas sinnvolles vorlesen (außerdem enthalten die Elemente ein ' zu viel) [*]style-Attribut haben nur in den seltensten Fällen etwas im Quelltext zu suchen, wirf alle raus und formatiere die Elemente über die CSS-Datei (nutze dabei Nachfolgeselektoren, nicht jedes Element braucht eine Klasse [*]die Bilder würde ich alle in ein figure-Element stecken, ist aber nicht unbedingt notwendig - beachte aber dass figure-Elemente standardmäßig margin haben und zwar mehr als du in deinem CSS zurücksetzt [*]column-count im CSS ist immer noch falsch und auch Breitenangaben usw. sind noch reichlich in Pixelangaben zu finden [/LIST] Mit dem sauberen Code lässt sich dann viel besser arbeiten. Mit dem align-items warst du schon nicht ganz falsch unterwegs - die Eigenschaft ist allerdings für flex- und grid-Layouts gedacht. Ich würde dir auch dazu raten und z.B. ein [URL='https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries#Responsives_Grid']Grid-Layout[/URL] für die Bilder verwenden. Ansonsten würde schon ein vertical-align:top; für die Bilder reichen - wobei ich jetzt nicht ausprobiert haben was dann in der zweiten Zeile passiert. Noch ein paar Hinweise zum Code: [LIST] [*]setze per JS nie CSS-Eigenschaften, setze oder entferne immer nur Klassen. Deine Funktion female_ausblenden würde sich auf eine Zeile verkürzen lassen wenn du für div#content (bzw. <main>, s.o.) einfach nur eine Klasse setzt ([URL='https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList']classList[/URL] hilft dabei) und .female dann über ».femaleweg .female {display:none;}« ausblendest. Zum Einblenden dann einfach die Klasse wieder entfernen und fertig - die sehr umständlichen Schleifen ([URL='https://wiki.selfhtml.org/wiki/JavaScript/DOM/ParentNode/querySelectorAll']querySelectorAll[/URL] und [URL='https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Array/forEach']forEach[/URL] existieren) können dann vollständig entfernen [*]Variablen solltest du nicht mit var definieren sondern mit [URL='https://wiki.selfhtml.org/wiki/JavaScript/Variable/let']let[/URL] bzw. ggf. const. Auch dein i in den Funktionen muss mit let definiert werden, so ist dein i global und es besteht theoretisch die Gefahr von unerwünschten Nebenwirkungen (hier nicht da i bei jedem for gesetzt wird, kann aber zukünftig doch noch mal passieren) [*]Dass der Button zum Ausblenden des Menüs ein title-Attribut hat mit einem Hinweis wie man das wieder eingeblendet bekommt, habe ich erst im Quelltext gesehen. title-Attribute sind für solche Informationen der falsche Ort, die wird kein Benutzer sehen - von Bedienung per Touchscreen mal ganz zu schweigen … [*]die Links auf #menu stehen außerhalb von div.male bzw. div.female und werden damit beim Filtern nicht mit ausgeblendet [/LIST] Ich weiß, das ist jetzt viel Input, aber auf Dauer kannst du dir die Arbeit deutlich erleichtern wenn du mit sauberem Code arbeitest. [/QUOTE]

Authentifizierung