Jump to content
Sign in to follow this  
kocahoctpa

CSS blocco codice con slide orizzontale

Recommended Posts

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).

 

 

Share this post


Link to post
Share on other sites

ti consiglio di usare il tag

<code>

 

per identificare pezzi di codice

 

e il tag

<pre>

 

per mantenere la "visualizzazione" del codice

 

il

width

 

sarà poi al 100% e non "inherit"

 

overflow-x: auto

e

overflow-y: hidden

 

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

Share this post


Link to post
Share on other sites

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>).

Share this post


Link to post
Share on other sites

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.

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×