Problem mit Pseudoklasse :focus

[zobi64]

Hallo

Ich habe für meinen ersten Kunden ein Muster gebastelt.
tz-test.ch
Eigentlich läuft alles gut. Beim testen musste ich leider erfahren das die Browser Chrome und Safari die Pseudoklasse :focus nicht unterstützen. Das sind ja relativ weit verbreitete Browser. Mit :hover kann ich nicht arbeiten weil man nicht gleichzeitig über den Link fahren kann und die Seite runterscrollen wenn der Text zu lange ist. Gibt es einen anderen Lösungsweg nur mit CSS oder wäre es besser für jede Filmbeschreibung eine Unterseite zu bauen

[Azra]

:focus wirkt soweit ich weiß nur bei Formularfeldern wie <input> und <textarea>.
Was willst du denn? - den Link der aktiven Seite hervorheben?

[zobi64]

Hallo Azra

Könntest du dir bitte die Muster-Seite anschauen.

tz-test.ch

Ich wollte eigentlich einen Link posten aber ich habe keine Berechtigung.
ich muss wohl die AGB richtig durchlesen.

[Azra]

Könntest du dir bitte die Muster-Seite anschauen.

Habe ich doch und ich sehe kein Element wo du :focus einsetzen müsstest.

Durch ein hohes Spamverhalten von "Marketing"-Benutzern wurde es Neulingen verwehrt Links zu posten. Textform reicht ja auch aus.

[zobi64]

Wahrscheinlich ist das ja grade mein Problem vielleicht hätte ich den Beitrag im Forum für Anfänger posten sollen. Zum erstellen der Seite habe ich eine nur mit CSS erstellte Bildergalerie genommen und sie nach meinen Bedürfnissen zurechtgebastelt. Wenn du mit der Maus auf das Filmprogramm klickst öffnet sich mithilfe der Pseudobefehle :focus und :aktiv ein Fenster das geöffnet bleibt solange man keinen anderen Filmprogrammlink anklickt. Mit Chrome und Safari schliesst sich aber das Fenster sofort wieder wenn ich von der Maustaste gehe. Sorry für die umständlichen Erklärungsversuche. Meine Frage ist nun 1. mache ich etwas falsch 2. Gibt es eine andere Lösung (bitte um ein Lösungsbeispiel) wie ich ein Fenster öffnen kann nur mit CSS oder ist es besser für jede Filmbeschreibung eine Unterseite zu bauen.

[zobi64]

#inhalt a.galerie:focus img
#inhalt a.galerie:focus span
#inhalt a.galerie:active img
#inhalt a.galerie:active span
Diese CSS-Regeln bewirken dass sich beim anklicken mit der Maus ein Fenster innerhalb der index-seite öffnet und geöffnet bleibt.
Wenn ich anstelle von :focus :hover einsetze öffnet sich das Fenster beim drüberfahren mit der Maus. Das ganze ist dann allzu flippig und nervös da sich das Fenster jedesmal ändert wenn ich mit der Maus über das Filmprogramm fahre.

[Azra]

Also.
Über das Fehlverhalten kann ich nichts sagen, die Frage ist nun was du vor hast.
Wie viele Links werden in Zukunft dargestellt um den Content einzublenden? - wenn das in Zukunft 20-30 einzelne Texte mit Bildern und vielleicht sogar Vorschaufilmchen sind ist diese Methode sehr schlecht da alles auf Einmal geladen wird und so immense Ladezeiten entstehen können.

Wenn du unbedingt möchtest dass die Seite sich nicht neu lädt musst du auf PHP oder JavaScript (jQuery) umstellen.
Mit PHP könntest du per switch/case zwischen einzelnen HTML-Seiten schalten worin nur Inhalt steht (ohne HTML Grundgerüst). Das selbe kann JavaScript mit der jQuery-Funktion .load.

Somit wird die Seite einmal schnell geladen und der Inhalt ebenfalls. Wie du merkst ist es mit CSS höchst unpraktisch wodurch man bei Suchmaschinen auch nicht viel findet.

[zobi64]

Hallo Astra

Es sind etwa 20 Links mit Filmbeschreibungen und höchstens ein Bild dazu. Da ich keine Ahnung habe von PHP und Javascript bleibt mir wohl für den Moment nichts anderes übrig als 20 Unterseiten zu bauen. Ist ja auch am übersichtlichsten und gut ausbaubar Die Ladezeit der Seiten ist ja mit sowenig Inhalt auch nicht so schlimm.

Vielen herzlichen Dank für die rasche Antwort
Gruss zobi64

[Azra]

Es wird das Beste sein und tut auch der Suchmaschinenoptimierung gut.
Mich würde interessieren was du für die Stunde Arbeit nimmst da du mit Mediengestaltung nur wenig zu tun hast

[djheke]

Hallo,
du brauchst doch deine Links nur etwas erweitern.

Code: Alles auswählen

<a class="fotoa galerie" href="#nogo"  onclick="this.focus()">

dann klappts auch im Chrome und Safari

[Azra]

Code: Alles auswählen

<a class="fotoa galerie" href="#nogo"  onclick="this.focus()">

Ja, OK. An inline JavaScript hatte ich jetzt nicht gedacht. Trotzdem ist es eher schlecht als recht, außer man muss an Einzelseiten sparen weil vertraglich eine geringe Anzahl festgelegt wurde

[djheke]

Auch mit den inline JS bekommt er Schwierigkeiten. Naja sollte er alleine lösen.
Wer Geld verlangt, sollte zumindestens die Grundlagen in HTML,CSS,JS und PHP können. Oder ?

[Azra]

Mit inline JS meinte ich onclick, aber hast scho recht ist ein HTML Attribut - ich wollte jetzt nicht kompliziert machen
Und ja, ich hoffe der Kunde weiß worauf er sich einlässt.