Inserire Testo e altre domandine

[Luigi_XVI]

Ciao a tutti
Volevo farvi due domandine, premettendo che dovrà uscire una cosa tipo questa:



E' un modulo di calciatori, lo vorrei fare per un mio piccolo torneo In poche parole, vorrei:
Scrivere un elenco di abilità (circa 50) al cui fianco di ognuna ci sia un' area di testo, piccola abbastanza per inserire SOLO due cifre. Da 1 a 99
Mettere le caselline SPUNTA (con la v) affianco ad ogni ruolo (POR, DC, CC, AT ecc.ecc.).
Un' area di testo grande per scrivere il nome e la descrizione del calciatore.
E sotto a tutto a destra, sempre con la casella spunta, le abilità speciali.
Un' ultima piccola cosa, sempre se possibile, il testo nelle caselle delle abilità (le prime) deve cambiare colore a seconda del valore che si immette. Es: se metto da 1 a 70, sarà bianco. Se metto da 70 a 80, sarà giallognolo. Da 80 a 90 giallo acceso, da 90 a 95 arancione, da 95 a 99 rosso. Sempre se possibile, eh!

Credo di essermi spiegato bene, cercate di aiutarmi, non so proprio che fare

[aleritty]

Direi questo:

http://xhtml.html.it/guide/leggi/51/guida-html/

Questo

http://javascript.html.it/guide/legg...cript-di-base/


Ed anche questo se vuoi memorizzare i dati da qualche parte:

http://php.html.it/guide/leggi/101/guida-php-pratica/

ma solo perchè sono di fretta, sennò un paio di esempi te li buttavo giu...

[Luigi_XVI]

Ok, ora leggo un pò e vedo che riesco a combinare

[Luigi_XVI]

Allora, procediamo con calma
E' tutto scritto nell' img

Quindi ricapitolando:
Non sono riuscito a capire come posizionare il testo in determinati punti; come cambiare colore in una casella di testo quando si scrive una determinata cosa; allineare le caselle di testo una sotto all' altra.
Poi, un' ultima cosa. Le abilità sono troppe (non sono solo quelle dell' immagine) e vorrei fare in modo che il lavoro occupi una pagina sola. Quindi, vorrei posizionare il testo delle abilità TATTICHE affianco a quelle OFFENSIVE (per esempio), si può?

[aleritty]

Allora, si può con il CSS!
Per allineare come vuoi hai due metodi, o posizioni in modo absolute il div contenente il testo (e metti delle coordinate che vadano sempre bene) oppure usi i parametri float e clear (che però non leggono perfettamente tutti i browser!)
Con absolute puoi specificare per ogni div (quindi ogni "riguadro" che tu definisci cosa contenga) la distanza dall'alto (parametro top) e la distanza dal lato destro e/o sinistro (parametri left e right)

Questo senza usare le tabelle... (che è meglio stilisticamente)
Se invece te ne freghi dello stilistico, e vuoi le cose semplici prendi e fai una tabella html e nelle celle ci metti quello che vuoi (a quel punto per allineare diventa una cavolata no?)

Per colorare le caselle di testo usa background o background-color specificando il codice esadecimale del colore!

[Myaku]

Originariamente inviato da aleritty
oppure usi i parametri float e clear (che però non leggono perfettamente tutti i browser!)

ovvero?

[gabip87]

Originariamente inviato da aleritty

Per allineare come vuoi hai due metodi [..]

in certi casi puoi giocare anche con il display: inline/block.

float e clear (che però non leggono perfettamente tutti i browser!)

qui sono curioso pure io, mi metto in coda

Questo senza usare le tabelle... (che è meglio stilisticamente)

semanticamente. lo stile è 'naltracosa.



ps: niente di personale eh

[Luigi_XVI]

Allora, alla tabella non c' avevo proprio pensato, e sicuramente è quello che farò. Ma quello che voglio creare io è un generatore di calciatori VVoVe:
In cui la persona dovrà immetere un numero da 1 a 99 nei riquadri, e se il numero è 98 (per esempio) il font con il testo '98' cambia colore in rosso
Solo questo non ho capito bene... poi per le caselle di spunta, ho quasi capito come si fa, sto leggendo la guida

[Luigi_XVI]

Ragà, allora, sono riuscito a fare una cosa schifosa, ma abbastanza utile.

<div style="position:absolute; top:310px; right:20px;">
<textarea name="testo" rows="5" cols="40">
Nome e Descrizione del Calciatore
</textarea>
</div>









<table width="100%" border="1">
<thead>

<tr>
<th width="20%">Offensive</th>
<th width="1%">Valore</th>
<th width="20%">Difensive</th>
<th width="1%">Valore</th>
<th width="20%">Tecniche</th>

<th width="1%">Valore</th>
<th width="20%">Altre</th>
<th width="1%">Valore</th>


