Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12

Discussione: input type="file"

  1. #1

    input type="file"

    Salve ragazzi, premetto di non essere ferrato in css, ma comunque sto cercando di modificare ad hoc un free css scaricato dalla rete. Nello specialmendo i campi form di input e submit vengono così definiti:

    codice:
    input.search { width: 122px; height: 15px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
    input.submit { width: 36px; height: 20px; font-weight: bold; border: none; background: #FFF; padding: 2px; color: #616161; }
    textarea.search { width: 252px; height: 150px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
    ma non è stato considerato il caso per gli input di tipo file, come potrei crearlo?

    Similmente vorrei formattare il testo raffigurante i listati dei linguaggi di programmazione.
    Giuseppe SPECCHIO

  2. #2
    Con calma
    La sintassi da te presentata indica con input.submit(oggetto.classe) che gli stili definiti vadano applicati per tutti gli elementi input con classe submit quindi sicuramente avrai nel codice
    codice:
    <input type="submit" class="submit" ...>
    a meno di non avere uno script che associa ad ogni input la classe corrispondente al type basta inserire un altro input di tipo file, assegnargli la classe "file" così
    codice:
    <input type="file" class="file" ...>
    e definirne lo stile così
    codice:
    input.file{
    ...
    ...
    ...
    }
    Per il testo preformattato si era soliti usare l'elemento PRE, ma crea problemi di accessibilità per l'abuso che ne è stato fatto per la visualizzazione di ASCII Art, ma anche e soprattutto per il fatto che è un elemento con uno stile predefinito.
    Lo stile, difatti, secondo la nuova concezione dello standard con cui produrre documenti web, deve essere esplicito e non implicito ovvero va definito a parte: una pagina priva di fogli di stile non deve avere alcun tipo di formattazione.

    Puoi utilizzare comunque la formattazione dell'elemento pre creandoti un DIV o un P a cui assegnerai classe pre (come hai fatto per gli elementi input) con questo stile
    codice:
    .pre{
    white-space : pre;
    font-family :  "courier new", courier, consolas, FreeMono, monospace;
    }
    white-space : pre indica di considerare gli spazi come caratteri e visualizzarli piuttosto che accorpare più spazi in uno spazio solo o eliminarli come accade per gli altri BOX.
    Il font, come vedi, è di tipo MONOSPACE, cioè ogni carattere occupa in orizzontale la stessa larghezza.
    Ho usato più nomi di font avendo l'accortezza di prendere in considerazione i font standard di Windows, MacOS e Linux e utilizzare i loro nomi generici in minuscolo.
    Altro consiglio: se un font è composto da più parole racchiuderlo tra virgolette.

  3. #3
    Innanzitutto ti ringrazio per la disponibilità e l'estrema chiarezza con la quale hai espresso le tue idee, ma c'è ancora un piccolo problema:

    codice:
    input.search { width: 122px; height: 15px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
    
    input.submit { width: 36px; height: 20px; font-weight: bold; border: none; background: #FFF; padding: 2px; color: #616161; }
    
    textarea.search { width: 252px; height: 150px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
    
    input.file { width: 122px; height: 15px; border: 1px dashed #46574D; background: #FFF url(input.jpg) no-repeat; padding: 3px; color: #616161; }
    come puoi vedere ho creato l'oggetto input.file, ma non ottengo lo stesso layout degli altri campi!
    Giuseppe SPECCHIO

  4. #4
    Difatti avevo detto "probabilmente"
    Dovrei vedere il codice (X)HTML del form per maggior precisione.

  5. #5
    vuoi che ti posto il css?
    Giuseppe SPECCHIO

  6. #6
    NO, il codice HTML!

  7. #7
    codice:
    <input type="text" name="name" class="search"/>
    <input name="icona" type="file" size="40" class="file"/>
    Giuseppe SPECCHIO

  8. #8
    Ovviamnete togli il size="40" che va a fare un override dello stile.
    In secondo luogo in IE si visualizza lo stesso stile, ma Firefox e Opera hanno pulsanti textarea standard non modificabili con gli stili.
    Per poter fare ciò bisogna ricorrere alla tecnica del "wrapping" con l'utilizzo di javascript.

  9. #9
    Ok ti ringrazio, ma io lavoro sotto Linux, quindi non ho ancora avuto modo di verificare lo script sotto IE !
    Giuseppe SPECCHIO

  10. #10
    Prova a scaricare da http://evolt.org/ IE6eolas e a farlo girare in WINE

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.