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