testo comparsa

**whois** · 30-12-2005, 12:07

Voglio tentare di creare un testo a comparsa con i css. al click sul primo link si visualizza, al click sul secondo link si chiude. Non riseco a gestire bene lo stato dei links e quindi la comparsa/scomparsa non è sempre al click del mouse ma bisogna uscire dall'area sensibile per visualizzare il testo...FORSE E' MEGLIO CHE VEDETE

allora ho questo codice

code:--------------------------------------------------------------------------------
<html>

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
</head>

<body>

<STYLE type=text/css media=screen>HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, sans-serif; TEXT-ALIGN: center
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, sans-serif; TEXT-ALIGN: center
}
#container {
BORDER-RIGHT: #f00 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #f00 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 20px auto; BORDER-LEFT: #f00 1px solid; WIDTH: 698px; PADDING-TOP: 0px; BORDER-BOTTOM: #f00 1px solid; HEIGHT: 400px; TEXT-ALIGN: center
}
#testata {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 40px; PADDING-TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #aaa
}
#testata H4 {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px
}
#corpo {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 360px; BACKGROUND-COLOR: #ddd; TEXT-ALIGN: left
}
#menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 200px; PADDING-TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #fff; TEXT-ALIGN: left
}
#menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.6em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu LI A {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 76%; PADDING-BOTTOM: 0px; MARGIN: 4px 0px 0px 10px; BORDER-LEFT: #fff 1px solid; WIDTH: 170px; COLOR: #09d; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: none
}
#menu LI A SPAN {
DISPLAY: none
}
#menu LI A.chiudi {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 76%; PADDING-BOTTOM: 0px; MARGIN: 4px 0px 0px 10px; BORDER-LEFT: #fff 1px solid; WIDTH: 170px; COLOR: #09d; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: none
}
#menu LI A:active {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 4px 0px 0px 10px; BORDER-LEFT: #fff 1px solid; COLOR: #f60; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #ddd; TEXT-DECORATION: underline
}
#menu LI A.chiudi:active {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 4px 0px 0px 10px; BORDER-LEFT: #fff 1px solid; COLOR: #f60; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #ddd; TEXT-DECORATION: underline
}
#menu LI A:active SPAN {
BORDER-RIGHT: #000 2px outset; PADDING-RIGHT: 10px; BORDER-TOP: #000 2px outset; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: normal; Z-INDEX: 100; BACKGROUND: #fff; LEFT: 50%; PADDING-BOTTOM: 10px; MARGIN: 0px; BORDER-LEFT: #000 2px outset; WIDTH: 400px; PADDING-TOP: 10px; BORDER-BOTTOM: #000 2px outset; POSITION: absolute; TEXT-ALIGN: justify
}
#menu LI A.chiudi:active SPAN {
DISPLAY: none}
#content
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 498px; PADDING-TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: transparent; TEXT-ALIGN: left
}
#content H4 {
PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 5px
}
</STYLE>

<DIV id=container>
<DIV id=corpo>
<DIV id=menu>
<UL>
<LI><A title="Descrizione del link 2" href="#">Link
2 apri<SPAN>Descrizione del link 2
Lorem ipsum dolor sit amet
</SPAN></A></LI>
<LI><A title="Descrizione del link 2" class="chiudi"
href="#">Link 2 chiudi<SPAN> Descrizione del link 2
Lorem ipsum dolor sit amet
</SPAN></A></LI>
[/list]
</DIV>
</DIV>
</DIV>

</body>

</html>

**seed_squall_it** · 30-12-2005, 13:04

Senza aver guardato approfonditamente il codice, se non sbaglio hai usato una pseudoclasse :active per gestire l'evento al click del mouse...ma IE non supporta questa pseudoclasse! Per IE esiste solo la pseudoclasse :hover (che tra l'altro non può essere applicata a nessun elemento diverso da un <a>!).

**salasir** · 30-12-2005, 14:01

Scusa se mi intrometto, ma le pseudoclassi del tag <a> sono:

link
visited
hover
active

rigorosamente in questo ordine e gestiti perfettamente da IE!
Poi esistono anche altre pseudoclassi tipo :focus ma qui IE ... :rollo:
Sicuramente, lo stato :hover che altri browser gestiscono su più o meno tutti i tag, da IE viene gestito solo sul tag <a>

**seed_squall_it** · 30-12-2005, 14:26

Già, hai ragione...con tutti i casini che combina IE mi ero confuso con il discorso delle pseudoclassi gestite solo per i tag <a>...

**whois** · 02-01-2006, 10:05

e quindi?

**salasir** · 02-01-2006, 10:21

Originariamente inviato da whois
e quindi?

Quindi ho provato il tuo codice e non ho capito esattamente come dovrebbe funzionare.
Quello che fa adesso è aprire un box al click su "apri" e chiuderlo al click su "chiudi" (posizionamento box escluso). Cosa/come vorresti funzionasse?

A parte il fatto che gli stili andrebbero definiti nell'head e non nol body.

**whois** · 03-01-2006, 17:52

che APRI e CHIUDI funzionasse al click "subito" non dopo aver abbandonato l'area sensibile...
cmq prova più volte e vedrai l'anomalia..sempre se ti va

**salasir** · 03-01-2006, 17:57

Originariamente inviato da whois
che APRI e CHIUDI funzionasse al click "subito" non dopo aver abbandonato l'area sensibile...
cmq prova più volte e vedrai l'anomalia..sempre se ti va

Ti assicuro che a me il testo compare/scompare al CLICK, non quando abbandono la zona sensibile ...

**whois** · 03-01-2006, 18:01

che browser utilizzi? io IE 6

**salasir** · 03-01-2006, 18:13

IE 6.0 sp1

O non riesco a capire quello che intendi oppure tu hai altre cose nella pagina che ti creano problemi.
Io ho creato la pagina facendo copia e incolla del tuo codice.
PS Ho spostato lo style tra <head> e </head>

Discussione: testo comparsa

Strumenti discussione

Ricerca discussione

Visualizza

testo comparsa

Permessi di invio