Myblog: come creare e inserire un box in un articolo

 

Per realizzare i box interni agli articoli, sono utilizzati per evidenziare concetti o righe di codici, ho utilizzato i CSS (Cascade Style Sheet).

Ho creato il box chiamato “boxemi” con le seguenti caratteristiche:

– float: center (il box è posizionato centralmente)
– width:70% (indica la larghezza del box, il 70% della larghezza di dove è collocato)
– height: auto (la sua altezza si regole automaticamente in base all’altezza del contenuto del box)
– padding: 20px (indica la distanza espressa in pixel che deve avere il contenuto del box dal bordo del box stesso)
– border: 5px (indica lo spessore del bordo del box in pixel)
– border-color: #032c48 (indica il codice esadecimale del colore del bordo del box)
– margin: auto (colloca il box lasciando la stessa distanza dagli altri elementi presenti)

Ecco come si presenta il codice del CSS relativo al box che abbiamo elaborato:

#boxemi {
float:center:
color: #032c48;
width: 70%;
height:auto;
padding: 20px;
border: 5px solid;
border-color:#032c48;
margin:auto;
}

Questo codice andrà copiato nel template del nostro blog e salviamo il tutto, effettuata questa operazione tutto è pronto per poter essere utilizzato.

box.jpg
box1.jpg

Ogni volta che vorremo utilizzare il box per evidenziare qualcosa dovremo usare i seguenti codici:

<div id=”boxemi”> “contenuto da inserire nel box” </div>

Per effettuare questa operazione dovremo cliccare sul pulsante “html” per poter manipolare il codice HTML relativo al nostro articolo.

box2.jpg
box3.jpg

Ecco il risultato a lavoro terminato
box4.jpg


Myblog: come creare e inserire un box in un articoloultima modifica: 2010-09-09T02:41:00+00:00da emiliano75rm
Reposta per primo quest’articolo
Questa voce è stata pubblicata in Guide, I miei lavori, Internet, blog, Linguaggi, CSS e contrassegnata con , , , , . Contrassegna il permalink.

Lascia un commento