Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Box per contenere codice

    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
    Immagini allegate Immagini allegate
    La differenza fra la genialità e la stupidità è che la genialità ha i suoi limiti.


  2. #2
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,541

    Re: Box per contenere codice

    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/

  3. #3
    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
    Immagini allegate Immagini allegate
    La differenza fra la genialità e la stupidità è che la genialità ha i suoi limiti.


  4. #4
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,541
    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

  5. #5
    Scusa, ma io ho bisogno che l'altezza sia variabile, mentre la larghezza deve essere fissa e scorrevole.
    La differenza fra la genialità e la stupidità è che la genialità ha i suoi limiti.


  6. #6
    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
    La differenza fra la genialità e la stupidità è che la genialità ha i suoi limiti.


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.