Text mit CSS ein- und ausklappen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
anzeigen
beispiel
bier
button
code
forum
funktion
http
idee
maus
nutzen
sache
text
textfeld
url
vorschlag
wein
zeigen
zweck
-
Hall zusammen!
Ich habe da einen langen Text, der nicht gleich in voller Länge angezeigt werden soll, sondern nur vielleicht der erste Satz und dann soll ein Link kommen, um den ganzen Text auszuklappen - andersherum, soll derselbe Link den Text bei Klick wieder einklappen. Ich hatte mir vorgestellt, das mit CSS zu lösen, da JavaScript nicht bei jedem Browser gleich funktioniert, aktiviert oder vielleicht geblockt ist. Außerdem sollte diese Funktion in allen gängigen Browsern (Chrome, Firefox, Internet Explorer, Netscape) funktionieren.
Ich habe mich zwar schon ein bisschen vorinformiert und weiß, dass man mit display:block und display:none arbeiten könnte - wie genau weiß ich aber auch nicht und ich hatte gehofft, dass ihr mir da vielleicht weiterhelfen könnt oder eine Idee habt, meine Idee umzusetzen.
Gruß,
webdesignerin
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ungetestet, aber sollte gehen:
<style> #parent > #child { display: none; } #parent:hover > #child { display: block; } </style> <div id="parent"> TEASER <div id="child"> ich bin der volltext </div> </div>
Wenn ich mich richtig erinnere bewirkt das > eine Anwendung auf alle Childelemente, und so kannst du die Childs theoretisch stylen und on Parent Hover auch sichtbar machen. Da ich imo keine Zeit hab hoffe ich mal, dass du mit diesem ungetestetem Stück arbeiten kannst, bzw weiter kommst.
Liebe Grüße -
Hallo ggamee!
An sich eine gute Lösung und sie funktioniert auch, allerdings stört mich das hover - woher sollen die Besucher wissen, dass sie mit der Maus über den Teaser-Text scrollen müssen, um den Rest zu lesen?
Kann man das Ganze nicht ohne hover machen oder irgendwie einen Hinweis einbauen, damit die Leser wissen, wie sie an den Rest des Textes kommen?
Gruß,
webdesignerin
-
Ich hätte noch einen anderen Vorschlag: die CSS-Pseudoklasse
:target<html> <head> <title>Text mit CSS ein und ausklappen</title> <style type="text/css"><!-- div.tab:not(:target) div.content, div.tab:target div.show, div.tab div.hide { display: none; } div.tab:target div.content, div.tab:target div.hide { display: block; } --></style> </head> <body> <div class="tab" id="text1"> <div class="show"> <a href="#text1">Text anzeigen</a> </div> <div class="hide"> <a href="#">Text verstecken</a> </div> <div class="content"> Das ist langer Text, der ein und ausklappbar sein soll. Zu diesem Zweck soll es per CSS möglich sein das div zu verstecken und wieder einzublenden. Ob das möglich ist ist allerdings die Frage... und wenn es möglich ist, wie funktioniert es dann? </div> </div> </body> </html>Der einzige Nachteil: es kann damit immer nur ein einziger Text gleichzeitig angezeigt werden…
Demoseite
Beitrag zuletzt geändert: 28.9.2012 13:58:21 von hackyourlife -
Du könntest natürlich den Teaser so gestallten, dass die Leute mit der Maus drüber fahren, oder du schreibst am Ende "bewege die Maushierher um den Rest zu lesen". Das ist jetzt eine etwas kritischere Sache.
Was hast du dir denn vorgestellt, wie es sein sollte? Dann könnte man schon eher sagen, ob es machbar ist, oder nicht.
Liebe Grüße
Beitrag zuletzt geändert: 28.9.2012 13:58:12 von ggamee -
Hallo ihr Beiden!
ggamee schrieb:
Was hast du dir denn vorgestellt, wie es sein sollte? Dann könnte man schon eher sagen, ob es machbar ist, oder nicht.
Siehe hier:
webdesignerin schrieb:
Ich habe da einen langen Text, der nicht gleich in voller Länge angezeigt werden soll, sondern nur vielleicht der erste Satz und dann soll ein Link kommen, um den ganzen Text auszuklappen - andersherum, soll derselbe Link den Text bei Klick wieder einklappen.
Anders ausgedrückt: So wie das Beispiel von hackyourlife.
hackyourlife schrieb:
Ich hätte noch einen anderen Vorschlag: die CSS-Pseudoklasse:target
Der einzige Nachteil: es kann damit immer nur ein einziger Text gleichzeitig angezeigt werden…
Demoseite
Danke für Deinen Vorschlag, der meinem Anliegen schon sehr nahe kommt, allerdings habe ich neben dem von Dir genannten Problem wohl noch Eines. Und zwar habe ich im Text mehrere Links und wenn ich auf Dein "Text anzeigen klicke", lande ich immer wieder auf der Startseite der Webseite. Woran könnte das liegen?
Gruß,
webdesignerin
-
webdesignerin schrieb:
Das liegt wohl an der Funktionsweise…
Und zwar habe ich im Text mehrere Links und wenn ich auf Dein "Text anzeigen klicke", lande ich immer wieder auf der Startseite der Webseite. Woran könnte das liegen?
Ein Text wird dann (und nur dann) eingeblendet, wenn er eine id hat und in der URL
steht (text-id wäre hier die ID des Textes). Um nun den Text ein- oder auszuklappen wird ein Link benutzt der auf den (nicht vorhandenen) Anchor springt. Wenn du jetzt immer auf der Startseite landest musst du diese Links wohl anpassen… wichtig ist nur alles nach dem#text-id
.#
Leider gibt es sonst keine sinnvolle CSS-Basierte Lösung, und wenn der eine von mir genannte Nachteil ein Problem darstellt sowie :hover die Bedienbarkeit einschränkt musst du wohl doch auf JavaScript zurückgreifen…
Beitrag zuletzt geändert: 28.9.2012 14:30:25 von hackyourlife -
Weitere Möglichkeit wäre diese hier:
http://jsfiddle.net/tovic/bY6ty/ mit der Pseudoklasse :checked, obs der IE 9 unterstützt weiß ich nicht, der IE8 tuts aber nicht -
Hier das habe ich auf die Schnelle geschrieben.
http://hpage.lima-city.de/spoiler
Der Code ist ähnlich wie der von hackyourlive, hat aber mehr Funktionen.
Du musst den Code nur noch in deine Homepage einfügen und anpassen wie du es möchtest!
Beitrag zuletzt geändert: 28.9.2012 16:46:06 von hpage -
hpage schrieb:
Hier das habe ich auf die Schnelle geschrieben.
http://hpage.lima-city.de/spoiler
Der Code ist ähnlich wie der von hackyourlive, hat aber mehr Funktionen.
Du musst den Code nur noch in deine Homepage einfügen und anpassen wie du es möchtest!
Und welche Funktionen sind das? Vielleicht solltest du das einer Person, die sich damit ja anscheinend nicht so gut auskennt erklären... -
tchab schrieb:
Das solltest du mir auch mal erklären, denn ich sehe nur, dass mein Code kopiert (und verpfuscht) worden ist, kann aber keine "neuen Funktionen" erkennen. Was sollten diese Funktionen denn tun (welchen Zweck sollen sie erfüllen)?
hpage schrieb:
Und welche Funktionen sind das? Vielleicht solltest du das einer Person, die sich damit ja anscheinend nicht so gut auskennt erklären...
Hier das habe ich auf die Schnelle geschrieben.
http://hpage.lima-city.de/spoiler
Der Code ist ähnlich wie der von hackyourlive, hat aber mehr Funktionen.
Du musst den Code nur noch in deine Homepage einfügen und anpassen wie du es möchtest!
Bist du eigentlich ein Säufer? Oder woher kommt sonst
undid="bier"
?class="wein"
Damit sich alle auf die Suche nach den dazugekommenen "Funktionen" machen können habe ich den Quellcode, der auf der von hpage verlinkten Seite dargestellt wird, als HTML-Datei auf meinen Webspace gespeichert und damit unvorstellbare 723 Bytes verschwendet…
Beitrag zuletzt geändert: 28.9.2012 22:19:38 von hackyourlife -
Das solltest du mir auch mal erklären, denn ich sehe nur, dass mein Code kopiert (und verpfuscht) worden ist, kann aber keine "neuen Funktionen" erkennen. Was sollten diese Funktionen denn tun (welchen Zweck sollen sie erfüllen)?
Bist du eigentlich ein Säufer? Oder woher kommt sonst
undid="bier"
?class="wein"
Damit sich alle auf die Suche nach den dazugekommenen "Funktionen" machen können habe ich den Quellcode, der auf der von hpage verlinkten Seite dargestellt wird, als HTML-Datei auf meinen Webspace gespeichert und damit unvorstellbare 723 Bytes verschwendet…[/quote]
Ich habe den Code nicht von dir kopiert .
Der Spoiler ist in einem Kasten und geht nicht über das ganze Dokument !
Dazu kommt jedes mal wenn man mit der Maus über den Text oder den Button fährt eine eine Meldung ( im Beispiel "Spoiler").
Damit zeige ich auch wie man ein Textfeld oder einen Button verwenden kann, da bisher nur ein Text verwendet wurde!
Ich bin kein Säufer!
Bier und Wein Steht nur da weil ich ungefähr 65% des Codes von einer alten Datei von mir kopiert habe und umgeschrieben habe!
Aber das ist jetzt nicht das eigentliche Thema
Beitrag zuletzt geändert: 29.9.2012 0:39:02 von hpage -
hpage schrieb:
Damit zeige ich auch wie man ein Textfeld oder einen Button verwenden kann, da bisher nur ein Text verwendet wurde!
Falsch! Das möchtest Du vielleicht zeigen, machst es aber nicht. Statt dessen zeigst Du neben dem Textlink einen Button und ein Textfeld, die beide im Kontext überflüssig und keine erkennbare Funktion haben sind.
Wenn dir vorschwebte, eine Alternative zum Textlink zu zeigen, hättest Du das anhand eines zweiten Beispieles zeigen und dir damit den berechtigten Spott ersparen können.
Außerdem wäre es sinnvoll gewesen, sofort die angeblichen neuen Funktionen zu erklären, da sie aus deinem verhunzten Link, für denjenigen, der die Frage stellt und damit seine Unwissenheit bereits dokumentiert hat, nicht ohne Weiteres nachvollziehbar sind.
Altes Sprichwort: Niemanden interessiert, was Du willst, sondern nur das, was Du tust.
-
ich versteh das ganze nicht.
in foren muss man nur [spoiler] TEXT [/spoiler] eingeben, wieso geht das bei einer
homepage nicht auch so/ oder so aehnlich?
MfG -
ichapfel schrieb:
In Foren läuft im Hintergrund eine Foren-Software, die aus deinen Eingaben eine HTML-Seite erstellt die du dir im Browser ansehen kannst. Extra-Funktionen wie die BB-Codes werden von der Software ausgewertet und in entsprechende HTML-Tags umgewandelt. So wird z.b. aus
in foren muss man nur [spoiler] TEXT [/spoiler] eingeben, wieso geht das bei einer
homepage nicht auch so/ oder so aehnlich?
der Code[b]
. Das hat den Sinn, dass sich nicht jeder der in einem Forum schreibt auch mit HTML auskennen muss.<strong>
Jetzt ist nur das Problem, dass manche dieser Tags (z.b.
) nicht einfach in einen HTML-Code umgesetzt werden können, sondern eventuell noch JavaScript und sonstige Sachen rundherum brauchen um zu funktionieren. Hier geht es jetzt darum wie eben so ein[spoiler]
tatsächlich in HTML umgesetzt wird ohne dabei JavaScript zu verwenden, was die Sache komplizierter macht.[spoiler] -
Geht auch mit Javascript zum Beispiel als Onclick:
<a href="" onclick="document.getElementById('test').style.display = 'block'">Ausfahren</a> <div style="display:none" id="test">Text</div> -
s27 schrieb:
Geht auch mit Javascript zum Beispiel als Onclick:
<a href="" onclick="document.getElementById('test').style.display = 'block'">Ausfahren</a> <div style="display:none" id="test">Text</div>
Manche User haben JS deaktiviert darum können sie die Funktion nicht nutzen.
Javascript ist für solche Kleinigkeiten nicht zu empfehlen.
Daher wird Css am häufigsten für Spoiler und ähnliche Sachen genutzt
Beitrag zuletzt geändert: 16.11.2012 22:03:34 von hpage -
hpage schrieb:
Gute Idee, aber warum wird dann auf allen Seiten die Spoiler nutzen wenn JavaScript deaktiviert ist der Spoiler funktionslos? Wie kommt es dann, dass meist so schöne Scroll-Animationen bei Spoilern vorhanden sind und diese auch in älteren Browsern funktionieren, wo es vermutlich die dazu nötigen CSS-Mechanismen noch gar nicht gab?
Manche User haben JS deaktiviert darum können sie die Funktion nicht nutzen.
Javascript ist für solche Kleinigkeiten nicht zu empfehlen.
Daher wird Css am häufigsten für Spoiler und ähnliche Sachen genutzt
Es kann schon sein, dass man mittlerweile CSS teilweise dafür nutzen könnte, den vollen Funktionsumfang eines Spoilers mit JavaScript wirst du derzeit aber mit CSS noch nicht erreichen können.
Dir fällt aber sowieso nicht auf ob etwas mit JavaScript oder CSS erledigt wird
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
