Box per contenere codice

**furbostandby** · 31-08-2010, 15:07

Salve a tutti,
rieccomi con un'altra domanda.
Sulle guide di html.it ho visto che sono usati dei particolari box per scriverci dentro del codice, di qualunque linguaggio sia (per capire meglio vi allego un'immagine).

Vorrei realizzare una cosa del genere nel mio sito, qulche suggerimento su come sono strutturati questi box?

Grazie

Ciao

**mexican** · 31-08-2010, 17:50

Originariamente inviato da furbostandby
Salve a tutti,
rieccomi con un'altra domanda.
Sulle guide di html.it ho visto che sono usati dei particolari box per scriverci dentro del codice, di qualunque linguaggio sia (per capire meglio vi allego un'immagine).

Vorrei realizzare una cosa del genere nel mio sito, qulche suggerimento su come sono strutturati questi box?

Grazie

Ciao

fai un div con lo style che vuoi e poi:
http://www.learningmovabletype.com/a...5display_code/

**furbostandby** · 31-08-2010, 18:12

Intanto grazie della risposta

.

In quell'articolo c'è fin troppo

, a me basta qualcosa di più semplice.

Comunque ho abbozzato qualcosa, ecco il CSS:

codice:

div#codebox{
	background-color:#cdffcb;
	width:560px;
	max-width:560px;
	min-height:120px;
	border:1px dashed #999999;
	margin:50px;
	padding:0;
	text-align:left;
}

Solo una cosa non ho capito, come faccio a far apparire la scrollbar quando la riga è più lunga del div, invece di andare a capo?

Ah, una curiosità, ho usato per il testo il tag <code> per modificare la formattazione, c'è una sintassi equivalente in CSS?

Grazie ciao

**mexican** · 31-08-2010, 18:41

Originariamente inviato da furbostandby
Intanto grazie della risposta

.

In quell'articolo c'è fin troppo

, a me basta qualcosa di più semplice.

Comunque ho abbozzato qualcosa, ecco il CSS:

codice:

div#codebox{
	background-color:#cdffcb;
	width:560px;
	max-width:560px;
	min-height:120px;
	border:1px dashed #999999;
	margin:50px;
	padding:0;
	text-align:left;
}

Solo una cosa non ho capito, come faccio a far apparire la scrollbar quando la riga è più lunga del div, invece di andare a capo?

Ah, una curiosità, ho usato per il testo il tag <code> per modificare la formattazione, c'è una sintassi equivalente in CSS?

Grazie ciao

per far uscire la scroll bar basta dare widht ed height fisse e poi aggiungere overflow:auto;

Per la regola css come tag code non saprei dirti

**furbostandby** · 31-08-2010, 20:14

Scusa, ma io ho bisogno che l'altezza sia variabile, mentre la larghezza deve essere fissa e scorrevole.

**furbostandby** · 31-08-2010, 21:14

Tutto ok, ce l'ho fatta!!!

Mi è bastato inserire un <pre> al posto di code (altrimenti mi andava a capo) e impostare overflow-x su auto, senza definire altezza fissa.

Grazie dei preziosi suggerimenti

P.S: Qualcuno potrebbe provare (se ne ha la possibilità) il codice su opera e/o chrome e/o safari?

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Prova con box</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" charset="iso-8859-1" />
		<style type="text/css">
			div#codebox{
				background-color:#cdffcb;
				width:560px;
				max-width:560px;
				min-height:120px;
				border:1px dashed #999999;
				margin:50px;
				padding:0;
				text-align:left;
				overflow-x:auto;
				height:auto;
			}
			div#codebox pre{
				display:block;
				margin-left:15px;
				padding:0;
			}
		</style>
	</head>
	<body>
		<div id="codebox">
			<pre>Ciao a &lt;b&gt;tutti&lt;/b&gt;, sono furbostandby e sto testando questo nuovo box con CSS per l'inserimento di codice.
ciao
ciao
ciao
ciao
ciao
ciao
ciao
ciao
ciao</pre>
		</div>
	</body>
</html>

Ciao

Discussione: Box per contenere codice

Strumenti discussione

Ricerca discussione

Visualizza

Box per contenere codice

Re: Box per contenere codice

Permessi di invio