Mettere immagini come i bordi

[Lukiep]

Ciao a tutti, è la prima volta che posto in quersto forum quindi abbiate pazienza se faccio post che sono già stati affrontati.

Mi sono messo in ballo a studiarmi un po' di CSS, ma sono arrivato ad un problema. Ho impostato la mia pagina web con intestazione, colonna a sinistra, parte principale e footer come div che poi ho gestito tramite position:absolute.

Come faccio adesso a mettere delle immagini come bordi delle mie varie parti del sito: per esempio se voglio bordare la colonna del menù a sinistra con una greca da me disegnata, come faccio?

Grazie in anticipo
Luca

[toretto]

Ciao,
ci sono diversi modi per realizzare i bordi con immagine.
Su questo sito trovi numerosi articoli a riguardo.
Prassi molto diffusa è, tralasciando la questione accessibilità, quella di creare un div container mettendoci come sfondo l'immagine da usare come bordo (meglio se piccola e ripetuta in orizzontale o verticale o entrambi) e specificando un padding di tanti pixel quanto vuoi che sia spesso il bordo. Quindi inserisci l'oggetto al quale vuoi dare un bordo al suo interno.

Il codice risultante sarà di questo tipo:

<div class="container">
<div class="colonnasx">
[...]
</div>
</div>

Sul CSS:

div.contanier {
padding: 4px;
background: url(immagine.jpg) repeat-xy;
}

div.colonnasx {
#quellochetiserve#
}

In questo caso però l'immagine di bordo deve essere uguale sia sopra che sotto sia a destra che a sinistra. Nel caso l'immagine sia diversa (accade spesso con i gradienti che sono verticali sui bordi superiore e inferiore, mentre sono orizzontali a destra e a sinistra, molte volte gli angoli si mettono a complicare le cose) dovrai creare diversi contenitori annidati e dei float/absolute per posizionarli.

Tutti i parametri dei div vanno poi impostati in base al tipo di layout: se fisso specifichi larghezze fisse, se fluido dovrai usare percentuali ecc.ecc.

Spero di essere stato chiaro
Qui dentro troverai persone molto più esperte di me che sapranno darti qualche consiglio più dettagliato, magari considerando altri fattori come l'accessibilità.

Ciao ciao!
toretto.

[Lukiep]

Capito benissimo, speravo in una soluzione più rapida e pulita.

Comunque grazie mille
Ciao
Luca