Dimensionamento con immagini

[Valeria75_bis]

Ciao a tutti, ho un'area definita tramite due immagini visualizzate tramite fogli di stile.

Ora vorrei fare in modo che quest'area cambi (si incrementi) in funzione della dimensione della pagina... quindi dovrei passare da una gestione fissa alle percentuali. Il mio problema è che non saprei come modificare la logica adottata (intendo come visualizzare le immagini, che allego)


Codice Usato

<div id="boxbarlogin-top"><span class="box-title">Login area</span></div>
<div id="boxbarlogin-back">

Come vede l'immagine presenta un bordo SX ed un bordo DX, io dovrei dividere l'immagine (non so come) per fare in modo che i bordi siano sempre agli estremi della mia area (che dovrebbe infatti diventare dinamica) e al centro tenere uno sfondo (che recuperei dalla parte centrale dell'immagine)

Grazie per l'aiuto

[Valeria75_bis]

Seconda immagine

[Valeria75_bis]

Spero di essermi spiegata

[Mich_]

Mancano una serie di informazioni per capire bene e poter consigliare:

- il blocco ha larghezza fissa? la larghezza e` definita in px o altro?
- la altezza e` variabile in base al contenuto (magari inserito tramite CMS)?
- puoi pensare di fare una immagine per i bordi nella parte alta, una per il centro (da rpetere inverticale) ed una per il fondo?

[Valeria75_bis]

Prima di tutto ti ringrazio per la risposta! Io ho provato anche oggi a districarmi tra i CSS ma non riesco proprio a gestire dinamicamente l'area.

Allora... la dimensione dell'area sarà in % mentre prima era in Pixel, il mio problema è proprio questo, prima potevo utilizzare img di dimensione fissa, ora non posso consocere a priori il valore risultante dall'area in %.

Altro problema, come hai giustamente indicato tu, anche l'altezza è dinamica!

puoi pensare di fare una immagine per i bordi nella parte alta, una per il centro (da rpetere inverticale) ed una per il fondo?

Magari!!! Andrebbe bene anche questa soluzione! Peccato che io non riesco ad ottenere.
Credo però che anche i margini DX e SX dovrebbero essere spezzati

[Valeria75_bis]

Ho dimenticato di postare il CSS utilizzato inizialmente (credevo di averlo fatto)

#boxbarlogin-top {
width:100%;
height:38px;
background-image: url(Box/BarLogin_Top.jpg);
background-repeat: no-repeat;
text-align: left;
}

#boxbarlogin-back {
width:100%;
height:120px;
background-image: url(Box/BarLogin_Back.jpg);
background-repeat: no-repeat;
}

[Mich_]

Allora guarda lo schemino allegato.
La parte sinistra e` fatta di 4 immaginette, che per semplicita` di realizzazione (non sono un grafico e non ho strumenti grafici sofisticati) ho fatto con colori forti e diversi, ma puoi realizzare con sfumature come quelle postate sopra. Il rosso sara` il tuo grigio carico, il blu il tuo bianco o grigio chiarissimo; in mezzo la sfumatura che vuoi.

Per realizzarlo puoi prendere le tue immagini e spezzarle opportunamente, quindi salvarle in file grafici separati (gif, png o jpg a seconda di cosa sai fare e cosa conviene in termini di resa e di spazio occupato)

Sulla destra c'e` uno schema con la suddivisione dei blocchi di cui hai bisogno per realizzare quello che ho in mente. Li ho fatti separati per chiarezza, ma nella realizzazione saranno attacati e seza bordi o altri spazi.

Nel blocchetto largo superiore ci sara` lo sfondo 1, nei blocchi laterali nell'ordine gli sfondi 2, 3 e 4 (sia a dx che a sin); il blocco centrale sara` senza sfondo (o con sfondo bianco).
In alternativa in basso potra` esserci una barra come in alto che prende tutto il fondo e sostituisce i blocchi 4. La scelta dipende dalla soluzione grafica che vuoi ottenere.
Nota che gli sfondi 2 che ho fatto separati dai 3, potrebbero anche essere eliminati, a seconda di come funziona la sfumatura tra l'1 e il 3. In tal caso laa struttura dei blocchi potrebbe risultare piu` semplice.

Le immagini 3 potrebbero anche esser sostituite da background-color, ma dipende dalla grafica che usi.

Nel tuo blocco centrale ci andra` il testo (sara` quindi un

) mentre gli altri blocchi saranno probabilmente dei <div>.
A questo punto si tratta di montare il tutto, cosa che e` un po' complessa, ma non presenta difficolta`.

Prova a pensare se una cosa del genere e` realizzabile nel tuo caso, poi ci risentiamo.


PS: ho visto che la trasformazione in JPG ha rovinato un po' la grafica: spero comunque si capisca.

[Valeria75_bis]

Direi che è perfetta, ho solo un dubbio sull'immagine TOP (la prima che ho allegato).

Credo che debba essere divisa in 3 (forse è stessa cosa che hai detto tu però):

parte SX, nel quandrato grigio scuro metterò un'immagine + l'ombra di SX
parte centrale che si replica per tutto lo spazio senza problemi (tanto l'evetuale testo verrà scritto sopra in HTML e non sull'immagine)
parte DX con l'ombra di DX

E' corretto??

Direi che la tua solzione è stata la prima cosa che ho pensato (ovvero spezzetare le immagini per definire i vari bordi + il lato superiore) ma mi sembrava impropobile (per le mie capacità) la creazione di un CSS con tale struttura.

Grazie infinite

[Mich_]

Non avevo capito cosa ci facesse il quadrato nero. Credevo facesse parte del contenuto (mi pareva un bottone).

Non e` difficile suddividere il tutto. E` solo complesso. E la complessita` in se` porta il germe dell'errore (piu` una cosa e` complessa e piu` facile e` che ci si mettano errori - o diverse interpretazioni da parte di qualche versione dei browser)

L'abilita` del grafico, a questo punto, sta nel suddividere il meno possibile. Cioe` trovare soluzioni che permettano un diverso "spezzettamento" per limitare il numero dei blocchi.
Eventualmente lasciando un bordo un po' piu` grande, o cambiando il gradiente del colore, ...
Il risultato e` un compromesso tra la "perfezione grafica" e la "semplicita` tecnica".

[Valeria75_bis]

Ma ipotizzando di spezzare l'immagine TOP i 3 parti
L'immagine centrale in 3 parti (ombra SX, bianco, ombra DX)

Come sarebbe il relativo foglio di stile? Il mio problema è proprio questo