24. Il motore di ricerca

Il motore di ricerca presenta i seguenti stili:

  1. #sidebar form {
  2. margin: 0 auto;
  3. width: 90%;
  4. }
  5. #sidebar form p {
  6. margin: 0;
  7. }
  8. #sidebar form input#q {
  9. width: 50%;
  10. background: #fff;
  11. color: #333;
  12. border: 1px solid;
  13. font: 1em Helvetica, Arial, sans-serif;
  14. }
  15. #sidebar form input#cmdcerca {
  16. font: bold 1em Helvetica, Arial, sans-serif;
  17. }

Come il menu di navigazione, il modulo viene centrato in orizzontale tramite i margini automatici e gli viene asssegnata la stessa larghezza del menu. I margini verticali del modulo e del paragrafo al suo interno vengono azzerati, onde evitare i noti problemi di Internet Explorer 6 nel computo dei margini degli elementi dei moduli. Poiché abbiamo assegnato due ID differenti al campo di testo e al bottone di invio, essi ricevono due stili diversi. Il primo ha una larghezza pari al 50% della larghezza del modulo ed un bordo nero, mentre il secondo ha il testo in grassetto. Poiché un fattore fondamentale nel computo delle dimensioni degli elementi dei moduli è costituito dal tipo di font scelto e dalla sua dimensione, impostiamo lo stesso tipo di font e la stessa dimensione per tali elementi. Ricordiamo che attualmente i browser applicano l'ereditarietà in modo diverso sugli elementi dei moduli. Si rende quindi necessario specificare il tipo e la dimensione del font su ogni elemento.

Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.