|
|||
![]()
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> |
Sponsored Links |
|
|||
![]()
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. |
Sponsored Links |
|
|||
![]()
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 ... |
|
|||
![]()
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.
|
|
|||
![]() Zitat:
Zitat:
Zitat:
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> |
|
|||
![]()
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; } |
|
|||
![]() Zitat:
Code:
a:hover span, span _________ 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> |
|
||||
![]() Zitat:
Gruß Thomas
__________________
toscho.de |
Sponsored Links |
|
|||
![]() Zitat:
OUTLINEs im IE ->
__________________
</ulle> |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
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 |