scacchiera con i css

**pietro09** · 12-03-2007, 12:11

Sto cercando di imparare i css.
Vorrei riunire 9 div di 100 px in altezza e larghezza bordati, in una scacchiera di 3x3

Mi date una mano col file css? :master:

**pietro09** · 13-03-2007, 10:21

Qualcuno mi può dire dove sbaglio? Vedo bene in IE7, male in Firefox2 e Opera9

<span>prima</span>
<div class="generale" style="float:left;">11</div>
<div class="generale" style="float:left;">12</div>
<div class="generale" >13</div>
<div class="generale" style="float:left;">21</div>
<div class="generale" style="float:left;">22</div>
<div class="generale">23</div>
<div class="generale" style="float:left;">31</div>
<div class="generale" style="float:left;">32</div>
<div class="generale">33</div>
<span>dopo</span>

la classe è:

.generale
{
position: relative;
border: 1px red solid;
width:50px;
height:50px;
}

**fcaldera** · 13-03-2007, 10:35

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>xhtml 1.0</title>
    
        <style>
        #scacchiera {
            width       : 300px;
            height      : 300px;   
        }
        
        #scacchiera div {
            float       : left;
            width       : 98px;
            height      : 98px;
            border      : 1px solid #767676;
        }

        </style>
    </head>

<body>

    <div id="scacchiera">

        <div>11</div>
        <div>12</div>
        <div>13</div>

        <div>21</div>
        <div>22</div>
        <div>23</div>

        <div>31</div>
        <div>32</div>
        <div>33</div>

    </div>

</body>
</html>

**Mich_** · 13-03-2007, 10:36

Mi sa che per una scacchiera, la cosa migliore e` usare una bella tabella ... c'e` relazione di riga e di colonna: non usare una tabella e` un errore semantico.

Comunque devi racchiudere ciascuna "riga" in un blocco, altrimenti non hai modo di farlo andare a capo dove vuoi tu.

Nel tuo esempio ti manca il float:left nelle "celle" 13, 23 e 33, e ti manca il clear:left nelle celle 21 e 31 (in alternativa a racchiudere ciascuna riga in un div - in tal caso il <div> di riga deve avere il clear)

Inoltre il position fai meglio a dimenticarlo (non mettercelo proprio), salvo casi molto particolari, che imparerai quando padroneggi il resto dei CSS.

**pietro09** · 13-03-2007, 10:43

Nel ringraziarvi delle risposte,

chiarisco che sto cercando di studiarmi i css con la guida di HTML.it. Ho fatto un esempio banale, solo a scopo didattico ed ho trovato già differenze enormi tra i tre browser su menzionati. Mi stampo le vostre risposte e provo a studiarle e capirle e metterle in pratica. Ciao.

**pietro09** · 13-03-2007, 10:55

Ebbene, ho visto per prima la soluzione di fcaldera. Corregimi se sbaglio. :master: Tutti i div hanno float=left, perciò gli elementi che seguono vengono messi alla sua destra. L'effetto scacchiera si ottiene restringendo il contenitore.
La domanda è: è possibile fare questo senza modificare il contenitore e senza usare il posizionamento assoluto?

la mia idea, che funziona solo con IE7 era:

il primo div ha float=left, perciò mette il secondo div alla sua destra
il secondo div ha float=left, perciò mette il terzo div alla sua destra
il terzo div non ha float, perciò il prossimo div si mette sotto...

**Mich_** · 13-03-2007, 11:02

il primo div ha float=left, perciò mette il secondo div alla sua destra
il secondo div ha float=left, perciò mette il terzo div alla sua destra
il terzo div non ha float, perciò il prossimo div si mette sotto...

Le prime due righe sono corrette, la terza no.
Per "chiudere" il float devi inserire un clear.

Forse il mio intervento e` un po' confuso: ho voluto dire tre cose, quando ne sarebbe bastata una.

Lascia il float a tutti i blocchi, ma in quelli della prima colonna mettici anche il clear.

Poi ci vorra` un blocco per chiudere il tutto (un blocco largo 100%, alto un px, vuoto, senza bordi, con il clear) prima della fine del blocco "scacchiera"

**pietro09** · 13-03-2007, 11:14

codice:

    <span>prima</span>
    <div>
        <div class="generale l" >11</div>
        <div class="generale l" >12</div>
        <div class="generale l" >13</div>
        <div class="generale cl l" >21</div>
        <div class="generale l" >22</div>
        <div class="generale l">23</div>
        <div class="generale cl l" >31</div>
        <div class="generale l" >32</div>
        <div class="generale l">33</div>
        <div class="cl" style="height:1px; width:100%"></div>
    </div>
    <span>dopo</span>

codice:

.generale
{
	border: 1px red solid;
	width:50px;
	height:50px;
}

.l
{
	float:left;
}

.cl
{
	clear:left;	
}

Questo funziona benissimo con Firefox2 ed Opera9, ma non funziona con IE7

:master:

**pietro09** · 13-03-2007, 11:56

Non ditemi che non metto a frutto i vostri consigli: questo funziona coi tre browser su menzionati

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>
    <title>Pagina senza titolo</title>
    <style type="text/css">
        body
        {
	        font-family: Verdana;
        }


        .generale
        {
	        border: 1px red solid;
	        width:50px;
	        height:50px;
        }

        .l { float:left; }

        .cl { clear:left; }

        .ms { margin-left:-1px;	}

        .mt { margin-top: -1px; }
    </style>

</head>
<body>
    <span>prima</span>
    <div>
        <div>
            <div class="generale l" >11</div>
            <div class="generale l ms" >12</div>
            <div class="generale l ms" >13</div>
        </div>
        <div>
            <div class="generale cl l mt" >21</div>
            <div class="generale l mt ms" >22</div>
            <div class="generale l mt ms">23</div>
        </div>
        <div>
            <div class="generale cl l mt" >31</div>
            <div class="generale l mt ms" >32</div>
            <div class="generale l mt ms">33</div>
        </div>
        <div class="cl" style="height:1px; width:100%"></div>
    </div>
    <span>dopo</span>
</body>
</html>

Discussione: scacchiera con i css

Strumenti discussione

Ricerca discussione

Visualizza

scacchiera con i css

Permessi di invio