Posizioni assolute

donbairo

Posizioni assolute

Ciao a tutti
ho un problemetto e credo di poter risolvere con i css ma non ne sono sicuro

Devo posizionare degli oggetti formato gif o jpg o testo in una immagine ma questi oggetti vengono caricati dal database.
Io ho pensato di mettere questa immagine come immagine di sfondo poi posizionare gli oggetti, sapete indicarmi come fare?
Ovvero so che con i css posso posizionare dei box in posizioni assolute ma non so con 10 piccole immagini in una stessa pagina e 10 numeri in testo.

grazie

Edit: messaggio numero 50 cin cin auguri, grazie, prego

massy

Puoi mettere la prima immagine con posizione relativa, metterci l'altro oggetto sopra con posizione assoluta usando uno z-index più alto

Se non si è capito fa' un fischio che buttiamo giù un po' di codice

donbairo

Ciao massy
sai io sono un "intopatore" e ci devo battere il naso altrimenti non capisco e non imparo:

ho fatto una cosetta così che fino a questo funziona:

#boxtemp {
overflow: auto;
position: relative;
left: 0px;
top: 0px;
width: 280px;
height: 320px;
background: url(../immagini/italia-temp.jpg);
}

ovvero mi mette sullo sfondo l'immagine che mi serve, questo box grande esattamente come l'immagine, l'ho posizionato in un punto della pagina e per adesso tutto bene.

adesso penso di fare una cosa del genere:

siccome il box è in una tabella di misure esatte io pennso che se inserisco tra i tag <td> e in ogni caso dentro il div id tante righe tipo:
<div style="position:absolute; top: <xxx>; left: <yyy>; "><?php echo Variabile ; ?></div>

dovrebbe funzionare no?

questo ancora non l'ho provato perchè sono alle prese con recuperare le variabili da un database

saluti

massy

Se metti sempre lo stesso valore te li mette uno sopra l'altro

se fai con php e supponendo che devi mettere 10 box da 28px l'uno:


<html>
    <head>
        <style type="text/css">
            #boxtemp { overflow: auto; position: relative; left: 0px; top: 0px; width: 280px; height: 320px; background: red; }
            .box {position:absolute; background:#EEE; width:28px; top:0; }
        </style>
    </head>
    <body>
        Bla bla bla
        <hr />
        <div id="boxtemp">
<?php 
            $Variabile="pip";
            for ($i=0;$i<10;$i++) {
                echo "\t\t\t<div class=\"box\" style=\"left:".($i*28)."px; \">".$Variabile."</div>\n";
            }
?>
        </div>
    </body>
</html>

donbairo

Grazie massy

ma non devo mettere mai lo stesso valore, sono 19 punti diversi con 19 variabili diverse e devo pure fare un punto preciso della immagine ogni valore,

per spiegarti meglio:
l'immagine di fondo è l'Italia
i valori che cambiano a seconda del valore nel db sono le temperature attuali
la posizione sono le città più importanti quindi xxx e yyy cambiano per ogni valore perchè la posizione sulla immagine è diversa.
Il tuo codice (peraltro interessante) mi poneva tot box nel box principale ma senza una posizione assoluta (credo).
è un mondo difficile....
Ciao

donbairo

Allora tutto risolto
questo il codice utilizzato:

per costruire il box e inserire l'immagine di fondo che mi funziona da mappa:

#boxtemp {
overflow: auto;
position: relative;
left: 0px;
top: 0px;
width: 280px;
height: 320px;
background: url(folder/immagine.jpg);
}

inserito nel file css del sito

ho inserito il box in una tabella in questo modo:

all'interno di questo div ho iserito i div per i punti precisi dell'oggetto

E questo è il risultato ottenuto:
[url=http://www.meteosatonline.it/index.php]Risultato finale

Grazie mille

massy

Ottimo