Griglia formata di div

**Neptune** · 13-10-2008, 19:02

Vorrei poter fare una griglia di div grandezza 35x35px formata da 7 righe e 7 colonne.
Come posso fare? avevo iniziato con questo codice per fare la prima riga ma invece di mettermi i quadratini uno accanto all'altro me li mette uno sotto l'altro!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#11 {
	width:35px;
	height:35px;
	float: left;
}
#12 {
	width:35px;
	height:35px;
	float: left;
}
#13 {
	width:35px;
	height:35px;
	float: left;
}
#14 {
	width:35px;
	height:35px;
	float: left;
}
#15 {
	width:35px;
	height:35px;
	float: left;
}
#16 {
	width:35px;
	height:35px;
	float: left;
}
#17 {
	width:35px;
	height:35px;
	float: left;
}
#mappa {
	width:800px;
	height:800px;
	}
-->
</style>
</head>

<body>
<div id="Mappa">Content for  id "Mappa" Goes Here
<div id="11">a</div>
<div id="12">a</div>
<div id="13">a</div>
<div id="14">a</div>
<div id="15">a</div>
<div id="16">a</div>
<div id="17">a</div>
</div>
</body>
</html>

Vi ringrazio in anticipo per i consigli,
Neptune.

**fcaldera** · 13-10-2008, 21:41

gli attributi 'name' e 'id' NON possono iniziare con una cifra: non ha poi senso assegnare degli id diversi che abbiano regole identiche. Puoi sfruttare la gerarchia dei nodi

cambia il codice così

codice:

<div id="mappa">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div> 
   <div>5</div>
   <div>6</div>
   <div>7</div>
</div>

e il codice CSS così

codice:

#mappa {
   width:800px;
   height:800px;
}

#mappa div {
   float: left;
   width: 35px;
   height: 35px;
}

**Neptune** · 13-10-2008, 23:15

Ma se volessi fare altre righe sotto quella come posso fare?

Inoltre io li numeravo in modo da usarli come contenitori in cui salvare dei dati presi da un database. A quel punto tramite dei cicli dicevo "nel campo di coordinate 11 scrivi questo".

In quel caso come faccio a richiamarli più in la nel codice?

**fcaldera** · 13-10-2008, 23:17

continui ad inserire div lì dentro

quando un div raggiungerà la larghezza del contenitore (a occhio e croce al 22-esimo) il successivo scenderà sotto a sinistra

**Neptune** · 13-10-2008, 23:20

Originariamente inviato da fcaldera
continui ad inserire div lì dentro

quando un div raggiungerà la larghezza del contenitore (a occhio e croce al 22-esimo) il successivo scenderà sotto a sinistra

Stavo giusto editando per chiederti come faccio poi ad inserire delle altre informazioni in quei div. Perchè dandogli un id diverso poi potevo richiamare quei contenitori in ogni parte del codice.

**fcaldera** · 13-10-2008, 23:25

a quel punto assegna anche un id ai vari div (magari solo quelli che ti servono) purché inizino con una lettera
ma il css non cambia

**Neptune** · 13-10-2008, 23:35

Originariamente inviato da fcaldera
a quel punto assegna anche un id ai vari div (magari solo quelli che ti servono) purché inizino con una lettera
ma il css non cambia

Non capisco, come faccio a dare un id ai vari div lasciando i css invariati?

**fcaldera** · 13-10-2008, 23:54

perchè tu lo stile ai div interni (tutti i div interni) lo dai con la regola

#mappa div {
...
}

se il meccanismo dei float funzionava nell'esempio di prima in cui gli id non c'erano
funzionerà anche dopo che ne assegni ai div

chiaro che se poi devi agiungere ALTRO stile (ad es. vuoi dare uno sfondo blu al 19esimo div) ti crei una regola
del tipo

#div19 {
background: blue;
}

**Neptune** · 14-10-2008, 00:14

Originariamente inviato da fcaldera
perchè tu lo stile ai div interni (tutti i div interni) lo dai con la regola

#mappa div {
...
}

se il meccanismo dei float funzionava nell'esempio di prima in cui gli id non c'erano
funzionerà anche dopo che ne assegni ai div

chiaro che se poi devi agiungere ALTRO stile (ad es. vuoi dare uno sfondo blu al 19esimo div) ti crei una regola
del tipo

#div19 {
background: blue;
}

Ho provato a fare una cosa del genere, ma mi crea lo stesso "due campi diversi" anche se mi riferisco sempre all'ID "C11". E' che sono un pò novizio, potresti farmi un esempio concreto?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#mappa {
   width:245px;
   height:245px;
}

#mappa div{
   float: left;
   width: 35px;
   height: 35px;
}
-->
</style>
</head>

<body>
<div id="mappa">
   <div id="C11"> 1</div>
   <div id="C11">1</div>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div> 
   <div>5</div>
   <div>7</div>
</div>

</body>
</html>

**fcaldera** · 14-10-2008, 09:25

se spieghi concretamente anche che cosa vorresti ottenere oltre ad affiancare i blocchi sarebbe meglio

comunque, in una pagina l'id dev'essere unico. Non puoi usare lo stesso id su più elementi, in quel caso usi una classe

codice:

<div class="C11"> 1</div>
<div class="C11">1</div>

e assegni uno stile con

codice:

.C11 {
   ...
}

Discussione: Griglia formata di div

Strumenti discussione

Ricerca discussione

Visualizza

Griglia formata di div

Permessi di invio