Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Riempire tabella di div

    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.

  2. #2
    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"

  3. #3
    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.

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

  5. #5
    Nessuno?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.