Precedenza blocchi div

**Freechiara** · 31-08-2006, 00:33

Ciao a tutti!

Sono nuova qui... ma ho un problema che non riesco proprio a risolvere e spero che qualcuno di voi sia cosi gentile da aiutarmi!!

Sto facendo un sito... ho inserito un menu laterale fatto ovviamente con i css e con il supporto di uno script per il passaggio del mouse. Il menu funziona perfettamente ma non so perchè quando visualizzo il secondo livello del menu (rettangolo affiancato al primo) non va a coprire la parte del div affiancato al menu, ma si posiziona come in trasparenza...non so se riesco a rendere l'idea..in background al menu vedo il testo scritto del div affianco...

Esiste qualche proprietà da impostare di modo che un oggetto vada "davanti" ad un altro?

Sapevo dell'esistenza della proprietà z-index ma non so come posso utilizzarla in questo caso...

Vi esemplifico la mia pagina:

<div id=contenitore>
<div id=menu laterale></div>
<div id=contenuti></div>
</div>

..spero di essere stata abbastanza chiara :-)

grazie a tutti!
chiara

**fcaldera** · 31-08-2006, 00:41

Benvenuta nel forum

Il problema non è molto chiaro anche perchè il codice che hai postato non basta per poterti aiutare a capire dove intervenie.

Posta se puoi un link alla pagina in questione oppure il codice css html e javascript interessato dal menu.

Inoltre dici che stai usando uno script: puoi dirci di quale script si tratta? Interagisce con i CSS?

**Freechiara** · 31-08-2006, 00:47

Certamente:

CSS MENU:

codice:

/* CSS Document */

.suckerdiv ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 150px; 
	border-bottom: 1px solid #ccc;
	background-color:#FF9933;
}
	
.suckerdiv ul li{
	position: relative;
	
}
	
/*stile primo livello menu */
.suckerdiv ul li ul{
	left: 149px; /* Parent menu width - 1*/
	position: absolute;
	width: 160px; /*sub menu width*/
	top: 0;
	display:none;
	background-color:#FF9933;
}

/*offset secondo livello*/
.suckerdiv ul li ul li ul{ 
	left: 162px; /* Parent menu width - 1*/
	background-color:#FF9966;
}

/* menu links style */
.suckerdiv ul li a{
	display: block;
	color: black;
	text-decoration: none;
	background-color:#FF9966;
	padding: 1px 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
}

.suckerdiv ul li a:visited{
	color: black;
}

.suckerdiv ul li a:hover{
	background-color:#FF3300;
}


* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }

CSS PAGINA:

codice:

/* CSS Document */

BODY {
	MARGIN: 0px; 
	BACKGROUND-COLOR:#ddd; 
	PADDING: 0px
}
#page {
	BORDER: #000 1px solid; 
	MARGIN-TOP: -15px; 
	MARGIN-BOTTOM: 0px; 
	LEFT: 50%; 
	HEIGHT: 500px; 
	MARGIN-LEFT: -385px; 
	WIDTH: 770px; 
	POSITION: relative; 
	BACKGROUND-COLOR: #fff
}
#header {
	MARGIN: 0px; 
	LEFT: 0px; 
	WIDTH: 770px; 
	POSITION: relative; 
	TOP: 0px; 
	HEIGHT: 120px; 
	BACKGROUND-COLOR: #abcdef; 
	FONT-SIZE: 14px; 
	FONT-FAMILY: Verdana, Arial, sans
}
#topmenu {
	BACKGROUND-COLOR: #123456; 
	COLOR: #fff; 
	FONT-SIZE: 14px; 
	FONT-FAMILY: Verdana, Arial, sans; 
	PADDING-RIGHT: 10px; 
	MARGIN: 10px; 
	PADDING-LEFT: 10px; 
	FONT-SIZE: 14px; 
	WORD-SPACING: 30px; 
	MARGIN-LEFT: 30px; 
	WIDTH: 690px; 
	PADDING-TOP: 8px; 
	HEIGHT: 30px; 
	TEXT-ALIGN: center
}
#contenitore {
	WIDTH: 750; 
	HEIGHT: 330px; 
	MARGIN: 5px 0px; 
	TEXT-ALIGN: left; 
}
#menusx {
	FLOAT: left; 
	WIDTH: 100px;  
	HEIGHT: 298px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 80%;
	PADDING-TOP: 30px;
	padding-left: 5px;
}
#content {
	FLOAT: left; 
	WIDTH: 480px; 
	BORDER: 1px solid #ABC; 
	HEIGHT: 315px; 
	PADDING: 10px 15px; 
             	MARGIN-LEFT: 100px;
	position: relative;
}

