problema gestione di 3 immagini

[fasa]

Ciao ragazzi, chiedo a voi :

ho a disposizione 3 immagini su una tabella disposte come in figura :




vorrei fare in modo che stringendo "manualmente" il browser le 2 immagini laterali (gialla e blu) rimanessero "inalterate" e l'immagine al centro (bianca) andasse a nascondersi dietro alle altre 2 laterali






come dovrebbe essere composto il codice affinchè si possa ottenere quanto indicato?

[deleted_110]

credo si possa fare tutto col solo utilizzo dei css, senza ricorrere a javascript

[fasa]

senza dover riscriver il post dall'altra parte... avresti idea di che codice ci vorrebbe?

Grazie.

[deleted_110]

Non c'e' bisogno di riscrivere il post (e' pure proibito dal regolamento) chiedi di essere spostato.

[fasa]

bene.... SPOSTATEMI IL POST , grazie!




nel frattempo se qualcuno ha qualche informazione in merito...

[Mich_]

Se ho capito bene, stai chiedendo come realizzare un layout a tre colonne con laterali fissi e centro variabile. Poi gli sfondi (colore o immagine) li puoi mettere come vuoi.

La cosa piu` semplice e` scegliere tra i vari layout che si trovano in giro quello che realizza i tuaoi scopi. Prova a vedere tra quelli linkati nei "link util" i questo forum, o cercali in rete.

[fasa]

ciao, beh non è propriamente un " layout " volevo fare una "testata" di un sito con tabella "invisibile" e con 2 immagini laterali FISSE che in particolari ristringimenti vanno a "scavalcare" l'immagine centrale.


ne hai mai visto uno già fatto in rete? :master:

[Mich_]

Layout o parte di layout, non e` che cambino i modi per realizzarlo ...

Comunque quello che non avevo capito e` che al centro c'e` un'immagine. Allora la cosa cambia un po'.

Suppongo che l'immagine sia uno sfondo, dato che puo` venir nascosta dalle bande.

HTML:
<div id="testata">
  <div id="t_sin"><img ... /></div>
  <div id="t_des"><img ... /></div>
</div>


CSS:
html, body {
  width: 100%;
}
#testata {
  width: 100%;
  background: url(...) top center;
}
#testata:after {
  display: block; 
  visibility: hidden;
  content: "."; 
  height: 0; 
  clear: both;
}  rif
#t_sin {
  width: ...px;
  float: left;
}
#t_des {
  width: ...px;
  float: right;
}

[fasa]

Ciao Mich_!

l'ho provato , complimenti!! funziona , ma solo una cosa :

le 2 immagini laterali (sinistra e destra) devono stare entrambe nella stessa "riga"

per fare un'esempio semplice :



--#t_sin -- background: url(...) -- #t_des--


mentre attualmente esce così :



--#t_sin -- background: url(...)
-- #t_des--


inoltre background non dovrebbe essere in ripetizione ma un'immagine singola

[Mich_]

Credo di non aver capito (fin dall'inizio).

Posta un po` di codice (praticamente tutto l'HTML della testata e se c'e` anche il CSS).
Anche il DOCTYPE che usi sarebbe utile, dato i browser si comportano in modo diverso a seconda del linguaggio usato.

PS: se posti codice o schemi, usa gli appositi tag VB, che vengono inseriti dai bottoni # oppure PHP sopra l'area di inserimento. Altrimenti il forum toglie la formattazione.