Gestione di una mappa

[MezzaSegolas]

Ciao a tutti!
Scrivo per chiedere aiuto, è da un po' che sto pensando a come realizzare una pagina del mio sito, ma non riesco proprio ad arrivarci.
Si tratta della realizzazione di un giochino online, stile browsergame. Ho la mappa di una città divisa per quartieri. Praticamente si clicca sulla zona della mappa e apre una pagina con la mappa del quartiere selezionato. Le pagine dei quartieri volevo realizzarle con una serie di div quadrati messi in ordine in modo da formare un reticolato.

All'interno di ogni div, dovrebbe esserci un immagine. Se la zona del quartiere è vuota dovrebbe esserci uno spazio bianco, se invece la zona è di proprietà di un utente dovrebbe venire fuori l'immagine del profilo dell'utente, se l'utente ha deciso di costruirci una casa dovrebbe esserci l'immagine della casa in questione. Per fare questo avevo pensato di creare una tabella utente_zona che dovrebbe registrare quali zone sono di proprietà degli utenti e, inoltre, dovrebbe registrare che immagine va in quel determinato appezzamento. Il problema è che non so come gestire la mappa dei reticolati. I quartieri dovrebbero avere un numero di caselle variabile, perchè nel momento in cui l'utenza cresce servirà più spazio. Pensavo a questo punto di creare una tabella quartieri, per non mettere tantissime righe pensavo di creare un campo di nome zone e metterci il nome delle varie zone tipo: A1,A2,A3,B1,B2,B3 eccetera creando così un array con explode e stampare poi in ciclo i vari div. Solo che cosi non mi andrebbero a capo..

Qualcuno ha qualche idea?

 

[criric]

Ciao

Solo che cosi non mi andrebbero a capo..

puoi mandare a capo i div con clear:both

in questo modo

$array_zone = array("A1" => "utente_45;1casa;",
    "A2" => "utente_767;terreno",
    "A3" => "utente_39;1_albergo",
    "A4" => "utente_32;terreno",
    "A5" => "vuota;vuota",
    "A6" => "utente_1;3_commerciale",
    "A7" => "vuota;vuota",
    "A8" => "vuota;vuota",
    "A9" => "vuota;vuota",
    "A10" => "utente_264;1_banca",
    "A11" => "vuota;vuota",
    "A12" => "vuota;vuota");
$i = 0;
foreach ($array_zone as $zona => $value) {
    $a_capo = "";
    // ogni 4 div vai a capo
    if ($i % 4 == 0) {
        $a_capo = "clear:both;";
    }
    $i++;
    echo "<div style='float:left; $a_capo text-align:center;width:120px;height:70;border:1px solid #333;'>\n";
    $explode = explode(';', $value);
    echo "Zona $zona <br/>" . $explode[0] . "<br/>" . $explode[1];
    echo "</div>\n";
}

 

[criric]

mmm
l'ho appena testato su alcuni browser

Su Firefox e Chrome funziona


Su Internet explorer no

domani ci guardo meglio

 

[criric]

Soluzione per explorer:

<?php

$array_zone = array("A1" => "utente_45;1casa;",
    "A2" => "utente_767;terreno",
    "A3" => "utente_39;1_albergo",
    "A4" => "utente_32;terreno",
    "A5" => "vuota;vuota",
    "A6" => "utente_1;3_commerciale",
    "A7" => "vuota;vuota",
    "A8" => "vuota;vuota",
    "A9" => "vuota;vuota",
    "A10" => "utente_264;1_banca",
    "A11" => "vuota;vuota",
    "A12" => "vuota;vuota");
$i = 0;

echo "<div style='height:214px;'>";
foreach ($array_zone as $zona => $value) {
    $a_capo = "";
    if ($i % 4 == 0) {
        $a_capo = "clear:both;";
    }
    $i++;
    echo "<div style='$a_capo'>";
    echo "<div style='float:left;text-align:center;width:120px;height:70;border:1px solid #333;'>\n";
    $explode = explode(';', $value);
    echo "Zona $zona";
    echo "</div>\n";
    echo "</div>\n";
}
echo "</div>";
?>

ho dovuto incapsulare il ciclo all'interno di altri due div il primo con altezza fissa. mah!?