#content p {
	FONT-SIZE: 10px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	text-align:justify;
}

#content h1 {
	color:#FF0000;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 3px;
	font-style: oblique;
	font-variant:small-caps;
}
#footer {
	MARGIN-TOP: 20px; 
	MARGIN-LEFT: 10px; 
	WIDTH: 750px; 
	MARGIN-RIGHT: 10px; 
	HEIGHT: 50px;
}
.footer_content {
	FONT-SIZE: 7.5pt; 
	CURSOR: default; 
	COLOR:#999999; 
	PADDING-TOP: 30px; 
	FONT-FAMILY: Verdana, Arial, sans; 
	TEXT-ALIGN: left
}
#footer_links {
	FONT-SIZE: 9px; 
	LEFT: 0px; 
	WORD-SPACING: 5px; 
	WIDTH: 750px; 
	CURSOR: default; 
	COLOR: #999999; 
	FONT-FAMILY: Verdana, sans-serif; 
	POSITION: relative; 
	TOP: -13px; 
	HEIGHT: auto; TEXT-ALIGN: right
}
#footer_links A:link {
	COLOR: #999999; 
	TEXT-DECORATION: none
}
#footer_links A:hover {
	COLOR: #000000; 
	TEXT-DECORATION: none
}
#footer_links A:visited {
	COLOR: #999999; 
	TEXT-DECORATION: none
}

CODICE HTML:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
  
<HEAD>
<script type="text/javascript">

var menuids=["suckertree1"]

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>

<TITLE>Proxima s.r.l. | Home</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="menu2.css" type="text/css" />
<link rel="stylesheet" href="site.css" type="text/css" />
<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY>
<DIV id=page> 
  
  <DIV id=header title=Proxima s.r.l.> 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="770" height="120">
      <param name="movie" value="Animazioni/fasciahomeC.swf">
      <param name="quality" value="high">
      <embed src="Animazioni/fasciahomeC.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="120"></embed>
    </object>	
  </DIV>
  
  <DIV id=topmenu>
  	

 TOP MENU </P>
  </DIV>
  <DIV id=contenitore>
  
  	<DIV id=menusx>
		<div class="suckerdiv">
			<ul id="suckertree1">
				[*]Proxima
					<ul>
  						[*]Chi siamo
  						[*]Approccio
						[*]Il sistema qualità
						[*]Pubblicazione
  					[/list]
				[*]Offerta
					<ul>
  						[*]Organizzazione
  						[*]Logistica e produzione
						[*]Sistemi di gestione
						[*]Finanza e contabilità
						[*]Auditing
  					[/list]
				[*]Idee
  					<ul>
  						[*]Pubblicazioni
  						[*]Laboratorio idee
  					[/list]
				
				[*]Eventi
				[*]Storie di partnership
				[*]Contatti
				[*]Area riservata
			[/list]
	  </div>
   </DIV>
 
  	<DIV id=content> 
  		<h1>Titolo</h1>
    	

Qui ci saranno i contenuti, a meno della prima pagina in cui verrà messa un'animazione! questa è una prova per il justify</P>
  	</DIV> 
  </DIV>
  
  <DIV id=footer> 
    <DIV class=footer_content>Sito realizzato da Chiara </DIV>
  </DIV>
  <DIV id=footer_links>Copyright - Credits</DIV>
</DIV>
</BODY></HTML>

....ho visto che molti di voi postano il codice con le varie indentature...come si fa???

Grazie ancora per l'aiuto!!

**fcaldera** · 31-08-2006, 00:55

Edit: per l'identazione usa i tag [c o d e] e [/ c o d e]

**Freechiara** · 31-08-2006, 00:56

Ah posto anche lo screen...

Come si può vedere dall'immagine il menu non va a coprire la parte di div interessata, ma rimane "trasparente"...

grazie ancora!

Discussione: Precedenza blocchi div

Strumenti discussione

Ricerca discussione

Visualizza

Precedenza blocchi div

Permessi di invio