XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Text "aufklappen" ohne JavaScript (http://xhtmlforum.de/showthread.php?t=34362)

ulle 09.02.2005 15:32

Text "aufklappen" ohne JavaScript
 
Inspiriert durch http://www.xhtmlforum.de/viewtopic.php?t=3088
habe ich eben mal versucht einen [display:none/block] Mechanismus für Text-Blöcke mit reinem CSS zu verwirklichen.

Geht soweit auch gut, bis auf die OUTLINEs im IE, hat da jemand eine Idee

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/

*                        {
                margin:  0;
                padding: 0;
                        }

html, body        {
                        color:                          #000000;
                        background-color: #FF9922;
                        line-height: 1.45;
                        }

body                {
                        padding: 3em 1em;
                       
                        font-size:  100.01%;
                        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                        }
                       
div                        {
                        border:  1px solid #000000;
                        padding: 1em .5em;
                       
                        background-color: #FFFFFF;
                       
                        font-size: .8em;
                        }

p                        {
                        margin: .5em;
                       
                        background-color: #EEEEEE;
                        }

                       
a                        {
                        color: #000000;
                        }
                       
a:focus,
a:active        {
                        background-color: #99CCFF;
                        }       

                       
a span                {
                        display: none;
                        }

a:focus span,
a:active span
                        {
                        display: block;
                       
                        border:  0 none;
                        padding: 1em;
                       
                        text-decoration: none;
                       
                        background-color: #99CCFF;
                        }
                       

                                       
/*]]>*/
</style>

</head>
<body>
 
<div>

       

       
        blablabla
        <a href="#">aufklappen
                <span>rest vom text</span>
        </a>
        </p>
       
       

       
        blablabla
        <a href="#">aufklappen
                <span>rest vom text
 rest vom text</span>
        </a>
        </p>
       
       

       
        blablabla
        <a href="#">aufklappen
                <span>rest vom text</span>
        </a>
        </p>
       
</div>

</body>
</html>


feelx 10.02.2005 00:07

Hi

Hab mir das mal angeschaut - Vielen Dank für das Lernbeispiel schon mal :lol:

Aber ne Frage, was meinst du mit "Outlines"? Es stimmt eigentlich alles, bis auf das, dass die Schrift im IE etwas grösser dargestellt wird... Vom Auge her etwa 11pt statt 10 pt... Aber des meinst du nicht, oder?

Gruss
__________________________________________
Edit
Ich hab es noch mit einer älteren Opera Version probiert:

Version 7.60
Build 7263
Platform Win32
System Windows XP

Dort klappt es normal auf, aber unmittelbar danach schliesst es wieder... Vermutlich ein Browserbug

Mit Konqueror 3.3.2 (KDE 3.3.2) klappt es ebenfalls wieder zu, aber erst wenn der Mauszeiger den Text "aufklappen" verlässt.

terrikay 10.02.2005 00:38

Hallo ulle,

funktioniert im FF, sowie allen IEs ab Version 5 (Version 4 hab ich nun nicht getestet).

Im Opera (7.54) halt nur solange, wie man auf das "aufklappen" klickt und gedrückt hält (der verliert sofort den :focus, wenn man nicht mehr draufklickt - das gleiche hatten wir schon bei der Galerie). Außerdem ist im Opera der ausklappende text unterstrichen und wirkt wie ein link (da vererbt sich anscheinend das <a> drumrum weiter).

Was dich nun an der Darstellung im IE stört, hab ich nun aber auch noch nicht kapiert... :?

feelx 10.02.2005 01:50

Mir ist noch ein kleiner Unterschied zwischen IE5.5/6 und FF aufgefallen... Wenn die Box ausgeklappt ist und man auf den blauen Bereich klickt, schliesst sich im mozilla die Box wieder. Beim IE hingegen nicht. Bin mir nicht sicher, aber sehe ich das richtig, dass man ohnehin innerhalb des a span keine Links mehr anbringen kann? Ansonsten könnte es mit dem Zuklappen ja ein Problem sein.

ulle 10.02.2005 11:26

Zitat:

Zitat von terrikay
Außerdem ist im Opera der ausklappende text unterstrichen und wirkt wie ein link (da vererbt sich anscheinend das <a> drumrum weiter).

tzzz... da habe ich doch extra [...span {text-decoration: none;} ] definiert.

Zitat:

Zitat von terrikay
Was dich nun an der Darstellung im IE stört, hab ich nun aber auch noch nicht kapiert

Zitat:

Zitat von feelx
Aber ne Frage, was meinst du mit "Outlines"? Es stimmt eigentlich alles, bis auf das, dass die Schrift im IE etwas grösser dargestellt wird..

IE6 / XP pro SP2:
Bei mir sind die üblichen feingestrichelten Ränder, die immer um einen fokusierten LINK erscheinen, um alle Zeilen im <span>. Diese werden als OUTLINEs bezeichnet und lassen sich laut CSS2.1 definieren - leider von keinem BROWSER interpretiert. Sind die bei Euch nicht zu sehen ?

mazzo 10.02.2005 11:38

Outlines seh ich im IE6 nicht. mit
Code:

a:focus span,
a:active span,
a:hover span,
span
        {
        display: block;         
        border:  0 none;
        padding: 1em;         
        text-decoration: none;         
        background-color: #99CCFF;
        }

hab ich in Opera aber den Effekt, dass der aufgeklappte Bereich solange stabil bleibt, solange man mit der Maus in diesem Bereich bleibt. Alerdings ist da auch keine Lösung, da das nur funktioniert wenn man der Mauszeiger recht schnell da reinwechselt, sonst bleibts beim reinen hover-Effekt der gleich wieder "implodiert".

ulle 10.02.2005 11:48

Zitat:

Outlines seh ich im IE6 nicht. mit ....
Hmmm... siehst Du die OUTLINEs um den LINK ?

Code:

a:hover span,
span

Bewirkt bei mir ein konfuses Verhalten, des weiteren habe ich immernoch OUTLINEs

_________

Das Focus-Problem nach dem KLICK im Opera ist wohl eher richtig als falsch. Überlegung: Der Focus wird mit der Mouse nur durch KLICK erreicht, somit wird der LINK ausgeführt - auf ein schlappes "#"-ohne Wert (Anker). Somit wird bestimmt auch der FOCUS "versetzt/aufgehoben".

Deshalb habe ich mal eine andere Variante, eine die den FOCUS auf sich selbst setzt. Folgende Änderung ohne das ich am obigen CSS etwas verändert habe.

Code:

<div>

       

       
        block 1
        <a id="block1" href="#block1">aufklappen
                <span>rest vom text</span>
        </a>
        </p>
       
       

       
        block 2
        <a id="block2" href="#block2">aufklappen
                <span>rest vom text
 rest vom text</span>
        </a>
        </p>
       
       

       
        block 3
        <a id="block3" href="#block3">aufklappen
                <span>rest vom text</span>
        </a>
        </p>
       
       

       
        kein block
        <a href="#block1">aufklappen von block1
        </a>
        </p>
       
</div>


mazzo 10.02.2005 12:01

Liste der Anhänge anzeigen (Anzahl: 2)
anbei mal zwei screenshots wie es bei mir ausschaut, schon ulkig was da passiert ;)

der obere DIV ist aus ulles erster Version, der zweite aus dem Code über meinem Post.

toscho 10.02.2005 12:15

Zitat:

Zitat von ulle
Zitat:

Zitat von terrikay
Außerdem ist im Opera der ausklappende text unterstrichen und wirkt wie ein link

tzzz... da habe ich doch extra [...span {text-decoration: none;} ] definiert.

Du siehst ja auch die »text-decoration« vom Element <a>, nicht vom <span>. Die scheint durch, das muß auch so sein.

Gruß
Thomas

ulle 10.02.2005 12:29

Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:

Du siehst ja auch die »text-decoration« vom Element <a>, nicht vom <span>. Die scheint durch, das muß auch so sein.
Wie meinst Du das? Demnach wäre es nicht möglich innerhalb eines LINKs eine Textfolge durch [text-decoration] zu verändern.


OUTLINEs im IE ->


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:04 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023