Formattazione Listato Programmi

[peppespe]

Ho impostato nel mio css che il listato dei programmi mi deve essere così formattato.

.preformat{
    color: #000000;
    background: #eee8aa;
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dashed #7BA813;
   
    white-space : pre;
    font-family :  "courier new", courier, consolas, FreeMono, monospace;
}

Ora vorrei miglioralo in modo tale che quando il testo supera i margini laterali mi si possa leggere mediante una barra di scorrimento, come se il pagrafafo fosse una specie di casella di testo.

E' possibile relizzare ciò?

[H5N1_Aviaria]

.preformat{
    color: #000000;
    background: #eee8aa;
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dashed #7BA813;
    overflow : auto;
    white-space : pre;
    font-family :  "courier new", courier, consolas, FreeMono, monospace;
}

[peppespe]

Io ti ringrazio per la celerità nella risposta, ma non ha avuto alcun effetto sul

<p class="preformat"> ... </p>

il codice in eccesso esce sempre fuori dal boxbox

[H5N1_Aviaria]

p.preformat{
    color: #000000;
    background: #eee8aa;
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dashed #7BA813;
    overfloat : auto;
    white-space : pre;
    font-family :  "courier new", courier, consolas, FreeMono, monospace;
}

Strano perchè apportando le stesse modifiche con Firebug ottengo il risultato sperato...

[peppespe]

quindi che si fa in questi casi?

[H5N1_Aviaria]

Apporta le modificche al sito e poi controllo.

[peppespe]

Originariamente inviato da H5N1_Aviaria

p.preformat{
    color: #000000;
    background: #eee8aa;
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dashed #7BA813;
    overfloat : auto;
    white-space : pre;
    font-family :  "courier new", courier, consolas, FreeMono, monospace;
}

Strano perchè apportando le stesse modifiche con Firebug ottengo il risultato sperato...

avevo scritto overfloat al posto di overflow ... quello era il problema!

[H5N1_Aviaria]

L'errore l'avevo commesso prima io!

[thomas_anderson]

Potresti usare anche una lista ordinata e formattarla come hai fatto tu. In questo modo avresti anche la possibilità di aggiungere automaticamente i numeri di riga. questo è molto comodo quando hai a che fare con molto codice, specie di linguaggi di programmazione. è una cosa che avrei voluto vedere sui siti C++ che frequentavo:

ol {margin: 1em 0; padding: 0.3em 0.3em 0.3em 2.5em; border: 1px dashed #000;}
li {margin: 2px 0; padding: 2px; background: #f1f1f5; color: #000;}

ovviamente per la lista usi un font monospaziato. ciao