Sovrapporre elementi con position:relative

[fabione_htm]

Salve sono un paio di settimane che cerco di trovare una soluzione al mio problema senza esito.
Mi sarebbe utile sapere se è possibile sovrappore sopra un immagine del testo e una seconda immagine.

Mi spiego meglio.

Io vorrei creare un layout come figura(allegata) ed penso che non posso usare un posizionamento assoluto, perchè gli elementi al suo interno cambiano. Qualcosa l'ho giá fatta ed è:

---------------------------------------------------------------------------------------
css:
---------------------------------------------------------------------------------------
 /*Immagine sempre fissa */ 
div#parte_centrale{
   position: relative;
   height: 10px;
   top: 10px;
   z-index: 1;
   }
 /* immagine di altezza variabile */ 
 div#elettro_esposto{
  position: relative;
  height: 10px;
  top: 10px;
  left: 400px;
  z-index: 2;


}


/* Descrizione contenitore che comprende il testo la foto del eletrodomestico e del deco centrale*/
#descrizione{
position: relative;
padding:0 1.5em;


}
p.clearer {
  clear: both;
  font-size: 0;    /* questo serve per evitare unbug inIE6 */
}

 /* I prossimi due tag servono per il testo variabile */ 
div.testo{
  position: relative;
  top: 1px;
  left: 10px;
}

li{
    position: relative;
    list-style-image: url([url]http://fabione.de/ebay/deco/ceck.gif[/url]);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: #000000;
    z-index: 4;
    }
 /* bax che si deve spostare */ 
.dati_pricipali_macchina {
   position: relative;
   top: 120px;
   left: 280px;
   width: 250px;
   color: #000;
   background-color: #F9F2A2;
   /*valore da non variare*/
   background-image: url("http://fabione.de/ebay/deco/angoli_essenziali_bottom.gif");
   background-repeat: no-repeat;
   background-position: bottom left;
}

.dati_pricipali_macchina_testo {
   /*valore da non variare*/
   background-image: url("http://fabione.de/ebay/deco/angoli_essenziali_top.gif");
   background-repeat: no-repeat;
   padding: 10px;
}
----------------------------------------------------------------------------------------
html  quello che segue e racchiuso in un contenitore
----------------------------------------------------------------------------------------
        <div id="descrizione">
        <div id="elettro_esposto">
                  [img]F:/ebay/modelli attuali/siemenst1200a/immagini/eletro_esposto.gif[/img]
                   </div>

                 <div id="parte_centrale">
                 [img]http://fabione.de/ebay/deco/deco_centrale.gif[/img]
                   </div>
                   <div id="testo">


                    <span class='descrizione_rosso'>Indice2</span>
                        <ul>[*]Prova[*]Prova1[*]Prova3[*]Prova4[*]Prova[*]Prova1[/list]
                              <span class='descrizione_rosso'>Indice2</span>
                         <ul>[*]Prova3[*]Prova4[*]Prova
[*]Prova[*]Prova1[*]Prova3[*]Prova4[*]Prova[*]Prova1[/list]
                              <span class='descrizione_rosso'>Indice2</span>
                         <ul>[*]Prova3[*]Prova4[*]Prova
[/list]
                </div>
</div>

<p class="clearer"> </p>

  <div class="dati_pricipali_macchina">
    <div class="dati_pricipali_macchina_testo">
      <span class="dettagli_nero">Energieeffizienzklasse:<span class="dettagli_rosso" style="position: relative; left: 2px; top: 0px">A</span></span>
      <hr>
      <span class="dettagli_nero">Wasserverbrauch:<span class="dettagli_rosso" style="position: relative; left: 37px; top: 0px">49 L</span></span>
      <hr>
      <span class="dettagli_nero">Stromverbrauch:<span class="dettagli_rosso" style="position: relative; left: 50px; top: 0px">0.95 KWh</span></span>
      <hr>
      <span class="dettagli_nero">Neuepreis:<span class="dettagli_rosso" style="position: relative; left: 88px; top: 0px">625 Euro</span></span>
    </div>
  </div> 

La cosa funzina pure solo che il box inferiare si sovrapone all immagine e se metto l'attributo height: auto cosi:

 div#elettro_esposto{
  position: relative;
  
 /*height: 10px;  questo via*/
    height: auto; /* uso questo sballa tutto */
  top: 10px;
  left: 400px;
  z-index: 2;


} 

scende tutto.

So che quello che ho scritto può sembrare un romanzo ma meglio non sò descrivere il mio problema.

Tutto stà se si possono accavallare o sovrappore elementi utilizzando relative e se no come posso spostare un elemento dinamincamente in base a un'altro che sta posizionato con assolute.

Grazie

[fabione_htm]

Invio L#immagine 'cosi' visto che 'cola' non funziona

[Mich_]

Non ho letto tutto il tuo codice, ma io partirei da un presupposto diverso.

