CSS blocco codice con slide orizzontale

**kocahoctpa** · 15-09-2011, 15:50

Mi occorre uno style per definire le parti di codice inserite nella pagina, e fare si che appaia uno slide orizzontale qualora il codice esca fuor dal campo visibile.

Ecco cosa ho preparato

samp
{
display: block;
white-space: pre;
overflow: auto;
width: inherit;
}

Lo style mi funzione eccetto che (in tutti i browser) quando il blocco di codice è dentro una table! In questo caso non appare mai la barra scorrevole orizzontale (impostata con overfollow).
Se imposto width a lunghezza fissa, allora funziona.. ma non posso sapere a priori che largezza avrà e la largezza deve essere quindi quella dell'oggetto madre (inherit).

**andrea.paiola** · 15-09-2011, 19:52

ti consiglio di usare il tag

Codice:

<code>

per identificare pezzi di codice

e il tag

Codice:

<pre>

per mantenere la "visualizzazione" del codice

il

Codice:

width

sarà poi al 100% e non "inherit"

Codice:

overflow-x: auto

e

Codice:

overflow-y: hidden

per avere lo scroll solo orizzontale (CSS 3, quindi su IE vecchi non funziona)

**kocahoctpa** · 15-09-2011, 21:45

Uso asamp perchè il codice è su più linee.. comunque fa lostesso (un tag è uguale l'altro).
Se uso 100% il blocco avrà sempre la sua larchezza massima quindi non potrà mai avere uno slide di scrolling orizzontale.
A me invece interessa che sia largo al massimo quanto controllo che lo contiene (per esempio il <td>).

**kocahoctpa** · 15-09-2011, 22:23

O seguito i tuoi consigli ma non cambia nulla, il blocco di codice se dentro una table non ha lo slide orizzontale.
Segue la pagina html che ho usato per la prova: Vi è uno style definito e 2 bloicchi di codice separati: Il secondo, quello dentro la table non funzione con lo slide orizzontale.

Codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<style type="text/css">
pre
{
 margin-top: 10px;
 margin-bottom: 10px;
 display: block;
 font-size: larger;
 overflow-y: hidden;
 overflow-x: auto;
}
</style>
</head>
<body>
Blocco di codice:
<pre>
a) xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <br />
a) xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <br />
</pre>
Blocco di codice dentro una table:
<table>
<tr>
<td width="70%">
<pre>
a) xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <br />
a) xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <br />
</pre>
</td>
</tr>
</table>
</body>
</html>