Adattabilità contenuto, meglio Celle o Div?

[LindaXp]

Ciao raga
mi trovo in serie difficoltà,
ho davanti questo layout che, come vedete, deve essere adattabile o elastico
al contenuto.



i blocchi tagliati dalle linee blu (tranne ovviamente gli spigoli) dovrebbero allungarsi o restringersi SOLO in base alla grandezza del contenuto, di conseguenza non c'è una lunghezza ed una altezza fissa.

Con il table bene o male si riesce a fare ma con i div?
è una missione impossibile?

[Henry.Chinaski]

Cerca layout elastico nella sezione CSS del forum.
P.S.
Mai impostare un sito con le tabelle; cerca sempre una soluzione via-div

[LindaXp]

ho provato ma la questione nn è così semplice come sembra.
Ho letto degli em, ma gli em già ti fissano una larghezza ed io nn voglio fissarla!
io voglio che sia la grandezza del contenuto a "elasticizzare" in base alle varie dimensioni che gli do io, non quello che gli sta attorno,
non so se ho reso l'idea

ad esempio se il quadrato bianco del contenuto lo imposto al doppio di grandezza,
gli altri blocchi (midtop, leftmid, rightmid, midbottom) devono adattarsi automaticamente.

[LindaXp]

non so se così posso spiegarmi meglio...

ho tre div, sfondosx, contenuto e sfondodx


vorrei che aumentando l'altezza del div contenuto aumentasse anche quella
di sfondosx e sfondodx con background su asse y, il codice che ho digitato è questo:

<div id="warp">

<div id="sfondosx"></div>
<div id="contenuto">testo contenuto bla bla</div>
<div id="sfondodx"></div>

</div>

mentre il css associato è:

#warp {margin:0 auto;}
#sfondo sx {  background-image:url('sx.png'); background-repeat:repeat-y; width:54px; float:left;}
#contenuto { margin: 0 54px 0 54px; height:300px;}
#sfondo dx {  background-image:url('dx.png'); background-repeat:repeat-y; width:54px; float:right;}
</div>

non so se adesso è + chiaro
Linda

[Iron83]

Non ho capito bene ma provo a risponderti...

prova a creare due div, uno sfondo e l'altro contenuto:

html

<div id="sfondo">
 <div id="contenuto">
 </div>
</div> 

css

#sfondo {
width: 100%;
background: url(miaimmagine.jpg/gif/png) repeat-x;
}

#contenuto {
width: 800px;
height: 600px;
background: #FFFFFF;
} 

Non ho testato il funzionamento, prova e facci sapere

ps: l'immagine tagliala ad esempio 40x40 in modo da avere un effetto stripes continuo

[fcaldera]

tutta la cornice esterna può essere realizzata con un div con angoli arrotondati (border-radius ed implementazioni proprietarie sui vari browser), background nero e un padding di circa 20px

il div interno è anch'esso un div con bordo arrotondato senza altezza/larghezza definita, sfondo uniforme giallo (o un immagine a bande diagonali) e un ulteriore padding (uniforme) per distanziare i contenuti

eventuali vincoli sulle dimensioni vanno dati sul contenitore esterno. Per IE tramite commenti condizionali puoi caricare una libreria JS che arrotonda gli angoli