» Posizioni assolute

donbairo · 19-10-06, 22:36

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 · 20-10-06, 00:27

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 · 20-10-06, 01:15

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 · 20-10-06, 03:03

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:

Codice:

<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 · 20-10-06, 09:51

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 · 20-10-06, 14:34

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:

<div id="boxtemp">

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

<div style="position:absolute; top: 60px; left: 20px; "><?php echo $xxx ; ?></div>

E questo è il risultato ottenuto:
Risultato finale

Grazie mille

massy · 20-10-06, 16:34

Ottimo

19-10-06, 22:36	#1 (permalink)
donbairo User Data di registrazione: May 2006 Ubicazione: Lucca Messaggi: 296	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
	__________________ Appartamenti Kiev

20-10-06, 00:27	#2 (permalink)
massy User Attivo Data di registrazione: Mar 2006 Ubicazione: Pico Messaggi: 1,014	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
	__________________ Manie Grafiche

20-10-06, 01:15	#3 (permalink)
donbairo User Data di registrazione: May 2006 Ubicazione: Lucca Messaggi: 296	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
	__________________ Appartamenti Kiev Ultima modifica di donbairo : 20-10-06 01:18.

20-10-06, 03:03	#4 (permalink)
massy User Attivo Data di registrazione: Mar 2006 Ubicazione: Pico Messaggi: 1,014	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: Codice: <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>
	__________________ Manie Grafiche

20-10-06, 09:51	#5 (permalink)
donbairo User Data di registrazione: May 2006 Ubicazione: Lucca Messaggi: 296	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
	__________________ Appartamenti Kiev

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

20-10-06, 14:34	#6 (permalink)
donbairo User Data di registrazione: May 2006 Ubicazione: Lucca Messaggi: 296	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: <div id="boxtemp"> all'interno di questo div ho iserito i div per i punti precisi dell'oggetto <div style="position:absolute; top: 60px; left: 20px; "><?php echo $xxx ; ?></div> E questo è il risultato ottenuto: Risultato finale Grazie mille
	__________________ Appartamenti Kiev

20-10-06, 16:34	#7 (permalink)
massy User Attivo Data di registrazione: Mar 2006 Ubicazione: Pico Messaggi: 1,014	Ottimo
	__________________ Manie Grafiche

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email