Ciao a tutti.
Avrei bisogno di inserire alcune immagini con del testo intorno.
Con il seguente codice il testo inizia accanto all'imagine, ma parte dall'alto mentre io vorrei farlo partire dalla metà. Come posso fare?
Grazie
Ecco il codice:
img style="height: auto; max-width: 100%; float: left; margin: 10px 20px 10px 20px; border: none;" alt="img" src="http://www....jpg"
Il testo non l'ho inserito perchè lo ritenevo superfluo, comunque va dopo l'immagine inserendo il tutto (immagine e testo) in un div o qualcosa di simile.
Ho da inserire molte immagini, qualcuna con poco testo e altre con moltissimo testo. Quindi avrei bisogno di qualcosa (uno script o altro) di automatico che fa partire il testo dal centro e pian piano riempire prima tutta la parte laterale e poi va ad occupare lo spazio sotto l'immagine per far si che se il testo è breve parte dalla metà, ma se fosse lungo piano piano riempie la parte laterale.
Con l'HTML non ci sono riuscito.
Immagino che tu stia facendo tutto questo per la versione desktop del sito. Se posso darti un consiglio, prima di "impazzire" sulla distrubizione del testo come vuoi tu per la versione desktop, hai pensato che poi dovrai farlo anche per la versione tablet e smartphone? Come si muoveranno gli oggetti nelle tue pagine, man mano che le dimensioni dello schermo si ridurranno?
L'HTML con i CSS ti permette di distribuire il tutto nelle pagine.Originariamente inviata da dluigid
Prova a studiarti due div affiancati e ragiona sugli allineamenti verticali.
Vedi se questa guida può esserti utile: http://www.html.it/pag/18971/centrar...lmente-un-div/
No, non solo per versione desktop, ma anche responsive. Infatti nell'immagine ho inserito "max-width: 100%;" e questo la rende flessibile.
Ho già provato con il CSS inserendo "display:table-cell;", ma non va bene perchè se si inserisce molto testo, superando l'altezza dell'immagine, questo non va ad occupare lo spazio libero sotto l'immagine, ma continua nella sua colonna ed esteticamente è bruttissimo.
Posta il codice HTML ed il CSS, così non si capisce niente.
Ecco il link dove ci sono tutte le mie prove che mi hanno consigliato.
La prima prova è quella con "display:table-cell;" quella che mi hai consigliato suggerendomi il link che come ho detto non va bene.
Grazie
http://html.luigidellaquila.it/img.html
Con display:table-cell si può avere il risultato "vertical-align: middle;", ma se il testo supera l'immagine continua in verticale e non si dispone sotto.
Con l'immagine in float se il testo supera l'immagine si dispone automaticamente sotto, ma non si può avere l'effetto "vertical-align: middle;".
Comunque ho risolto in questo modo, non so se sia coretto oppure potrebbe dare qualche problema nella versione mobile.
Uso l'mmagine in float. Se il testo è poco utilizzo più <br> mentre se il testo è molto riduco <br> fino a non inserirlo se il testo è molto lungo.
Rispondi quotando
