You are here

CSS - Distanziare testo e immagine con una cornice

Inviato da giovanninews on Lun, 31/08/2009 - 15:30

css-zen-book-con-riquadro Spero fare a qualcuno cosa gradita, inserendo in questa pagina del codice CSS che crea automaticamente una immagine racchiusa in una cornice e distanzia del testo inserito intorno all' immagine.

Questo codice css è stato ripreso da un altro sito che non riesco più a trovare e chiedo scusa all' autore del codice per non potergli fare un link diretto.

Tanti sono i siti web che potrebbero utilizzare queste informazioni; vedo spesso siti web che hanno del testo attaccato all' immagine e sicuramente i gestori del sito sono  persone come me che devono arrangiarsi a scovare sulla Rete qualsiasi informazione; non siamo esperti in CMS ma sappiamo cos' è, non siamo esperti in CSS ma sappiamo cosa fa.

Ritengo che sia utile diffondere sulla Rete queste notizie,

in modo che su Internet si possa sempre trovare ciò che abbiamo bisogno.

Per distanziare del testo da una immagine o per disegnare una cornice intorno ad una immagine si fa per mezzo del css.

Il codice CSS descritto inizialmente, va inserito nel file .CSS fondamentale del tema (quello che si occupa della grafica e del testo) oppure, se così non dovesse funzionare, il codice testo va inserito nell' ultimo CSS che viene lanciato nella home page del sito (per saperlo è sufficiente visualizzare dal browser il codice della pagina); comunque, basta smanettare un pò con i CSS eseguiti dal CMS, per trovare quello dove inserire questo codice.

Utilizzando questo codice, quindi, tutte le immagini inserite, vengono circondate da una cornice ed il testo intorno all' immagine viene distanziato dall' immagine stessa.

E' naturalmente possibile settare una cornice più spessa o un testo più o meno distanziato agendo sui pixel indicati nel codice.

Inoltre, siccome quasi certamente qualsiasi sito basato su CMS utilizza un editor html per inserire una immagine oltre al testo, se a volte vogliamo utilizzare una immagine senza riquadro, è sufficiente inserire nel codice "border: medium none ;" senza le virgolette tramite l' editor html nelle proprietà dell' immagine, in avanzate, su stile.

Ad esempio, la prima immagine col riquadro, all' inizio dell' articolo, è stata normalmente inserita utilizzando l' editor html e mettendo left su "nome class CSS", naturalmente modificando il testo CSS;  in pratica, l' immagine è posizionata a sinistra dell' articolo,  un riquadro è disegnato intorno all' immagine ed il testo gira intorno all' immagine ad una distanza di 5 pixel.

css-zen-book-senza-riquadroMentre, la stessa immagine che quì vedete, è stata posizionata a destra del testo, mettendo right in "nome class CSS" e border: medium none ; su "stile",  quindi senza riquadro, naturalmente dall' editor html.

Ecco quindi il codice da inserire nel testo CSS appropriato (che dovete divertirvi a trovare):

/*
* IMAGES STYLES
*/
a img
{
border: none;
}
img.left,img.center,img.right
{
padding: 4px;
border: 1px solid #a0a0a0;
}
img.left
{
float: left;
margin: 0 12px 5px 0;
}
img.center
{
display: block;
margin: 0 auto 5px auto;
}
img.right
{
float: right;
margin: 0 0 5px 12px;
}

Commenti

A me non sembra così difficile; basterebbe un copia incolla in fondo al foglio di stile del tema.
1- backup di un foglio di stile
2- modifica di quello originale con il copia incolla
3- se non funziona ripristino del foglio di stile originale dal backup
4- provare con ulteriore foglio di stile eventualmente presente tra i vari files del tema come descritto prima.