Salve a tutti ragazzi! Sto realizzando un sito per la festa della pizza e della birra del mio paese, ho necessità di creare una mappa della mia regione da cui provengono gli ingredienti delle pizze che prepariamo. In photoshop ho creato una cartina della regione con le frecce che indicano da dove vengono i prodotti, sul sito voglio aggiungere una piccola immagine accanto alla freccia corrispondente con una piccola descrizione del produttore (magari questa avevo pensato di farlo anche tramite una finestra che compare se il mouse si trova nella posizione della immagine), per fare ciò ho bisogno che ogni immagine stia SEMPRE in corrispondenza della freccia giusta. Ho usato un modulo di Joomla per l'HTML avanzato in modo che mi permettesse di lavorare completamente in HTML e CSS, quindi inserico l'immagine e gli assegno la regola CSS per il posizionamento solo che quando vado a ridimensionare la finestra del browser le immagini si spostano e si crea un casino.
Posto il mio codice di esempio:
(HTML)
<div class="ingredientetext">Descrizione ingrediente</div>
<div class="ingrediente"><p><img src="Immagine da utilizzare" height="50" width="100" /></p></div>
(CSS)
.ingrediente{
position: absolute;
top: auto;
right: 40%;
}
.ingredientetext{
position: absolute;
top: 340px;
right: 480px;
}
premetto che ho usato sia i valori in percentuale sia quelli in px ma non funziona. Come risolvere?
Grazie mille a tutti per le risposte
