Posizionare delle immagini all'interno di un div e renderele fisse!!!

[robytotem]

Ciao a tutti, vi chiedo umilmente aiuto visto che non sono espertissimo...

Ho creato una pagina con due div (principale-home e toolbar), uno più grande (che contiene l'immagine di una piantina di una casa e delle immagini di lampadine dislocate nella mappa), e uno piccolo che contiene dei pulsanti. Il mio problema è che quando ridimensiono la pagina del browser le lampadine rimangno statiche nella loro posizione mentre correttamente la mappa si ridimensiona: parto dal principio che un div che contiene degli altri div deve essere posto in position:relative mentre il div contenuto in absolute...non so se sia giusto o no...

Questo è il codice html della pagina:

---------------------------------------------------------
<div id="principale-home">

<img id="piantina" src="img/Home.jpg"/>

<div id="quadretto" style="margin-top:-440;margin-left:667;"><a href="#" onClick="xxx"><img src="img/bulb-off.png" id="L1" /></a></div>

</div>

<div id="toolbar"><a href="home.htm"><img class="bottoni" src="img/button/home.jpg"/></a>...ecc....</div>
---------------------------------------------------------

e questa è una parte del css che interessa:

#piantina {
max-height:83%;
margin:3px;
text-align: center;
}

#principale-home{
width: 100%;
max-height:83%;
position:relative;
text-align: center;
border-color: #11adf3;
border-style: solid;
border-width: 2px;
}

#quadretto {
width:7%;
float:left;
position:absolute;
}

#quadretto img {
width:40%;
margin:0;
padding:0;
}

.bottoni {
margin-left:15px;
width:7%;
}

#toolbar {
width: 100%;
margin-top:3px;
position:relative;
float: left;
border-style:solid;
border-width:2px;
border-color:#ff0000;
}

ecco un esempio banale



spero mi possiate dare una mano perché è una cosa molto importante per me...

grazie

[carlomarangoni]

Perchè non inserisci le lampadine nell'immagine della mappa?

[robytotem]

scusa, in effetti ho dimenticato di scrivere che l'immagine della lampadina varia in base al fatto che la lampadina è accesa o spenta...cioè cambia immagine!!! Il cambio immagine avviene dopo un if...

[Mich_]

Non vedo il posizionamento delle lampadine nella mappa, ma immagino che hai usato posizioni in px rispetto all'angolo della mappa.

Chiaramente se l'immagine della mappa si ridimensiona, la posizione delle lampadine deve essere espressa in %.

In alternativa devi dare dimensioni in px anche per la mappa (e permettere lo scorrimento se la finestra e` piu` piccola)

[robytotem]

Non vedo il posizionamento delle lampadine nella mappa, ma immagino che hai usato posizioni in px rispetto all'angolo della mappa.

Chiaramente se l'immagine della mappa si ridimensiona, la posizione delle lampadine deve essere espressa in %.

In alternativa devi dare dimensioni in px anche per la mappa (e permettere lo scorrimento se la finestra e` piu` piccola)

ciao, come no??

<div id="quadretto" style="margin-top:-440;margin-left:667;"><a href="#" onClick="xxx"><img src="img/bulb-off.png" id="L1" /></a></div>

le lampadine stanno dentro i div "quadretto" e si ridimensionano correttamente...è la posizizone il mio problema quando ridimensiono la pagina del browser, non la loro dimensione!!!

[Mich_]

OK. Non avevo capito che "quadretto" fosse il posto della lampadina.

Comunque quel margin ha un errore (grave) di sintassi: qualche browser non capisce se non metti le unita` di misura.
Quindi tu intendevi:

  margin-top: -440px;
  margin-left: 667px;

Prova a trasformare quelle misure in px in %

PS: se puoi evita di usare gli stili in linea: meglio usare gli stili nel CSS.
Questo ti aiuta a tenere pulito il codice (e a trovare gli errori piu` facilmente).

