posizionamento e overflow

[caruccis]

salve, ho questo tipo di problema.
ho usato photoshop creando un layout. L'ho diviso con lo "slice tool" in diverse parti come da file allegato. Il posizionamento e' di tipo assoluto. La zona numerata 17, che e' una img in background, vorrei che in partenza avesse una lunghezza fissa, tipo 400px e che in base al testo interno si allungasse in automatico. Infine il div n. 18 invece dovrebbe essere sempre al di sotto del 17 e quindi non posso posizionarlo in modo assoluto. Ho provato in diversi modi, ma niente.
grazie

[caruccis]

up

[Mich_]

Il problema e` proprio il posizionamento assoluto.

Converrebbe non usare MAI il position.
Per posizionare in orizzontale conviene usare il float:left; (ricordarsi poi di inserire anche un clear).

Nel tuo caso, vista la quantita` di immagini, probabilmente devi usare misure assolute per le larghezze, e molte delle altezze, mentre non devi definire l'altezza del blocco che si deve allungare (oppure definisci solo il min-height).

Naturalmente devi sviluppare controllando con FireFox o altro browser standard: gli adattamenti per IE vanno realizzati dopo.

[caruccis]

non definendo la lunghezza del div da allungare e lasciando inalterati gli altri stili, il suindicato blocco 18 mi si posiziona sempre allo stesso punto poiche' esso contiene ancora il posizionamento assoluto. Ma se elimino il posizionamento del div 18 , ho notato che compare in alto a sinistra, cioe' come se fosse il primo blocco e non si accoda comunque.
...Non so proprio come fare.

[Mich_]

Non puoi "cambiare politica" in un blocco solo: gli altri si ribellano.

Il fatto e` che i blocchi posizionati absolute escono dal normale flusso (ma dipende dai browser: tutti hanno dei bachi in questo senso, ma ciascuno ha un baco diverso), per cui e` come avere due serie di blocchi (quelli assoluti e gli altri) che vanno ognuna per conto proprio.

[caruccis]

allora visto il layout che dovrei costruire in base al psd, come mi consiglieresti di agire?
...Anche se devo cambiar strada....
grazie

[LA VALE]

Ti devi costruire un layout formato da vari div..

Inizi con un div contenitore, che sarà quello che conterrà tutti gli altri div...

Poi puoi iniziare con div haeder, con come sfondo l'immagine delle barche...

Per il menu, puoi utilizzare una lista "ul", e ad ogni singolo "li" puoi mettere uno sfondo diverso...

Poi se hai la necessità di crare due blocchi uno accanto all'altro, dovrai creare due div rendendoli float...

Avrai bisogno inoltre di div o br con attributo clear per eliminare il float, e inserire ad esempio un footer...

<div id="contenitore">

<div id="menu">

<ul>
[*]



</div>

<div class="clearer">
</div>

<div id="dueblocchi">

<div id="bloccosinistra">
</div>

<div id="bloccodestra">
</div>

</div>

<div class="clearer">
</div>

<div id="footer">
</div>

</div>

Più o meno potrebbe essere una bozza da seguire...
Naturalmente il codice va scritto a mano o con un editor html, e corredato di file css..

[caruccis]

ok, allora ho seguito il consiglio di LA VALE e ho reimpostato i tagli differentemente. Ma ora all'indirizzo http://www.progressoweb.it/sollevante/chisiamo.php ho notato una differenza tra IE e FF. In IE, dopo il div della barra di navigazione mi lascia un vuoto di circa 5px di altezza che non so proprio come mandar via, mentre su FF non succede.
Un aiutino poiche' questo e' il mio primo e vero sito in css.
Grazie per l'attenzione.

[caruccis]

up, please

[Mich_]

Potrebbe trattarsi del bug di IE in cui viene raddoppiato il margine dei blocchi float (vedi tra i "link utili" o fai una ricerca nel forum - bottone in alto).

Potresti fornire ad IE una "correzione" alla misura tramite i commenti condizionali (vedi "link utili").