Allineamento pulsante

**senise** · 10-12-2010, 00:01

Salve a tutti,
non riesco ad allineare in modo preciso il pulsante con id="corto".
Rimane sempre qualche pixel disallineato rispetto agli altri due.
Cosa sbaglio?

Grazie, saluti

codice:

<HTML>
   <HEAD>
      <TITLE>
         A Small Hello
      </TITLE>
<link rel="stylesheet" type="text/css" href="style.css"/>
   </HEAD>
<BODY>
   

Form</P>

   <form>
        <div class="voce">
                <label for="nome">nome</label>
                <input type="text" name="nome"/>
                <button>+</button>
        </div>

        <div class="voce">
                <label for="nome">cognome</label>
                <input type="text" name="nome"/>
                <button>+</button>
        </div>

        <div class="voce">
                <label> sesso </label>
                <select name="sesso" id="sesso">
                <option> - Seleziona una voce -</option>
                <option value="M">M</option>
                <option value="F">F</option>
                </select>
                <button id="corto">+</button>
        </div>
   </form>
</BODY>
</HTML>

codice:

.voce
{
   margin-bottom:20px;
}

.voce label
{
   color:#123456;
   text-align:right;
   padding-right:2%;
   width:20%;
   float:left;
}

.voce input
{
   width:20%;
   float:left;
   padding-right:2%;
}

.voce button
{
   margin-left:2%;
   clear:right;
}

.voce #corto
{
  margin-left:12%;
  clear:right;
}

#sesso
{
  width:10%;
  padding-right:2%;
}

**Mich_** · 10-12-2010, 09:55

Anzitutto dovresti usare una DTD: e se la scegli strict risolvi d'incanto un buon numero di problemi di IE.

Inoltre nel tuo codice ci sono varie cose che andrebbero sistemate.

Anzitutto il calcolo delle larghezze:
Nei tag label e input definisci width:20%, ma la % e` relativa ad una misura indefinita, dato che non e` definita nel loro contenitore (classe voce). Quindi i browser potrebbero interpretare male.

A che ti serve il clear:right; quando non hai float:right?

Se vuoi che i <button> siano tutti allineati, perche` non li metti float:right (eventualmetne con un margine destro)?

Perche` hanno tutti margin-left:2% mentre il #corto ha margin-left:12%?

Poi alcune note sul codice HTML.
Perche` usi dei <div> dentro il <form> anziche` usare un <fieldset> che dal punto di vista semantico e` piu` corretto?
A che ti serve un <button> senza tipo e senza codice JS collegato? Che funzione ha?
Vedi quanto dicono alla voce button del manuale w3schools:

Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".

**senise** · 10-12-2010, 15:49

Ciao Mich_ grazie per la risposta.

Originariamente inviato da Mich_
Anzitutto dovresti usare una DTD: e se la scegli strict risolvi d'incanto un buon numero di problemi di IE.

Inoltre nel tuo codice ci sono varie cose che andrebbero sistemate.

Anzitutto il calcolo delle larghezze:
Nei tag label e input definisci width:20%, ma la % e` relativa ad una misura indefinita, dato che non e` definita nel loro contenitore (classe voce). Quindi i browser potrebbero interpretare male.

A che ti serve il clear:right; quando non hai float:right?

tolto

Se vuoi che i <button> siano tutti allineati, perche` non li metti float:right (eventualmetne con un margine destro)?

Ci provo.

**senise** · 10-12-2010, 16:00

Originariamente inviato da Mich_
Perche` hanno tutti margin-left:2% mentre il #corto ha margin-left:12%?

Questa differenza dovrebbe servire nell'intento di allineare il pulsante a fianco all'elemento select con gli altri ( l'elemento select è più corto)

**Mich_** · 13-12-2010, 09:31

Originariamente inviato da senise
Questa differenza dovrebbe servire nell'intento di allineare il pulsante a fianco all'elemento select con gli altri ( l'elemento select è più corto)

Si`, ma sono conti senza l'oste.
In realta` forse (e sottolineo il forse) funziona nel tuo browser, con determinate caratteristiche di finestra, di dimensioni dei caratteri, di px del monitor, ... ; ma sono tutte variabili su cui non puoi intervenire tu da programma.

Invece se definisci una larghezza del contenitore, puoi allineare partendo da destra (fissando il margin-right anziche` il -left, o il float:right anziche` :left)

Discussione: Allineamento pulsante

Strumenti discussione

Ricerca discussione

Visualizza

Allineamento pulsante

Permessi di invio