Visualizza la versione completa : immagine sulla sinistra, due righe di testo sulla destra
ciucciamellea
03-12-2008, 18:44
ciao a tutti ...
come posso inserire due righe di testo alla destra di una immagine??
cioè metto l'immagine sulla sinistra, e pero poi se voglio mettere due righe di testo a destra non ci riesco perche la seconda riga va a capo righa, perche? (l'immagine è 32X32)
:ciauz: :ciauz:
Originariamente inviato da ciucciamellea
ciao a tutti ...
come posso inserire due righe di testo alla destra di una immagine??
cioè metto l'immagine sulla sinistra, e pero poi se voglio mettere due righe di testo a destra non ci riesco perche la seconda riga va a capo righa, perche? (l'immagine è 32X32)
:ciauz: :ciauz: Molto probabilmente le due righe occupano più spazio in altezza di 32px
come posso inserire due righe di testo alla destra di una immagine??
cioè metto l'immagine sulla sinistra, e pero poi se voglio mettere due righe di testo a destra non ci riesco perche la seconda riga va a capo righa, perche? (l'immagine è 32X32) Questo sucede perche` limmagine e` di default un oggetto inline, e quindi si allinea dentro la riga di scrittura.
Devi trasformare l'immagine in blocco e farla flottare:
...testo testo ...</p>
Nel CSS:
p img {
float: left;
}
Nota che il selettore che ho usato qui e` molto generico e potrebbe avere effetto su altri oggetti della pagina: a seconda di come e` impostata la pagina occorre utilizzare il selettore piu` opportuno.
esattamente come ha detto Mich_ , usi il float:left... e poi se vupi il testo a inizio immagine text-align=top;
ciucciamellea
04-12-2008, 14:37
se io metto align="left" cosi:
...
è uguale no?
Originariamente inviato da lila89
esattamente come ha detto Mich_ , usi il float:left... e poi se vupi il testo a inizio immagine text-align=top; Con una immagine di 32x32 due righe di testo non ci stannp! non centra usare float, va benissimo align ed è più che sufficiente
Originariamente inviato da ciucciamellea
se io metto align="left" cosi:
...
è uguale no? Decisamente NO!!
A parte che l'attributo align e` uno di quelli deprecati (eliminato dalle nuove versioni dello standard), non e` mai consigliabile usare attributi HTML di formattazione: da un lato non riesci a fare una cosa cross-browser (alcuni browser danno priorita` ai CSS ed altri agli attributi HTML), dall'altro allineare non e` uguale a flottare.
Allineare a sinistra vuol dire fa iniziare l'oggetto sul lato sinistro del contenitore (si suppone che ci siano poi altri oggetti allineati a sinistra in modo che il bordo sinistro formi una linea diritta); flottare vuol dire che l'oggetto viene reso flottante, in modo che attorno ad esso gli altri oggetti scorrano, un po' come l'acqua di un fiume attorno ad un ostacolo appoggiato all'argine.
E come ho detto sopra per mettere due (o piu`) righe vicino ad un oggetto, questo deve essere di tipo block, mentre le immagini sono di default inline; il float rende anche l'oggetto di tipo block in modo automatico.
@ Gufo:
Se l'immagine e` alta 32 e il testo 16px, ci stanno esattamente due righe a fianco all'immagine; se invece il testo e` piu` piccolo, le righe possono essere anche tre o piu`.
ciucciamellea
05-12-2008, 14:38
l'immagine di tipo block? cioè?
puoi farmi un esempio semplice con i css con l'immagine e sinistra e due righe a destra ...
:ciauz:
Originariamente inviato da Mich_
@ Gufo:
Se l'immagine e` alta 32 e il testo 16px, ci stanno esattamente due righe a fianco all'immagine; se invece il testo e` piu` piccolo, le righe possono essere anche tre o piu`. Allora; ho fatto una prova e efettivamente un testo di 16px ci stà, la seconda riga pur togliendo tutti gli spazi possibili esce un pò al di sotto, un carattere piò piccolo rientra, nel 32, ma viene comunque una fetecchia mettere due righe in 32px
Originariamente inviato da ciucciamellea
l'immagine di tipo block? cioè?
puoi farmi un esempio semplice con i css con l'immagine e sinistra e due righe a destra ...
:ciauz: L'esempio c'e` gia` sopra ... (vedi il mio primo intervento in questa discussione)
Non e` qui il posto per fare una trattazione teorica degli oggetti HTML. Quella la trovi fatta molto meglio in tutti i manuali (tutorial - guide) HTML e/o CSS.
