Text "aufklappen" ohne JavaScript

ulle · #1 (**permalink**) 09.02.2005, 15:32

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 · #2 (**permalink**) 10.02.2005, 00:07

Hi

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

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 · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 10.02.2005, 12:01

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 · #9 (**permalink**) 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 (**permalink**) 10.02.2005, 12:29

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 ->

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Div Float Clear usw... Ich dreh durch ;)	buggix	CSS	14	11.02.2010 09:42
Wrapper wächst nicht mit, keine Floats	maclady	CSS	11	10.02.2010 18:30
Parent DIV soll mit der Höhe seines Childs wachsen	Tekkla	CSS	2	19.11.2009 19:27
gibt es eine andere Lösung ohne Tabelle?	online	CSS	16	24.04.2009 09:41
Floats verschwinden im nichts, Fließer überdecken Floats.	nick	CSS	5	09.02.2008 15:34