form non allineato

[FinalFantasy]

ciao a tutti

<div id="cerca">
      <span class="cerca">Cerca:</span >
      <input type="text" name="keyword" id="testo"/>
      <input type="image" value="Cerca" src="images/invia.png" title="Cerca" alt="Cerca"/>
  </div>

css

#cerca
{
float:right;
width: 16em;
vertical-align:middle;
}

tra le altre cose, ho nella mia pagina qeusto codice

La scritta "Cerca" è a mezz'aria con il campo di testo (giusto ke sia così), ma, invece, il pulsante è in aria, completamente disallineato rispetto agli altri oggetti. Come lo sistemo?

grazie anticipatamente e ciao

[pierofix]

Innanzitutto costruisci il form come specifiche (e regole di buona progettazione) comandano:

<form id="cerca" action="...">
   <fieldset><legend>Cerca nel sito</legend>

      <label for="keyword">Parola:</label>
      <input id="keyword" name="keyword" />
      <input type="submit" value="vai" title="Avvia ricerca" />
   </fieldset>
</form>

Le informazioni che ritieni visivamente superflue (come potrebbe essere il bordo del fieldset) le puoi nascondere via CSS. Il pulsante di invio, poi, conviene tenerlo come type="sumbit" e farlo apparire successivamente via CSS come un'immagine.

Per allineare verticalmente al centro tutti gli elementi (label, input text e submit) puoi poi usare questa istruzione:

fieldset *
{
   vertical-align:middle;
}

[FinalFantasy]

<div id="cerca">
    <form name="cerca" action="cerca.php" method="POST">
      <span class="cerca">Cerca:</span >
      <input type="text" name="keyword" id="testo"/>
      <input type="image" value="Cerca" src="images/invia.png" title="Cerca" alt="Cerca"/>
    </form>
  </div>

questo è un codice standard w3c con css e non ho intensione di cambiarlo con un fieldset..
cmq lo cambiato e tutto è rimasto invariato

[pierofix]

Originariamente inviato da FinalFantasy
questo è un codice standard w3c con css e non ho intensione di cambiarlo con un fieldset..

Una struttura sintatticamente standard non vuol dire per forza che lo sia anche semanticamente. I form, quando costruiti, vanno trattati con gli strumenti ed i ragionamenti appropriati.

cmq lo cambiato e tutto è rimasto invariato

In che senso? Non ti allinea verticalmente gli elementi? Con quali browser hai provato?

[FinalFantasy]

oh...grazie funziona

scusa la mia stupidità, ma il tuo esempio mi aveva un po' fuorviato...in quanto tu mi avevi detto di rimuvoere direttamente il div, ma ora mettendo div->fieldset->form tutto è al posto giusto

solo una cosa...

ho provato a fare

fieldset *
{
vertical-align:middle;
border:0px;
}

ma i bordi del fieldset nn si tolgono...cm fare?

[pierofix]

Originariamente inviato da FinalFantasy
ora mettendo div->fieldset->form tutto è al posto giusto

Il div in questo caso è superfluo. Io ho fatto delle prove con il codice paro-paro quello che ti avevo dato e mi funziona.

ho provato a fare

fieldset *
{
vertical-align:middle;
border:0px;
}

ma i bordi del fieldset nn si tolgono...cm fare?

Chissà come mai fate sempre tutti lo stesso errore. E' curioso. Per eliminare un bordo, la sintassi corretta è

border:none;

[FinalFantasy]

il div nn è superfluo perché va ad incastrare con altri elementi della pagina...
border:none nn funziona

[pierofix]

Originariamente inviato da FinalFantasy
il div nn è superfluo perché va ad incastrare con altri elementi della pagina...

L'elemento form altro non è che un elemento div particolare, ovvero un marcatore di tipo block, con il compito di contenere gli elementi di un modulo.

La tua è una ripetizione.

border:none nn funziona

Devi però stare attento al selettore che usi. 'fieldset *' punta a tutti i discendenti di fieldset; se vuoi annullare il bordo del fieldset devi scrivere:

fieldset
{
   border:none;
}

[FinalFantasy]

ho tolto l'asterisco e funge...
mi spieghi meglio la storia dei discedendi e cose varie cn il *?

[pierofix]

Questo è il capitolo delle specifiche che spiega bene i selettori:

- http://diodati.org/w3c/css2/selector.html