css liquido

[krumiro]

Salve,
Secondo voi è possibile fare una cosa simile:



dove il layout è massimo 1024px (cioè a risoluzioni superiori si deve vedere come fosse a 1024px) e:

A: è fisso
B: si deve stringere nel caso di risoluzione inferiore
C: è fisso
D: si deve restringere/scomparire nel caso di risoluzione inferiore


Aiut....

[Mich_]

Ci provo:

<div id="container">
  <div id="bloccoA">

A</p></div>
  <div id="bloccoB">

B</p>

testo testo testo ...</p></div>
  <div id="bloccoD">

D</p></div>
  <div id="bloccoC">

C</p></div>
</div>

CSS:
html,body {
  width: 100%;
  font-size: 100%;
}
#container {
  width: 100%;
  max-width: 1024px; /* occorre un hack JS per IE6 */
}
bloccoA {
  width: 25em;
  float: left;
}
bloccoB {
  float: left;
  width: 50%;
  min-width: 40%;
  max-width: 60%;
}
bloccoD {
  float: right;
  max-width: 20%;
  min-width: 10em;
  overflow: auto;
}
bloccoC {
  float: right;
  width: 25em;
}

Nota l'inversione dei blocchi D e C nel codice HTML (per poter usre il float right)

Non si puo` far "sparire" un blocco. E con solo CSS nonsi puo` neppure nasconderlo "a seconda": per questo e` necessario un programma, tipo JS (lato client) oppure qualcosa lato server (PHP, ASP, ...)

Ho usato dimensioni in em, piu` adatte a contenere testi, ma se i blocchi contengono principalmente immagini e` meglio usare dimensioni in px.

Perche` la cosa funzioni, e` necessario che il blocco B abbia del contenuto che occupa lo spazio in larghezza.