zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Text "aufklappen" ohne JavaScript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.02.2005, 15:32
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard 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>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.02.2005, 00:07
Benutzer
neuer user
 
Registriert seit: 19.01.2005
Beiträge: 59
feelx befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.02.2005, 00:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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...
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
  #4 (permalink)  
Alt 10.02.2005, 01:50
Benutzer
neuer user
 
Registriert seit: 19.01.2005
Beiträge: 59
feelx befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.02.2005, 11:26
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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 ?
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 10.02.2005, 11:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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".
Mit Zitat antworten
  #7 (permalink)  
Alt 10.02.2005, 11:48
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 10.02.2005, 12:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

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.
Angehängte Grafiken
Dateityp: gif test2.gif (43,4 KB, 6552x aufgerufen)
Dateityp: gif test1.gif (31,2 KB, 6522x aufgerufen)
Mit Zitat antworten
  #9 (permalink)  
Alt 10.02.2005, 12:15
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.02.2005, 12:29
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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 ->
Angehängte Grafiken
Dateityp: jpg test.jpg (14,2 KB, 6493x aufgerufen)
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hover effekt auf ganze TD zelle gandalf_hh CSS 27 13.07.2011 20:06
Float:right fehler im IE6 gertnaster CSS 9 04.01.2011 22:59
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Probleme mit float Webentwickler Eric CSS 5 21.06.2007 21:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:23 Uhr.