Riempire tabella di div

**Mattia Campagna** · 16-02-2013, 12:53

codice:

<html>
	<head>
		<title>Snake</title>
		<style type="text/css">
			#campo {
				width:				500px;
				height:				500px;
				background-color:	white;
				border:				thin solid black;
			}
			.cella {
				width:				10px;
				height:				10px;
			}
		</style>
		<script type="text/javascript">
			// riempio il campo di celle vuote
			function inizia() {
				creaCelle();
			}
			
			// crea nuova cella vuota
			function creaCelle() {
				for(var i=0; i<2500; i++) {
					var cella = document.createElement("div");
					cella.setAttribute("class", "cella");
					var img = document.createElement("img"); // creo attributo immagine
					img.setAttribute("src", "vuota.png");
					img.setAttribute("id", i);
					img.setAttribute("alt", i);
					cella.appendChild(img);
					document.getElementById("campo").appendChild(cella);
				}
			}
		</script>
	</head>
	<body onload="inizia()">
		<div id="campo">  </div>
	</body>
</html>

Questa funzione dovrebbe riempire il div "campo" con 2500 div con dentro un'immagine.
Sto cercando di fare uno snake molto semplice.

Purtroppo però non capisco come mai i div mi appaiono tutti uno sotto l'altro e non una accanto all'altro.

**Mattia Campagna** · 16-02-2013, 13:04

Vorrei aggiungere che modificando così il CSS:

codice:

			#campo {
				width:				500px;
				height:				500px;
				background-color:	white;
				border:				thin solid black;
				float:				left;
				border: 			5px solid red;
			}
			.cella {
				width:				10px;
				height:				10px;
				float:				left;
			}

Su chrome è perfetto mentre si IE no.
Ho aggiunto sia a #campo sia a .cella "float: left"

**piesse78** · 16-02-2013, 13:05

i div sono elementi blocco, è giusto che appaiano uno sotto l'altro...

se vuoi gestirne la posizione devi dargli position:absolute e poi assegnare le coordinate a ciascun blocco.

altrimenti gli dai float:left.

**Mattia Campagna** · 16-02-2013, 13:07

Dando float left effettivamente su chrome funziona, ma su IE no.
Come mai?

**Mattia Campagna** · 17-02-2013, 19:00

Nessuno?

Discussione: Riempire tabella di div

Strumenti discussione

Ricerca discussione

Visualizza

Riempire tabella di div

Permessi di invio