Aufklappbare Elemente per Html/CSS/Java?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hallo, ich bin neu hier. Meine Kenntnisse sind über 20 Jahre alt, aber jetzt versuche ich mich mal wieder an einer HP, die ich für meine lieben Kollegen erstelle. Leider arbeite ich sehr eingeschränkt und deshalb helfen viele Google-Beiträge nicht mehr.
Meine Kenntnisse sind Bescheiden, CSS erlerne ich gerade. Java kann ich nicht, würde es aber verwenden und es funktioniert glaube ich auch. PHP scheint hier nicht zu funktionieren (?).
Trotzdem ist meine HP sehr übersichtlich gestaltet und vom Code her anständig geschrieben und alles ordentlich in Ordnern verstaut. Ich möchte also keine riesigen Codes reinkopieren, die ich gar nicht verstehe.
Zu meiner HP:
-sie liegt lokal, wird also nicht hochgeladen
-sie wird nur mit dem IE11 angezeigt
-ich kann keine Zusatzprogramme installieren, arbeite also rein mit dem Editor
Jetzt zu meinen Problemen:
1.
favicon wird nicht angezeigt. Ich habe die Vermutung, dass es bei lokalen Geschichten generell nicht geht. Oder weiß jemand eine Lösung?
Hier mein Code:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
Das Bild liegt mit Format .ico im Hauptordner.
2.
Ich habe eine Tabelle gestaltet mit mehreren Kästchen. Jedes Kästchen soll man anklicken können. Unten gibt es eine Zeile/Zelle/Ausgabefeld, in dem weitere Info dazu angezeigt werden soll. iframes scheint ja veraltet zu sein und funktioniert auch nur mehreren Dateien. Summary/Details scheint im IE nicht zu funktionieren. Bei den Javascripten habe ich einiges ausprobiert, aber meistens klappt nur ein Element zum ausklappen.
Hat jemand eine Idee? Braucht ihr noch weitere Infos? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Zu 1: Könnte auch am Brauser liegen, bei mir geht es lokal bei einem (Opera Presto), ein anderer zeigt wohl gar keine Ikonen an (SeaMonkey).
Der Wert des Attributes rel stimmt wohl mit dem überein, was bei HTML5 zu finden ist.
Früher hat man da wohl auch noch 'shortcut icon' spendiert, ich meine, der erstere Teil hatte etwas mit Problemen des MSIE zu tun, hat sonst keinerlei Bedeutung.
Zu 2: In CSS gibt es die Pseudo-Klasse :target, mit welcher man die Dekoration eines Verweisziels oder von Nachfahren davon ändern kann, also auch Anzeige oder nicht:
https://www.w3.org/TR/selectors-3/#target-pseudo
Innerhalb von Formularen kann eventuell auch noch :checked hilfreich für interaktive Effekte sein.
Hilfreich könnte gelegentlich für den Zweck ebenfalls der Geschwisterselektor + oder auch ~ sein:
https://www.w3.org/TR/selectors-3/#sibling-combinators
Damit lassen sich folglich Eigenschaften von folgenden Geschwistern ändern.
Prinzipiell geht natürlich auch :hover, Funktion hängt aber eben stark an der Position des Zeigergerätes, kann brauchbar sein um etwa Kindelemente oder Pseudoelemente (etwa zur Einblendung von Attributwerten) einzublenden.
Ansonsten:
PHP ist hier verfügbar.
Wenn ein (X)HTML nur im MSIE angezeigt wird, ist damit etwas faul.
-
Ansonsten:
PHP ist hier verfügbar.
Wenn ein (X)HTML nur im MSIE angezeigt wird, ist damit etwas faul.
Hier auf der Arbeit müssen alle den IE nutzen, wir haben nichts anderes installiert. Also wird jeder Kollege die HP auch damit aufrufen. So meinte ich das
.
hover ist glaube ich die einfachste Lösung. Das kann ich immerhin. Vielen Dank für den Tipp!
Und ja, es soll alles in einem Formular bleiben.
Die beiden Links muss ich glaube ich noch genauer studieren. Ist ja auch noch alles englisch, uff.
Kann man hier auch nach Beispielen für die pseudo-klasse? fragen? Oder ist meine Anfrage dann zu allgemein?
-
Nein, Fragen geht doch allemal, siehe etwa hier:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target
Auf dieser Seite verwende ich :target etwa für Verweise zu Literaturangaben, entsprechend wird gegebenenfalls auch ein Rückverweis zur Textstelle eingeblendet:
http://hoffmann.bplaced.net/epub/
Bei :hover gibt es (mindestens) zwei unschöne Probleme für die Anwendung.
a) Gibt heute Geräte ohne Maus, da wird herumgefingert, etwa auf dem Mobiltelephon, da ist es nicht so einfach, :hover zu simulieren
b) Der zusätzlich eingeblendete Kram muß räumlich am herübergefahrenen hängen, geht der Kontakt zum Zeigergerät verloren, gilt der Selektor nicht mehr, der eingeblendete Kram verschwindet also wieder - oder sofern etwa woanders eingeblendet wird, ist dieser Bereich nicht per Maus erreichbar, wenn es keinen Überlapp gibt.
Bei einer Selektion per :target gilt dies hingegen, bis etwas anderes ausgwählt wird, egal, was das Publikum sonst auf der Seite anstellt. -
Ok, ich habe jetzt einiges probiert, einiges nicht hinbekommen, anderes schon, aber das sah nicht schön aus.
Die Seite wird nur mit Desktoprechnern aufgerufen, also muss ich keine Touch-Screens o.ä. berücksichtigen.
Im Moment sieht es so aus:
<style> td { border: solid 1px ; width: 20% ; height: 60px ; } span.popup span { display: none ; } span.popup:hover span { display: block ; background-color: #89a ; } </style> [...] <td><span class="popup">Bankverbindung<span>per Post</span></span></td> [...]
Das ist von der Funktion her auch ok. Schade ist, dass man jetzt mit der Maus über die Schrift gehen muss. Weiß jemand eine Lösung, wo das Popup auch aufklappt, wenn man wenn über die Zelle mit mouseover fährt?
Beitrag zuletzt geändert: 2.12.2019 9:05:04 von marco26389 -
mouseover und :hover sind ja lediglich Begrifflichkeiten aus zwei verschiedenen Bereichen. Einmal abgesehen von feinen, formalen Unterschieden beschreiben sie sehr ähnliche Effekte.
Wenn wir mal bei :hover bleiben, so wäre dies auf ein Zellenelement anzuwenden, wenn beim Drüberfahren über die Zelle etwas passieren soll, nicht nur beim Drüberfahren von irgendwelchem Inhalt in der Zelle.
Also etwas wie:
td span.popup span {display: none}
td: hover span.popup span {display: block} -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage