Layer sovrapposti

**hyp88** · 21-02-2008, 22:15

Ciao a tutti sono nuovo da queste parti,
potete aiutarmi a capire perchè dati i seguenti segmenti di codice css e html ottengo due output diversi a seconda che visualizzo la pagina con Firefox o con IE 6?.ho letto tra i vari post precedentemente inseriti che IE ha diversi bug riguardo al posizionamento e altri inconveniente utilizzando i css..ora vi posto il codice..

In pratica con firefox non visualizzo il menu...con IE 6 vedo il menu ma non lo vedo sovrapposto all'elemento content (come avrei voluto che fosse)..HElp

dove sbaglio?

Codice PHP:






body

{

    background-color: #fff;

    color: #000;

    font-family: arial, helvetica, verdana, tahoma, sans-serif;

    font-size: 80%;

    margin: 0em;

    padding: 0em;

}





#header

{

    background-color: #DEF2FC;

    background-image: url(Immagini/im02.gif);

    width:860px;

    background-repeat: no-repeat;

    border: 1px solid #000;

    

    border-left: 0;

    border-right: 0;

    border-top: 0;

    color: #420702;

    font: normal 280% Georgia, "Times New Roman", Times, serif;

    height: 148px;

    

}







#menu01v

{

    

    float: left;

    font: 90% Arial, Helvetica, sans-serif;

    margin: 0;

    padding: 0;

    width: 16%;

}







#box2{





    width: 860px;

        height: 148px;

        position: absolute;

        background-image: url(Immagini/im03.gif);









}











#contentUp

{



 

 position: relative;

 background: #FFCC00;

    width: 860px;

   z-index:8;





}





#content

{

    margin-left:10px;

        

    width: 840px;

    background: #FFFFCC;

    border-top: 10px solid #FFCC00;

    border-bottom: 10px solid #FFCC00;

    color: #ffffff;

    

    z-index:9;

    

    

    

}







#container {



position:relative; 

width: 860px; 

height: 100%;

margin: 0 auto;

    text-align: left; 

border-left: 0px solid #000000;

border-right: 0px solid #000000



}

ecco il codice html

Codice PHP:








<body>









<div id="container">









<div id="header">





</div>





<div id="menu01v">

 <ul>[*][url="#"]Home[/url][*][url="#"]C[/url][*][url="#"]CC[/url][*][url="#"]CCC[/url][*][url="#"]CCCC[/url][/list]

</div>











<div id="contentUP">







<div id="content">



testo








































































</div>





<div id="box2">





</div>





</div>



</div>





</body>

**Myaku** · 22-02-2008, 08:58

il codice è validato?
che dtd hai in uso?

**Mich_** · 22-02-2008, 09:48

Non e` facile seguire quel codice: contiene sicuro degli errori, anche se non e` chiaro (almeno a me) cosa vorresti ottenere.
Credo che uno schemino con i blocchi colorati potrebbe chiarire (puoi realizzarlo con qualsiasi programma grafico, anche tipo paint, ed allegarlo con il bottone in fondo).

Ed ecco alcune domande.
Perche` alcuni blocchi sono posizionati, ma non ne e` specificata la posizione? A che ti serve?
Perche` il menu01v ha un float left e nonci sono altri blocchi flottati?
E di conseguenza: perche` il menu e` inserito direttamente nel body?
A che ti sevono gli z-index che hai messo?

**hyp88** · 22-02-2008, 11:16

Ok mi scuso avrei potuto linkarvi i due ouptut ora ve li allego cosi ci capiamo meglio..
Output in I:EI.E

Firefox

Il mio cruccio è che vorrei riuscire a spostare liberamente sopra il rettangolo arancione bordato il menu (che tra l'altro visualizzo solo con I.E.).I Z-index che ho applicato ad alcuni blocchi credevano servissero per gestire la priorità di visualizzazione una volta sovrapposti due generici elementi.

**Mich_** · 22-02-2008, 12:06

Provo ad interpretare:

codice:

<div id="container">
  <div id="header">    ...  </div> 

  <div id="contentUP">
    <div id="content">
      <ul id="menu01v">[*]Home[*]C[*]CC[*]CCC[*]CCCC[/list]
      

testo
        

        
 
        ...   </p>
    </div> 
  </div> 
</div>

Con:

codice:

body {
  text-align: center;
  width: 100%;
  height: 100%;
}
#container {
  width: 860px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
}
...
#menu {
  float: left;
  width: ...:
}

Discussione: Layer sovrapposti

Strumenti discussione

Ricerca discussione

Visualizza

Layer sovrapposti

Permessi di invio