Quello che si vede in nero non e` un'immagine che ha del contenuto, ma e` uno sfondo. La differenza e` importante: se una persona non vede l'immagine, riesce comunque ad avere tutto il contenuto informativo della pagina.
Quindi va trattato come sfondo, e gli sfondi si inseriscono nel CSS con gli attributi background.

Allego un'immagine con la mia proposta.
Il codice per ottenerla e` del tipo:

HTML:
<body>
  <div id="wrapper">
    <div id="box1">

box1</p></div>
    <div id="box1">

box2</p></div>
  </div>
</body>

CSS:
html, body {
  width: 100%;
  background-color: #888;     /* grigio piu` scuro */
}
#wrapper {
  width: 700px;
  margin: 20px auto;
  background: #fff url(arancio.gif) repeat-x;
}
#wrapper:after {
  clear: both;
  /* ed altri attributi come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}
#box1 {
  width: 300px;
  margin: 40px 20px;
  float: left;
  background-color: #ddd;      /* grigio chiaro */
}
#box2 {
  width: 300px;
  margin: 40px 20px;
  float: right;
  background-color: #ddd;      /* grigio chiaro */
}

Il file arancio.gif deve essere un'immagine larga 1px e alta come la fascia che vuoi generare. In alternativa puo` essere un'immagine a tutta larghezza, ed in quel caso deve esserci no-repeat al posto di repeat-x.

Nota che tutti i colori sono inseriti per prova (per poter visualizzare i blocchi): possono essere cambiati, e possono anche diventare transparent

NON e` stato ottimizzato per IE (quirks): occorre inserire altri attributi per centrare in IE

[fabione_htm]

Innanzitutto grazie per il tempo che mi dedichi.

Quindi mi consigli di inserire l'immagine fissa nello sfondo.Solo che questa soluzione porterebbe ad un eccessivo peso (in termini di kb).Guarda come dovrebbe essere la pagina:

http://fabione.de/ebay/siemens6123/index.htm

Da qui capirai che non posso inserire l'immagine fissa ´nello sfondo.

[Mich_]

Non ho guardato il codice HTML+CSS della pagina (e` un po' lungo e non formattato come piace a me - questo complica seguirne la logica).
Inoltre ci sono degli evidenti errori di formattazione, che portano a sovrapposizioni (che sono deleterie, essendo quella una pagina di pubblicita` - Cosa puo` pensare un cliente se non riesce a vedere la pagina? Devi provare le tue pagina anche con i caratteri ingranditi !!)

Pero` ti posso dire come organizzerei quella pagina.
Si tratta di un contenitore (sfondo giallo) contenuto (forse centrato?) nel body (sfondo azzurro) con un bordo nero.
All'interno ci sono due false colonne, che vengono realizzate mediante un'immagine (alta 1 px e larga il necessario) da inserire nel contenitore lasciando uno spazio in alto (basta spostare lo sfondo e farlo iniziare un po' piu` basso). Nota che fino ad ora c'e` solo il <body> ed un solo <div>.

A questo punto va inserito un ulteriore contenitore, per poter sovrapporre alle due false colonne l'ovale giallo e rosa (e` un'unica immagine che contiene i due colori; all'esterno del giallo deve essere trsparente). Il contenitore avra` quindi sfondo trasparente e l'immagine di sfondo come detto.

A questo punto inserisci le due colonne: a sinistra le scritte, a destra la lavatrice.

Poi puoi inserire i tre riquadri gialli, che pero` non possono essere inseriti con i posizionamenti assoluti, perche` questo porta a sovrapposizioni sopra le scritte (o in alternativa a spazi enormi vuoti a seconda delle dimensioni dei caratteri. Ricorda che non hai mezzi per conoscere le dimensioni dei caratteri che usa l'utente: se le definisci, il browser dell'utente puo` sovrascriverle.

A mio parere il riquadro dell'efficienza energetica puo` essere messo nella colonna di destra (centrato nella colonna) sotto la lavatrice, mentre gli altri due possono essere centrati nella pagina alla fine delle due colonne; quindi dev'esserci un elemento con il clear (puo` essere la fine del contenitore degli ovali) ed i riquadri "importante" e delle immagini sono centrati nel blocco che ha le false colonne.

Nota che se vuoi usare i CSS con profitto, devi eliminare TUTTA la formattazione realizzata tramite attributi HTML (e nel tuo codice ne ho vista parecchia).


Nota a margine: E` un po` assurda una pagina in tedesco con i commenti in italiano: a mio parere tutto il codice va scritto in inglese o in tedesco - se io fossi il committente tedesco non accetterei una cosa di quel tipo: il rischio e` che la ditta possa essere ritenuta poco affidabile. Lo stesso vale per il linguaggio usato: non puoi presentarti nel 2009 con una pagina HTML 4.01 transitional. Devi scegliere o XHTML Strict oppure HTML5 (la mia personale preferenza e` per il primo, ma oggi alcuni browser nuovi supportano HTML5).

[fabione_htm]

Grazie per la risposta.

Seguiro i tuoi consigli.Volevo solo aggiungiere che il committente sono io stesso per riprendere una sketch di Bonolis e Laurenti "me la canto e mela sòno" da solo.

>Grazie anora