Text ein-/ausblenden
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anregung
arbeit
ausblenden
besucher
blocken
code
display
experimentieren
gefunden url
http
inhalt
lager
paar
parameter
technik
text
ungeordnete liste
url
vorhaben
wissen
-
Hallo
Ich möchte auf Klick einen Text ein- bzw. ausblenden, habe für mein Vorhaben aber nur etwas in Javascript gefunden (Text einblenden / ausblenden beim klick auf Link). Da ja nicht alle meine Besucher Java-Script aktiviert haben,möchte ich wissen,ob es eine andere Lösung gibt - evtl. CSS?. Nur eben NICHT Java-Script.
MfG
Medizinfrau -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
medizinfrau schrieb:
Hallo
Ich möchte auf Klick einen Text ein- bzw. ausblenden, habe für mein Vorhaben aber nur etwas in Javascript gefunden (Text einblenden / ausblenden beim klick auf Link). Da ja nicht alle meine Besucher Java-Script aktiviert haben,möchte ich wissen,ob es eine andere Lösung gibt - evtl. CSS?. Nur eben NICHT Java-Script.
MfG
Medizinfrau
Soweit ich weiß, geht sowas leider nur mit JavaScript -
hallo
entschuldige, wenn ich dir nur einen link hinwerfe, bin auf arbeit ...
*rums* - http://www.css-technik.de/2003/02/03/infobox-mit-css/
keine testerfahrung! -
Vieleicht hilft das ja: [url]ttp://www.css4you.de/visibility.html[/url]
Oder sonst mittels PHP und if-Abfrage für GET-Parameter.
Gruß
Tim -
Wenn du willst, dass der Text bei einem hover erscheint ist es sehr einfach.
Wenn es dir um einen Klick geht wird es etwas schwieriger, aber nicht unmöglich. Aber du musst dann leider auf den IE 6 scheißen (glaub ich).
Ein paar Anregungen:
Du hast eine ungeordnete Liste:
<ul>
<li>Infobox öffnen
<ul>
<li>
Inhalt der Infobox
</li>
</ul>
</li>
</ul>
Wenn du nun sagst:
ul > li > ul { display: none };
sieht man den inhalt der infobox erstmal net.
bei ul > li:active > ul { display: block }; wird die box dann angezeigt, aber nur solange du klickst, aber danach nicht.
Dacher musst du noch ein ul > li > ul:hover {display:block;} hinzufügen, damit es beim hovern weiterhin offen bleibt.
Blöderweise hoverst du das untere li ja net wenn du auf das obere klickst. Also musst du das untergeordnete über das übergeordnete lagern:
ul > li:active > ul { display: block; margin-left: 0; margin-top: -20px; }
Dann sieht der Code insgesammt so aus:
ul > li > ul { display: none; }
ul > li:active > ul { display: block; margin-left: 0; margin-top: -20px; padding-top: 20px; }
ul > li > ul:hover { display: block; }
Ich habe den Code net getestet aber er sollte funktionieren.
Anschließend kannste ihn natürlich noch formatieren usw.
Das margin-top und paddinf-top, da musste experimentieren. Ich weiß die genauen werte nicht. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
