Immagine per liste

**IvanHares** · 14-05-2008, 15:08

Buon giorno a tutti,
vi posto il codice:

codice:

<html>
	<head>
		<style type="text/css">
			#menu
			{
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				width: 10em;
				heigth: 10em;
				background-color: #0000FF;
			}
			.menu1:link
			{
				width: 12em;
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				font-size: 18px;
				font-style: Verdana, Arial, san-serif;
				background-color: #000000;
				color: #FFFFFF;
				text-decoration: none;
			}
			.menu1:visited
			{
				width: 12em;
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				font-size: 18px;
				font-style: Verdana, Arial, san-serif;
				background-color: #000000;
				color: #FFFFFF;
				text-decoration: none;
			}
			.menu1:hover
			{
				width: 12em;
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				font-size: 18px;
				font-style: Verdana, Arial, san-serif;
				background-color: #000000;
				color: #00BFFF;
				text-decoration: none;
			}
			.menu2:link
			{
				width: 12em;
				heigth: 5em;
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				font-size: 18px;
				font-style: Verdana, Arial, san-serif;
				background-color: #00BFFF;
				color: #FFFFFF;
				text-decoration: none;
			}
			.menu2:visited
			{
				width: 12em;
				heigth: 5em;
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				font-size: 18px;
				font-style: Verdana, Arial, san-serif;
				background-color: #00BFFF;
				color: #FFFFFF;
				text-decoration: none;
			}
			.menu2:hover
			{
				width: 12em;
				heigth: 5em;
				margin: 0px 10px 0px 10px;
				padding: 0px 10px 0px 10px;
				font-size: 18px;
				font-style: Verdana, Arial, san-serif;
				background-color: #000BFF;
				color: #FFFFFF;
				text-decoration: none;
			}
			ul,li
			{
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				list-style-type: none;
			}
			body
			{
				background: #5467BF url(file/sf_fondo.jpg);
			}
		</style>
		<script type="text/javascript">
			function chiudiApri(txt)
			{
				//menu verticale
				var visible=document.getElementById(txt).style.display;
				chiudi();
				var icona = txt + 'I';
				
				if(visible == 'none')
				{	
					document.getElementById(txt).style.display = "block";
					document.getElementById(icona).innerHTML = "<img src=\"file/freccia2.jpg\" align=\"left\">";
				}
				else
				{
					document.getElementById(icona).innerHTML = "<img src=\"file/freccia.jpg\" align=\"left\">";
					chiudi();
				}
			}
			function chiudi()
			{
				//menu verticale
				nomi = new Array("primo","secondo","terzo", "quarto", "quinto");
				for(i=0; i<nomi.length; i++)
				{
					document.getElementById(nomi[i]).style.display ="none"
					var imgg = nomi[i] + 'I';
					document.getElementById(imgg).innerHTML = "<img src=\"file/freccia.jpg\" align=\"left\">";
				}
			}
		</script>
	</head>
	
	<body>
		<div id="menu">
			

			<ul>
				<li /><div id="primoI">[img]file/freccia.jpg[/img]</div>Menu 1
				<ul id="primo" style="display:none">
					<li /> sottoMenu 1.1
					<li /> sottoMenu 1.2
					<li /> sottoMenu 1.3
				[/list]
				<li /><div id="secondoI">[img]file/freccia.jpg[/img]</div>Menu 2
				<ul id="secondo" style="display:none">
					<li /> sotMenu 2.1
					<li /> sotMenu 2.2
					<li /> sotMenu 2.3
				[/list]
				<li /><div id="terzoI">[img]file/freccia.jpg[/img]</div>Menu 3
				<ul id="terzo" style="display:none">
					<li /> sotMenu 3.1
					<li /> sotMenu 3.2
					<li /> sotMenu 3.3
				[/list]
				<li /><div id="quartoI">[img]file/freccia.jpg[/img]</div>Menu 4
				<ul id="quarto" style="display:none">
					<li /> sotMenu 4.1
					<li /> sotMenu 4.2
					<li /> sotMenu 4.3
				[/list]
				<li /><div id="quintoI">[img]file/freccia.jpg[/img]</div>Menu 5
				<ul id="quinto" style="display:none">
					<li /> sotMenu 5.1
					<li /> sotMenu 5.2
					<li /> sotMenu 5.3
				[/list]
			[/list]
			

		</div>
	</body>
</html>

Il mio problema è che ho dovuto inserire un div per inserire l'immagine di una freccia che punta a dx per il menu chiuso mentre punta in basso a menu aperto.
Il problema è che il nome del menu viene inserito a capo

Allora ho provato a modificare l'immagine della lista, ma in questo caso la freccia non cambierebbe quando il menu è aperto.

Qualcuno ha qualche soluzione in merito?

Grazie a tutti per consigli e aiuti.

**IvanHares** · 14-05-2008, 16:14

Ho risolto su IE in questo modo:

codice:

...
   <ul>[*]
              <a href...>
                       <div id="..">
                                  [img][/img]
                       </div>
                        Menu1
              </a>
         ...[/list]
...

Il problema è che la soluzione non mi risolve il problema su FireFox.

Credo cmq che sia un problema di css.

Grazie a tutti per i consigli

Discussione: Immagine per liste

Strumenti discussione

Ricerca discussione

Visualizza

Immagine per liste

Permessi di invio