Apllicare immagine contorno ad un column

[Manuelandro]

Ciao raga. ALlora io ho un clumn di questo stile..

#rightcolumn{
float:left;
width:600px;
min-height: 360px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
width:600px;
height: 360px;
}

ora vorrei poter applicare un'immagine di contorno a questo column, invece del solito contorno nero di tot pixel. Come devo fare?

aiutatemi..pls

[salasir]

L'unica cosa che mi viene in mente è di creare un'immagine tipo cornice da inserire in background al div della colonna interessata.

Ovviamente questa colonna avrà una dimensione fissa.

[Manuelandro]

ed in questo modo l'immagine copra anche il bordo, oppure resta il contorno nero?

[salasir]

Aspetta ...

L'immagine va al posto del bordo;
quindi avrai:

float:left;
width:600px;
min-height: 360px;
border: none; 
margin-left: 10px;
background: transparent url(image.jpg) no-repeat 50% 50%; 
padding: 5px;
padding-bottom: 8px;
}

[Manuelandro]

ok grazie. però, una domanda.

se avessi il pezzo di sopra, poi il pezzo di sotto, e poi i due vericali intermedi, come dovrei fare a metterli?

[Manuelandro]

grazie. tutto risolto.

un'altra domanda se posso

come faccio a distanziare il contenuto dal bordo in alto di 10px? pensavo fosse padding ma non cambia nulla!

[salasir]

Infatti, dovrebbe essere il padding del div a cui hai messo il background. :master:

Postami il pezzo di codice e relativo CSS che gli diamo un'occhiata.

[Manuelandro]

ciao ancora.

quel problema l'ho risolto, èra il padding. Solo che il padding mi distanzia pure l'immagine di sfondo. Es:

se imposto padding = 10px; non solo i contenuti si distanziano dal bordo di 10px ma anche lo sfondo si abbassa di 10px. come mai? ancopra thx

[salasir]

Originariamente inviato da salasir
Postami il pezzo di codice e relativo CSS che gli diamo un'occhiata.

[Manuelandro]

#rightcolumn{
float:center;
width:836px;
min-height: 430px;
border: none;
background: transparent url(sfondo_cella.gif) no-repeat 50% 50%;
margin-left: 0px;
padding: 25px;
padding-left: 50px;
padding-right: 10px;
padding-bottom: 0px;
}