RISOLTO - CSS & allineamento a destra

[macsig]

Ciao, ho un piccolo problema con CSS.

E' possibile allineare a destra un button all'interno din un div ???

Mi spiego meglio: ho un div che contiene un button e vorrei che il lato destro del button coincidesse con il lato detsro del div in questo modo al crescere del testo del button, quest'ultimo crescesse verso sinistra manetendosi allineato a destra.

Il div e' piu' lungo del button stesso in modo che quest'ultimo possa espandersi al variare del testo.

Spero sia abbastanza chiaro.

GRAZIE

[bau86]

prova così dovrebbe funzionare, ma non so se è quello che intendevi:

<h1 id="pippo"><input type="button" name="pulsante" value="invia"></h1>

e nel css

#pippo{

text-align:right;

}

spero di esserti stata di aiuto..

[macsig]

credo sia stata la prima cosa che ho provato, ma per sicurezza riprovo

Perche' usi il tag h1 ???

[bau86]

è l'unico modo che mi è venuto in mente...ora provo qualcos'altro..ti faccio sapere se ci riesco

[macsig]

Quello che voglio ottenete e' questo

il button deve essre allineato a destra a prescindere dal testo

GRAZIE

[macsig]

Probabilmente quando ho provato text-align devo aver dimenticato un ;

perche' adesso funziona

[bau86]

bene...prova anche con float:right;...

[grigio60]

bene...prova anche con float:right;...

float: right fa qualcosa di diverso rispetto a text-align: right

float agisce sull'allineamento del blocco inteso come posizionamento complessivo ma non ha alcun effetto sull'allineamento dei componenti all'interno del blocco stesso

text-align invece agisce sull'allineamento dei componenti all'interno del blocco

p.s. due note

- usare h1 solo come modo per avere un testo più grande è concettualmente errato

- usare un id dedicato solo per controllare una proprietà è anche questo concettualmente errato: occhio che nel prossimo venturo HTML5 il valore di id dovrà essere UNICO per ogni pagina altrimenti non verrà validata e quindi se si vuol definire una proprietà riutilizzabile all'interno di un foglio CSS la soluzione corretta è quella di usare una class

[bau86]

<input class="pippo" type="button" name="pulsante" value="invia">

.pippo{

float:right;

}

facendo così il pulsante me lo allinea a destra...comunque sarai più esperto di me e sicuramente ne capirai di più...probabile che sia anche un caso che me lo allinei..

[grigio60]

<input class="pippo" type="button" name="pulsante" value="invia">

.pippo{

float:right;

}

facendo così il pulsante me lo allinea a destra...comunque sarai più esperto di me e sicuramente ne capirai di più...probabile che sia anche un caso che me lo allinei..:ciao:

come ti dicevo, float ti allinea il "blocco" che contiene il pulsante: l'effetto è che effettivamente compare allineato sulla destra MA questo tipo di allineamento presenta delle criticità nascoste che potrebbero crearti degli effetti indesiderati.

Supponi che tu vuoi mettere il pulsante sulla destra rispetto a un testo lungo (tipo una domanda e un pulsante per la risposta), con il pulsante Invia chiaramente SOTTO alla domanda (al testo lungo) corrispondente. Fai allora la prova con questo codice qua sotto, provando anche a ridimensionare (restringere) la finestra - e fai bene caso in quale punto viene visualizzato il pulsante rispetto al testo della domanda.

<style>
.pippo { float: right; }
</style>

<form>
<p>Questo testo molto lungo rappresenta un esempio di domanda molto articolata, il cui unico scopo consiste nell'occupare quanto maggior spazio possibile in modo da essere resa su un numero di righe sicuramente superiore a due e costituire in questo modo un blocco di testo che evidenzia in modo rapido il differente effetto di un float rispetto a un text-align</p>
<input class="pippo" type="button" name="pulsante" value="invia">
<p>Soprattutto quando poi a questo testo ne segue un secondo altrettanto lungo che rappresenta un secondo esempio di domanda molto articolata, il cui unico scopo consiste nell'occupare quanto maggior spazio possibile in modo da essere resa su un numero di righe sicuramente superiore a due e costituire in questo modo un blocco di testo che evidenzia in modo rapido il differente effetto di un float rispetto a un text-align</p>
<input class="pippo" type="button" name="pulsante2" value="invia">
</form>

e poi riprova con quest'altro codice:

<style>
.pippo { text-align: right; }
</style>

<form>
<p>Questo testo molto lungo rappresenta un esempio di domanda molto articolata, il cui unico scopo consiste nell'occupare quanto maggior spazio possibile in modo da essere resa su un numero di righe sicuramente superiore a due e costituire in questo modo un blocco di testo che evidenzia in modo rapido il differente effetto di un float rispetto a un text-align</p>
<p class="pippo"><input type="button" name="pulsante" value="invia"></p>
<p>Soprattutto quando poi a questo testo ne segue un secondo altrettanto lungo che rappresenta un secondo esempio di domanda molto articolata, il cui unico scopo consiste nell'occupare quanto maggior spazio possibile in modo da essere resa su un numero di righe sicuramente superiore a due e costituire in questo modo un blocco di testo che evidenzia in modo rapido il differente effetto di un float rispetto a un text-align</p>
<p class="pippo"><input type="button" name="pulsante2" value="invia"></p>
</form>

vedrai che nel primo caso il primo pulsante Invia, pur essendo allineato a destra, si mescola con il testo della seconda domanda, creando confusione - cosa che non succede invece nel secondo caso.

[bau86]

grazie..