Margine variabile in base ai <li> presenti

[marmo79]

Non so se è la sezione appropriata ,visto che per la soluzione forse dovrò ricorrere a javascript, ma volevo sapere anche dal punto di vista dei css se ho scelto l'approccio migliore.
Ho la necessita di disporre ,all'interno di un div, tre differenti liste e vorrei, a seconda degli elementi che compongono ciascuna di queste liste, dei margini diversi:infatti il div contenitore ha come sfondo l'immagine di un campo da calcio e ,ciascuna lista, è formata dall'elenco dei giocatori divisi per ruolo.A seconda del numero di voci di ciascuna lista, vorrei che gli elementi si disponessero in modo ordinato

<div id="campo">
<div id="por">por</div>
<div id="dif"><ul>[*]dif[*]dif[*]dif[*]dif[/list]</div>
<div id="cen"><ul>[*]cen[*]cen[*]cen[*]cen[*]cen[/list]</div>
<div id="att"><ul>[*]att[*]att[*]att[/list]</div>
</div> 

div#campo{width:431px;height:350px;border:2px solid;border-color:#ff9900;background:url(../campo.gif);background-repeat: no-repeat;font-family :Arial;font-size: 11px;}
div#por{margin:130px auto auto auto;width:50px;height:60px;border:5px solid;float:left;text-align:center;}
div#dif{margin:10px auto auto 20px;width:70px;height:240px;border:5px solid;float:left;text-align:center;}
div#cen{margin:10px auto auto 40px;width:70px;height:240px;border:5px solid;float:left;text-align:center;}
div#att{margin:10px auto auto 70px;width:70px;height:240px;border:5px solid;float:left;text-align:center;}
div#dif ul{list-style-type: none;  }
div#dif li{ border:1px solid;}
div#cen ul{list-style-type: none;  }
div#cen li{ border:1px solid;}
div#att ul{list-style-type: none;  }
div#att li{ border:1px solid;} 

[Mich_]

Ritengo si possa fare anche senza JS.
Se vuoi idee, puoi prenderle dai menu, che in linea di massima sono realizzati tramite liste (vedi tra i "link utilil"). Chiaramente nel tuo caso non avrai i link all'interno dei[*].

la tua soluzione e` corretta, anche se si puo` lavorare molto per ottimizzare:

HTML:
<div id="campo">
  <ul id="por">[*]por
  </div>
  <ul id="dif">[*]dif[*]dif[*]dif[*]dif[/list]
  <ul id="cen">[*]cen[*]cen[*]cen[*]cen[*]cen[/list]
  <ul id="att">[*]att[*]att[*]att[/list]
</div>

CSS:
#campo{
  width:431px;
  height:350px;
  border: 2px #f90 solid;
  background: url(../campo.gif) no-repeat;
  font: 11px Arial,sans-sereif;
}

#campo ul {
  list-style-type: none;  
  border:5px solid;
  float:left;
  text-align:center;
}
#campo li{ 
  border:1px solid;
}


#por{
  margin: 130px auto auto auto;
  width:50px;
  height:60px;
}
#dif{
  margin:10px auto auto 20px;
  width:70px;
  height:240px;
}
#cen{
  margin:10px auto auto 40px;
  width:70px;
  height:240px;
}
div#att{
  margin:10px auto auto 70px;
  width:70px;
  height:240px;
}

E` una struttura molto rigida: le misure di margini, larghezze e altezze andrebbero definite in em, altrimenti un minimo ingrandimento dei caratteri come fanno molti browser manda in tilt tutto il layout, con sovrapposizioni orrende delle varie scritte