posizionamento di elementi grafici

[mahamatt]

Ho un layout in %, a due colonne, con un menu fisso a sx e colonna fluida per il testo a dx.

Il contenitore ha un filetto ombreggiato di sfondo, alto 1 px:

div#contenitore {background:transparent url(filetto.png) repeat-y top left;}

il menu sx è trasparente, ma il filetto percorre le voci del menu e prosegue per tutta l'altezza del contenitore.

Però, per non "troncare" lo sfondo al termine del contenitore, ho realizzato un piccolo finale.png che costituirebbe appunto il "finale" del filetto (una semplice sfumatura nel colore di sfondo). Andrebbe inserito nell'angolo basso-sx, dove dovrebbe sovrapporsi al filetto (per farlo sfumare).

Il fatto è che l'altezza del contenitore non è fissa, ma varia a seconda del testo (in certe pagine compaiono le scrollbar). L'ideale sarebbe poter aggiungere nelle regole del contenitore:

background:url(finale.png) no-repeat bottom left

ma il background per il contenitore è già definito, e dubito sia possibile inserire 2 immagini di bg :master:

Come posso inserire questo elemento grafico, senza sconquassare tutto il layout?
Devo per forza ricorrere al posizionamento assoluto, o ci sono altri modi?

[Mich_]

Non so quanto sia grande il pezzo sfumato, per cui e` difficile poter rispondere.
Comunque ho gia` visto problemi di questo tipo, con soluzioni differenti, per cui dovresti trovare con una ricerca nel forum, tra i "link utilil" o in rete.

Esempio 1:
Aggiungere un blocchetto, sotto il blocco con il testo, che contiene solo la sfumatura e uno spazio vuoto

Esempio 2:
Aggiungere in fondo al blocco principale un blocco sovrapposto che sia trasparente dappertutto tranne nel pezzo della sfumatura

Esempio 3:
Creare degli spazi in piu` nella pagina, che permettano l'inserimento delle sfumature (e` una rivisitazione dell'esempio 1, con l'aggiunta di trucchi grafici opportuni).

[mahamatt]

Faccio fatica a fare ricerche (nei motori di ricerca o nel forum), perché non so con quali parole chiave sia "definibile" questa situazione che ho descritto

Comunque, se l'informazione può essere utile, il pezzetto sfumato è di 20px di altezza x 15px di larghezza; se appoggiato a sx, si allinea perfettamente con il filetto di sfondo.
Avevo pensato infatti all'esempio 2 (blocco sovrapposto in trasparenza), ma come faccio a sovrapporre il blocco appoggiandolo al lato inferiore del contenitore, che ha altezza variabile? con position:absolute?

E, nel caso dell'esempio 1, il blocchetto andrebbe comunque posizionato in modo assoluto?

[Mich_]

Se usi posizionamenti assoluti ti metti nei pasticci: browser diversi interpretano in modo diverso.

Invece devi usare posizionamento relativo, usando anche gli attributi
left - oppure right
top - oppure bottom
e chiaramente lo z-index

Il posizionamento relativo e` realtivo al blocco che lo contiene, quindi devi avere un blocco che contiene sia il "contenuto" che l'immagine in sovraimpressione.

Se puoi metti l'immagine in sovraimpressione come sfondo in un blocco opportuno (ma ricorda di inserire almento uno spazio vuoto nel blocco).

[Leilond]

quando devo fare cose del genere uso un div aggiuntivo

<div id="container">
  <div id="container2">
    <div id="colonna1">
       colonna
    </div>
    <div id="colonna2">
       colonna
    </div>
  </div>
</div> 

Il container avrà eventualmente i margini settai MA I PADDING A ZERO con l'immegine di sfondo come hai fatto tu

div#container {background:transparent url(filetto.png) repeat-y top left; padding: 0px;} 

Mentre il contenitore interno avrà la chiusura in posizione bottom left con eventuali padding valorizzati ma MARIGIN A ZERO

div#container2 {background:url(finale.png) no-repeat bottom left; margin: 0px} 

E il gioco è fatto

[mahamatt]

Originariamente inviato da Mich_
Se usi posizionamenti assoluti ti metti nei pasticci: browser diversi interpretano in modo diverso.

Ma infatti!! con i posiz. assoluti in teoria avrei saputo farlo, ma volendo evitarli, ho preferito domandare qui

Lo z-index mi capita di usarlo, ma sembra che in alcuni casi non funzioni... o magari sono io che sbaglio qualcosa....

Originariamente inviato da Leilond
quando devo fare cose del genere uso un div aggiuntivo

Dunque, una "doppia" (simulata) background-image... ci avevo pensato, in effetti, alla soluzione dei 2 container nidificati, ma non sapevo quanto fosse corretta / funzionale.

Grazie mille ad entrambi!

[Leilond]

Si, ma di solito lo uso quando voglio ad esempio mettere uno "sfondo" alle colonne di destra e sinistra in modo che siano lunghi quanto tutto il container e non quanto la colonna
Per quello che devi fare tu forse è meglio un semplice div SOTTO il "container" con margin-bottom del container margin-top del div a zero e l'immagine messa in "top left"... così non ti "bruci" il doppio container per un immagine senza repeat... perchè se ti fai prendere la mano da questa tecnica dopo un po' c'ha troppi div che fanno da "container del container" e diventa brutto