</tr>
</thead>
<tr>
<td width="15%">Attitudine Offensiva</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Attitudine Difensiva</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Tecnica</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Resistenza</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Potenza Tiro</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Rubare Palla</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Punizioni</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Colpi di Testa</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Precisione Tiro</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Tackle</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Rigori</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Elevazione</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Dribbling</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Contrasti</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Impegno</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Equilibrio</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Controllo Palla</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Marcatura</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Lanci Lunghi</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Agilità</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Inserimenti</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Anticipo</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Cross</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Acume Tattico</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Finalizzazione</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Forza Fisica</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Passaggi</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Gioco di Squadra</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Velocità</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Determinazione</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Tecnica Tiro</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Temperamento</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>
<td width="15%">Accelerazione</td>

<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Freddezza</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Fantasia</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
<td width="15%">Aggressività</td>
<td width="1%"><input name="mioTesto" type="text" value="NN" size="1" maxlength="2"/></td>
</tr>


</table>







<form action=ìì>
<fieldset>
<legend>Ruoli</legend>

<input type="checkbox" name="POR" value="html"/> <font color=yellow>POR



<input type="checkbox" name="css" value="css"/> <font color=blue>DC <input type="checkbox" name="css" value="css"/> TERD <input type="checkbox" name="css" value="css"/> TERS <input type="checkbox" name="css" value="css"/> LIB

<input type="checkbox" name="javascript" value="javascript"/> <font color=green>MED <input type="checkbox" name="javascript" value="javascript"/> MD <input type="checkbox" name="javascript" value="javascript"/> MS <input type="checkbox" name="javascript" value="javascript"/> CC <input type="checkbox" name="javascript" value="javascript"/> CD <input type="checkbox" name="javascript" value="javascript"/> CS <input type="checkbox" name="javascript" value="javascript"/> ED <input type="checkbox" name="javascript" value="javascript"/> ES <input type="checkbox" name="javascript" value="javascript"/> TRQ
<input type="checkbox" name="javascript" value="javascript"/><font color=red> P <input type="checkbox" name="javascript" value="javascript"/> SP <input type="checkbox" name="javascript" value="javascript"/> AD <input type="checkbox" name="javascript" value="javascript"/> AS
<input type="checkbox" name="javascript" value="javascript"/><font color=black> JOD <input type="checkbox" name="javascript" value="javascript"/> JOF <input type="checkbox" name="javascript" value="javascript"/> JOL

</fieldset>
</form>
<form action=ìì>
<fieldset>
<legend>Abilità Speciali</legend>

<input type="checkbox" name="POR" value="html"/> Dribblatore
<input type="checkbox" name="css" value="css"/> Tiro dalla Distanza <input type="checkbox" name="css" value="css"/> Centrale <input type="checkbox" name="css" value="css"/> Fasciaiolo <input type="checkbox" name="css" value="css"/> Arrabbiato

<input type="checkbox" name="javascript" value="javascript"/> Calma <input type="checkbox" name="javascript" value="javascript"/> Eroe della Curva <input type="checkbox" name="javascript" value="javascript"/> Stacanovista <input type="checkbox" name="javascript" value="javascript"/> Pigro <input type="checkbox" name="javascript" value="javascript"/> Portiere Papera <input type="checkbox" name="javascript" value="javascript"/> Super Portiere <input type="checkbox" name="javascript" value="javascript"/> Scivolata Efficace <input type="checkbox" name="javascript" value="javascript"/> Adattabile <input type="checkbox" name="javascript" value="javascript"/> Flessibile <input type="checkbox" name="javascript" value="javascript"/>Inflessibile <input type="checkbox" name="javascript" value="javascript"/> Fiuto del Gol <input type="checkbox" name="javascript" value="javascript"/> Att. 1 vs 1 <input type="checkbox" name="javascript" value="javascript"/> Por. 1 vs 1 <input type="checkbox" name="javascript" value="javascript"/> Rimessa lunga <input type="checkbox" name="javascript" value="javascript"/> Fantasista <input type="checkbox" name="javascript" value="javascript"/> Finalizzatore

</fieldset>
</form>

Mi manca da fare solo la leggenda per i ruoli e ho finito tutto.
Tutto tranne, ovviamente, il modo per colorare le caselle di testo.
Si accettano consigli, critiche, offese e congratulazioni xD

EDIT: mi è venuta un' idea. Voi che siete esperti, potete modificarmi il codice in modo che dopo ogni casella di testa (in quel piccolo spazio bianco rimasto) ci siano una piccola freccia all' insù e una all' ingiù che cambino di 1 il valore impostato. Una cosa classica... cliccando sulla freccetta su, da 80 diventa 81, cliccando giù da 80 a 79...

[Luigi_XVI]

Up