E tieni presente che il nome "quadretto" del blocco che contiene la lampadina e` non-semantico (io pensavo che fosse la posizione del quadro elettrico, e non ci ho guardato dentro)

[robytotem]

OK. Non avevo capito che "quadretto" fosse il posto della lampadina.

Comunque quel margin ha un errore (grave) di sintassi: qualche browser non capisce se non metti le unita` di misura.
Quindi tu intendevi:

  margin-top: -440px;
  margin-left: 667px;

Prova a trasformare quelle misure in px in %

PS: se puoi evita di usare gli stili in linea: meglio usare gli stili nel CSS.
Questo ti aiuta a tenere pulito il codice (e a trovare gli errori piu` facilmente).

E tieni presente che il nome "quadretto" del blocco che contiene la lampadina e` non-semantico (io pensavo che fosse la posizione del quadro elettrico, e non ci ho guardato dentro)

ciao sì scusami, col copia incolla mi sono sfuggiti i px ma ci sono!!!

inoltre hai ragione sul codice inline ma se ogni lampadina ha una posizione diversa, mica potevo fare una classe per ognuna...non aveva senso...

ho provato pure in percentuale...nulla da fare!!! La mappa di sfondo si ridimensiona regolamente mentre le lampadine si spostano in modo "solidale" col ridimensionamento della finestra...invece di rimanere lì fisse dove cacchio le ho messe io!!!!

ho provato pure col tag "left: xx%; "

ma non va oppure non l'ho configurato al meglio...ho messo il left in % e il margin top in px...al ridimensionamento l'altezza rimane corretta...ma la lampadina si sposta a destra rispetto al ridimensionamento...

forse dovrei impostare uno z-index diverso tra la piantina e le lampadine??? o non c'entra nulla??

[Mich_]

Attenzione a non confondere id e class.
L'Id deve essere unico in una pagina. Invece class ce ne possono essere piu` di una.
Il posizionamento di un oggetto che si ripete con stile inline puo` essere accettabile, anche se a me personalmente non piace.

Nel tuo caso io farei una cosa di questo tipo:

HTML:
<div id="principale-home">
  <img id="piantina" src="img/Home.jpg" />     
  <div class="quadretto" id="cL1">
    <a  href="#" id="L1" onClick="switch('cL1');">  
      <img src="img/bulb-off.png"  />
    </a>
  </div>
...
</div>

CSS
#principale-home{
  ...
  position:relative;
}

.quadretto {
       width: 7%;
       position: absolute;
}
 
.quadretto img {
  width:40%;
  margin:0;
  padding:0;
}

#cL1:
  left: 30%;   /* queste dimensioni si riferiscono al blocco #principale-home, che ha posizionam. relativo */
  to: 20%;
}

[robytotem]

ciao grazie per la risposta...

cmq di fatto rispetto al mio codice hai tolto il float:left in

.quadretto {
width: 7%;
position: absolute;
}

il resto mi sembra uguale...

e poi questo credo volessi scrivere:

#cL1:
left: 30%; /* queste dimensioni si riferiscono al blocco #principale-home, che ha posizionam. relativo */
top: 20%;
}

e #cL1 fa riferimento al quadretto che contiene la lampadina...

cmq purtroppo ho fatto il test con IE e Firefox ma purtroppo le lampadine si spostano sempre...

se ti va, posso inviarti il file in privato così lo vedi meglio...scusa se ti disturbo ma ormai sto impazzendo con questa cosa che deve purtroppo risolvere...

grazie

[Mich_]

Il file in privato preferirei di no: piuttosto metti la pag in rete (se non sai come, ci sono indicazioni nel regolamento di sezione) e posta il link qui.

Ho tolto il float, perche` non ne vedo l'utilita` in quel contesto.

Si` il top era un errore (il p e` rimasto nella tastiera).

Pero` le posizioni devono essere positive; non ha senso una posizione negativa in quel contesto (se e` necessario, vuol dire che c'e` un errore nei position, o da qualche altra parte)