testo "elastico"

[etruska]

testo "elastico"

Ciao a tutti. Vorrei mettere sulla pagina un blocco di testo che si ridimensioni a seconda della risoluzione del monitor in modo che, per basse risoluzioni, il testo diventi su più righe (le dimensioni del font devono rimanere le stesse).
Se è possibile, il posizionamento dovrebbe essere tale da essere svincolato dal flusso del codice (position:absolute ? )

Si può fare?
Grazie!

[laburno]

Ciao Etruska e benvenuta/o,
per fare quello che dici devi impostare la larghezza del blocco contenente il tuo testo in percentuale (width: 90%; ad esempio).
In questo modo il blocco prende come dimensione il 90% del blocco che lo contiene. Se non è contenuto da altro allora calcola il 90% in relazione alla larghezza della finestra del browser, e quindi in funzione della risoluzione.

Il posizionamento assoluto è come dici tu: ti svincola dal normale flusso del codice

[etruska]

Putroppo non è così semplice perchè nella pagina ci sono 2 elementi (a dx e a sx del testo, un'immagine e una colonna di menu) che hanno dimensione fissa per qualsiasi risoluzione e non riesco a trovare una percentuale che di adatti alle diverse risoluzioni. Se fisso quella per l'800x600 a 25% (e ci sta perfettamente), quando passo al 1024x768 il testo rimane ancora troppo stretto e la pagina è mezza vuota.

[laburno]

Allora penso che non dovresti usare il posizionamento assoluto.

Se ho capito bene te vorresti un layout liquido a tre colonne, con quelle di destra e sinistar di dimensione fissa? cioè che vari in dimensione solo la colonna centrale dove sta il tuo testo?

[etruska]

Più o meno...

Il layout è qualcosa del genere:

Praticamente la base sono 3 colonne in tabella di cui le 2 a destra hanno dimensione fissa e quella a sinistra (gialla) è ridimensionabile.
La foto è piazzata con posizionamento assoluto. Il sottotitolo e la descrizione del sito pensavo di metterli con posizionamento assoluto in modo che siano i primi testi della pagina, visto che contengono le keywords principali.

Non ho molta dimestichezza con i layout in css, fino a ieri usavo solo le tabelle.

P.S.: grazie dell'aiuto!

[laburno]

Ciao,
allora ti sconsiglio il posizionamento assoluto degli elementi. Diventa un casino da gestire in questo modo, e puoi ottenere un risultato analogo giocando con gli z-index dei div e un po di margini negativi.

Ti scrivo veloce un idea, e ti allego anche un immagine così è più chiaro:

Il box verde è il wrapper: ci mettiamo dentro tutti i div e lo imposti con un width in percentuale così da avere un layout liquido.
Il box in giallo è l'header e dentro ci andrai a posizonare nel modo che più ti piace il Titolo, la Foto, il Sottotitolo etc. Anche a questo dai width:100% così si dimensiona in funzione del wrapper
Il box in blu è il contenuto e anche a lui regaliamo un width 100%.

Passiamo alle colonne:
Nell'immagine che hai postato te le colonne sono più alte del box del contenuto e sovrapposte all'header: questo effetto puoi ottenerlo impostando uno z-index ad entrambe (colonne marrone e arancio) ed all'header in modo che risultino su un livello più alto (i.e: z-index: 1 per le colonne e 0 per l'header), in questo modo si sovrappongono. Poi, senza usare i posizionamenti assoluti puoi impostare dei margini relativi perché si "alzino" rispetto alla loro posizione (coprendo una porzione dell'header).

Non è una soluzione definitiva, c'è da studiarci ancora un po e fare qualche prova, ma potrebbe risparmiarti qualche posizionamento strano.

[etruska]

Però mi rimane sempre il dubbio su come posizionare il sottotitolo e la descrizione del sito in modo che, quando la header si restringe, non finiscano sulla foto di sinistra.

Altro dubbio: se do al box del contenuto una larghezza del 100%, una parte di testo non finisce sotto alle colonne di destra?

[laburno]

@Etruska said:

Però mi rimane sempre il dubbio su come posizionare il sottotitolo e la descrizione del sito in modo che, quando la header si restringe, non finiscano sulla foto di sinistra.

Beh, devi considerare una risoluzione minima per la quale vuoi progettare il tuo layout. 800x600 sta già scomparendo e si progetta gia per 1024x768..

Altro dubbio: se do al box del contenuto una larghezza del 100%, una parte di testo non finisce sotto alle colonne di destra?A dire il vero c'ho pensato scrivendo. Non t'ho proposto una soluzione ma una traccia, e il dubbio è legittimo. Io così senza provarlo non te lo dire sinceramente ma per costruire un layout tre colonne liquido con due fisse si trovano molti esempi.
Ad esempio puoi dare un'occhiata alla soluzione adottata qua:
http://www.manisheriar.com/holygrail/index.htm

[etruska]

Alla fine ci sono riuscita, ma l'ho fatto con le tabelle, solo con il css non riuscivo a renderlo adattabile ad ogni risoluzione, come dicevi tu dovevo impostare una risoluzione di base e mi sentivo limitata.
Nelle statistiche della prima versione del sito, fatta "a manoni", ho visto che c'è ancora parecchia gente che usa la 800x600 e non mi sentivo di tagliarli fuori...

Grazie dell'aiuto!