Non riesco a capire cosa vuoi ottenere.
Reputo che ci siano delle incongruenze tra quanto ho capito e quel codice.
Pero` quando si programma occorre usare un metodo per capirci meglio: noi umani non siamo computer, ed abbiamo bisogno di ausili grafici.
Inoltre nel codice ci sono molti erorri di sintassi, per cui qualche browser potrebbe arrabbiarsi e fare di testa sua.
Ecco come va impostato il codice HTML (nota le indentazioni, le virgolette ed i commenti):
codice:
<div id="campo">
<div class="por">
<dl>
<dt>[img]img...[/img]</dt>
<dd>Portiere1</dd>
</dl>
</div>
<div class="dif">
<dl>
<dt>[img]img...[/img]</dt>
<dd>Difensore1</dd>
</dl>
<dl>
<dt>[img]img...[/img]</dt>
<dd>Difensore2</dd>
</dl>
....
</div>
<div class="cen">
<dl>
<dt>[img]img...[/img]</dt>
<dd>cenensore1</dd>
</dl>
....
</div>
</div>
Poi si passa al CSS.
Ma occorre fare una cosa razionale.
Anzitutto noto che hai tutto misure fisse: a quel punto si puo` "centrare" anche mediante margini opportuni: e` piu` semplice, se hai un numero di oggetti variabile in ogni riga.
Altrimenti si puo` centrare un oggetto in uno piu` grande, ma oggetti flottanti non possono essere centrati: o flottano o hanno margini opportuni; le due cose assieme non vanno.
Quindi dovresti centrare i vari <div class="por">, "dif", "cen", che dovranno essere larghi per contenere tutti i loro float.
In grassetto le modifiche mie:
codice:
#campo {
width:350px; /* andrebbero usati gli em per le dimensioni orizzontali */
height:431px;
overflow:auto; /* perche`? Mi pare che sia da evitare */
background:url(../campo.gif) no-repeat;
}
#campo div {
margin: 0 auto; /* questo dovrebbe centrare i vari blocchi */
}
#campo div:after {
width: 100%;
clear: left; /* questo e` importante se vuoi che la cosa funzioni */
.... vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float */
}
#campo dl {
float:left;
width:80px; /* questo e` pericoloso: conviene dimensionare in em */
height:60px; /* idem */
text-align:center;
color: #555;
border:1px solid;
}
#campo dt {
/*padding: 5px 0 0; /* perche` il padding che in IE e` interpretato male? */
margin: 0 auto; /* centra all'interno del dt */
height: 1.2em;
line-height: 1.2;
}
#campo dd { /* va definito anche questo */
margin: 0 auto; /* centra all'interno del dt */
height: ...; /* conviene mettercela per avere uniformita` di altezze */
}
#campo img {
display:block;
/*margin:0 auto; /* probabilmente non serve (e` gia` nel dd ) */
margin: 5px 0 0 0; /* al posto del padding del dt */
border:1px inset #CCC;
width:35px;
}
#campo dd {
margin:0;
padding: 2px 1px 0px;
}
/*Nelle definizioni seguenti puoi definire caratteristiche diverse per i vari ruoli: ad esempio sfondi.
Se possibile non usare bordi, che danno problemi con IE.
Se usi le larghezze, devono essere multipli della larghezza del singolo ul
Qui puoi anche impostare margini sinistri per centrare i vari blocchi (al posto dei margini automatici del #campo div*/
.por{width:100%;border:3px solid;}
.dif{margin-top:100px;width:350px;}
.cen{margin-top:100px;width:350px;}
.att{margin-top:100px;width:350px;}
Rispondi quotando