FLUIDO fino ad un certo punto, perchè???

Printable View

10-05-2006, 08.26.10

FLUIDO fino ad un certo punto, perchè???

Buongiorno ragazzi, vi posto parte del css che sto creando per le mie pagine:

Codice HTML:

body {font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; margin-top: 40px; margin-left:10px; margin-right:10px; background: gray; height: 700px;} div#container {position:relative; height:670px; width:100%; background: white; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; text-align: left;} div#testo1 {position: absolute; top:225px; left:450px; width:70%; overflow:auto; width: 450; height: 360px; background: white; filter: alpha(opacity:95); -moz-opacity: 0.95; opacity: 0.95;; padding: 0px 10px 0px 5px; color:black; }

Come potete notare vorrei un contenitore fluido in modo da potersi adattare alle diverse risoluzioni
(1280x1024 a casa, 800x600 università).
Il problema come potete vedere dall'immagine linkata qui
http://img208.imageshack.us/my.php?image=nuovo13bs.gif
è che ridimensionando il contenitore scivola sotto al div testo in modo che "scopre" il background del body gray.
Secondo voi il problema sta perchè ho inserito un overflow nel div testo?
Come fareste voi?
grazie mille come sempre per la vostra attenzione
10-05-2006, 10.11.01

mmm mi verrebbe molto piu semplice aiutarti se vedessi la pagina con il suo codice... Sarebbe possibile un link a quella pagina?

Cmq vedo che in div#testo1 hai messo width a 450 (senza specificare unità di misura..) ma anche a 70%.. Magari si tratta di un CSS hack non so.. cmq sia se vedessi il codice potrei aiutarti
10-05-2006, 16.59.47

... grazie cosa vuol dire "magari è un CSS hack"?
10-05-2006, 19.45.23

Applichi un CSS hack quando cerchi di superare un "difetto" nell'interpretazione dei CSS di un browser, mmm... praticamente sfruttandone un altro difetto (!!).

Piu o meno vuol dire questo :wink:..

Nel tuo caso specifico.. E' per un motivo particolare che hai messo due volte il width nello stesso oggetto? E il fatto che non hai messo l'unità di misura in uno dei due?
10-05-2006, 21.42.04
dementialsite

Quel "width" duplicato a me sembra proprio una svista, visto che un hack per definirsi tale dovrebbe per lo meno contenere dei back-slash o qualcosa del genere (per inciso, con me non hanno mai funzionato...).

Per mantenere il layout fluido dovresti eliminare quel width:450 (pixel) che hai scritto... così il DIV occuperà sempre una percentuale dello spazio della finestra e non una dimensione prestabilita (che causa lo scrolling forzato quando la finestra diventa troppo stretta)...

Statemi bene...
11-05-2006, 07.16.46

Sì il problema è lì, perchè io vorrei che il div sia fluido fino ad assumere il valore di 450 (px, se ho capito bene se non metto px è sottointeso...? comunque ora ho aggiunto px)
Quindi si dovrebbe ridimensionare assumendo il valore del 70% rispetto al container per poi (SI DOVREBBE...) bloccarsi quando arriva a toccare i 450 px....

ma non si comporta così.... perchè???
grazie
11-05-2006, 08.00.18
dementialsite

Citazione:

Originalmente inviato da archidaniele

Sì il problema è lì, perchè io vorrei che il div sia fluido fino ad assumere il valore di 450 (px, se ho capito bene se non metto px è sottointeso...? comunque ora ho aggiunto px)
Quindi si dovrebbe ridimensionare assumendo il valore del 70% rispetto al container per poi (SI DOVREBBE...) bloccarsi quando arriva a toccare i 450 px....

ma non si comporta così.... perchè???
grazie

Puoi usare questo CSS, che pero' funzionera' solo con Firefox e Opera:

Codice:

... { width:70%; max-width:450px }

In alternativa, puoi tentare questo (spero di scriverlo giusto):

Codice:

... { width:expression(document.all.elementID.clientWidth <= 450 ? 0.7 * document.body.clientWidth : 450); min-width:70%; max-width:450 }

Stammi bene...
11-05-2006, 19.05.17

grazie ma pare che nun funge....
12-05-2006, 09.43.43
funcool

Probabilmente lo avrai già corretto, ma nel secondo codice il forum ha aggiunto uno spazio (tra clientWidt e h) che non ci dovrebbe essere.
12-05-2006, 12.37.32
dementialsite

Citazione:

Originalmente inviato da funcool

Probabilmente lo avrai già corretto, ma nel secondo codice il forum ha aggiunto uno spazio (tra clientWidt e h) che non ci dovrebbe essere.

Aggiungo che nel codice c'è anche un "elementID" che devi sostituire con il nome del DIV corrispondente...

Statemi bene...
12-05-2006, 17.03.00

Uhm, ma si possono usare espressioni e condizioni anche in css? questo non lo sapevo..
12-05-2006, 17.54.52

Citazione:

Originalmente inviato da koraz

Uhm, ma si possono usare espressioni e condizioni anche in css? questo non lo sapevo..

si si possono fare questo genere di espressioni... Si usano spesso per risolvere qualcuna delle solite incompatibilità di IE.. Sono appunto state introdotte da IE..

P.S.: Usale soltanto per fare bere qualcosa ad IE quando serve ma per tutto il resto vanno usate il meno possibile... il w3c non mi pare le adori..
12-05-2006, 17.58.55

buono a sapersi ^^
12-05-2006, 21.15.58

grazie a tutti ragazzi, ora riprovo
buonaserata!
13-05-2006, 00.43.27

Da quel che mi è sembrato di capire, più che il
max-width:450px;
ad archidaniele servirebbe l'opposto,
min-width:450px;

Giusto?
Se non sbaglio stai sempre basandoti sul layout di quell'altro sito a cui hai fatto un paio di volte riferimento per il layout elastico.
Per la cronaca l'altro sito la larghezza minima (sotto il quale non strigersi ulteriormente) è stata realizzata nel più banale dei modi, ovvero c'è una immagine larga tot che blocca il ristringimento della larghezza, in quanto un testo può andare a capo mentre una immagine (se non specificato diversamente con la proprietà overflow dei css) forzerà sempre la larghezza di un contenitore.
Quindi puoi utilizzare se vuoi il trucco più vecchio del mondo, cioè una immagine di 1 pixel trasparente larga 450 e hai risolto, anche perché se non ricordo male il min/max-width ancora non è ben supportato.