Ciao a tutti! La pagina di ogni evento del club a cui sono iscritto, è costituita da immagini con il testo a fianco, una volta a sinistra e una volta a destra. Questo l'ho ottenuto con una tabella <tr><td> a due colonne e più righe. Con CSS posso creare invece dei DIV con l'immagine libera di 'galleggiare' con il FLOAT; come posso far sì che l'immagine si disponga alternativamente a sinistra e a destra con il commento/testo affiancato? Con un loop? Grazie a chi mi potrà aiutare
Ciao e benvenuto, in linea generale potresti usare :nth-child() col valore odd oppure even in modo da selezionare gli elementi dispari o pari. Questi elementi devono chiaramente essere fratelli, cioè essere tutti figli di uno stesso genitore; potresti usarlo magari per i div contenitori, se questi stanno allo stesso livello, e selezionare quindi la relativa immagine a cui andrai ad applicare il float.
Senza vedere come hai impostato il tutto non posso essere più preciso. Fai magari qualche prova, se poi non riesci sarebbe utile postare il link della pagina o un esempio su un playground o un estratto del relativo codice HTML.
Buon proseguimento
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie del suggerimento!
Ho provato questo:
Purtroppo, se non fisso le percentuali del testo, i testi vanno fuori o non si affiancano. Penso che ci sia un modo per automatizzare gli spazi, visto che le mie foto non hanno sempre le stesse dimensioni e possono essere verticali e orizzontali. Le foto, che non si vedono, sono le prime due di questa pagina:codice HTML:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{ width:960px; margin: 0px auto; } img:nth-child(odd){ float: left; margin-right:20px; } img:nth-child(even) { float:right; margin-right:20px; } p { text-align: justify; } p:nth-child(even) { float:right; width:50%; } p:nth-child(odd) { float:left; width:52%; } </style> </head> <body> <div> <img src="niko20-1.jpg" alt="niko20-1.jpg" (43086 byte) height="298" width="448" /> <p>Niko Romito, cuoco a tre stelle e ormai famosissimo, recentemente insignito a Madrid come migliore chef d’Europa, è stato intervistato da Anna Berghella, avvocato, consorte del nostro presidente Vittorio Masci, e da Massimo Di Cintio, giornalista enogastronomico.</p> <p>Niko ci ha raccontato dei suoi inizi, alla morte del padre, quando era studente di Economia e Commercio e pensava di rivendere il ristorante paterno a Rivisondoli, non sapendo niente di cuicna e non essendovi allora, nel 1999, una cultura della cucina e della figura del cuoco, come oggi, per merito della televisione, che di solito anticipa i tempi e le tendenze.</p> <img src="niko20-2.jpg" alt="niko20-2.jpg" (55655 byte) height="448" width="432" /> </div> </body> </html>
http://rotarysulmona.altervista.org/nikoromito20.html
che fa uso di tabelle, ma forse è lenta e antiquata. Grazie ancora per l'aiuto e buon weekend!
Originariamente inviata da KillerWorm
Ciao e benvenuto, in linea generale potresti usare :nth-child() col valore odd oppure even in modo da selezionare gli elementi dispari o pari. Questi elementi devono chiaramente essere fratelli, cioè essere tutti figli di uno stesso genitore; potresti usarlo magari per i div contenitori, se questi stanno allo stesso livello, e selezionare quindi la relativa immagine a cui andrai ad applicare il float.
Senza vedere come hai impostato il tutto non posso essere più preciso. Fai magari qualche prova, se poi non riesci sarebbe utile postare il link della pagina o un esempio su un playground o un estratto del relativo codice HTML.
Buon proseguimento
Ultima modifica di KillerWorm; 16-05-2020 a 21:41
Ciao, dovresti usare dei contenitori per racchiudere le coppie foto-testo.
Il float dovresti applicarlo solo alle immagini così da lasciare che il testo si disponga eventualmente attorno all'immagine stessa e in questo modo non serve specificarne la larghezza.
Potresti poi usare gli elementi <figure> e <figcaption> per poter inserire delle descrizioni per le immagini (come da tuo link).
A questo punto il float lo vai ad applicare per gli elementi figure.
Quando usi il float sulle immagini o in questo caso sugli elementi <figure>, metti questi prima del testo e applica overflow:auto sul div contenitore in modo da ottenere quello che in gergo viene detto clearfix.
Potresti inoltre stabilire una larghezza fissa o massima per le immagini, in modo da cercare di mantenere una certa linearità per l'impaginazione. Io eviterei anche di specificare singolarmente le dimensioni su ogni tag <img> ma ovviamente questo comporta un effetto reflow durante il caricamento delle immagini; questo può essere evitato, appunto, specificando le dimensioni come hai fatto tu.
Nel tuo codice, la parte tra parentesi nei tag <img>, dove è scritto byte, non è valida e dovrebbe essere eliminata.
Chiaramente si può fare in svariati modi, qui un semplice esempio seguendo queste poche indicazioni:
.codice HTML:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{ width: 960px; margin: 0px auto; } .main > div{ overflow: auto; margin: 10px 0; background: #f5f5f5; } .main > div figure{ margin: 0; width: 400px; text-align: center; font-style: italic; vertical-align: middle; background: #eee; } .main > div:nth-child(odd) figure{ float: left; margin-right:20px; } .main > div:nth-child(even) figure{ float:right; margin-left:20px; } .main img{ max-width: 100%; } </style> </head> <body> <div class="main"> <div> <figure> <img src="http://rotarysulmona.altervista.org/immagini/niko20-1.jpg"> <figcaption>Niko Romito intervistato da Anna Berghella.</figcaption> </figure> <p>Niko Romito, cuoco a tre stelle e ormai famosissimo, recentemente insignito a Madrid come migliore chef d’Europa, è stato intervistato da Anna Berghella, avvocato, consorte del nostro presidente Vittorio Masci, e da Massimo Di Cintio, giornalista enogastronomico.</p> </div> <div> <figure> <img src="http://rotarysulmona.altervista.org/immagini/niko20-2.jpg"> <figcaption>Niko Romito con Massimo Di Cintio.</figcaption> </figure> <p>Niko ci ha raccontato dei suoi inizi, alla morte del padre, quando era studente di Economia e Commercio e pensava di rivendere il ristorante paterno a Rivisondoli, non sapendo niente di cuicna e non essendovi allora, nel 1999, una cultura della cucina e della figura del cuoco, come oggi, per merito della televisione, che di solito anticipa i tempi e le tendenze.</p> </div> </div> </body> </html>
Fai sapere, buon proseguimento.
[mod]
Occhio al regolamento di sezione, quando posti del codice sul forum vanno usati gli appositi tag di formattazione. Per stavolta ho corretto io, fai attenzione in futuro, grazie.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
KillerWorm, ti ringrazio moltissimo per la rielaborazione del CSS! Ora penso che salverò il CSS a parte, dato che le pagine sono tutte più o meno uguali e quindi le pagine successive alla modifica avranno un ingombro meno evidente. Solo un paio di cose: non sempre metto i titoli sotto le foto - e allora basterà non usare <figcaption> - ma alcune volte non metto commenti e lascio la serie di foto. In quel caso le foto si disporranno a sinistra/destra o a destra/sinistra come il testo, lasciando il FLOAT solo per la prima?
Ancora grazie e buona domenica!!!
Giusta sceltapenso che salverò il CSS a parte [...] avranno un ingombro meno evidente
Non ho capito bene cosa intendi per "FLOAT solo per la prima".non sempre metto i titoli sotto le foto - e allora basterà non usare <figcaption> - ma alcune volte non metto commenti e lascio la serie di foto. In quel caso le foto si disporranno a sinistra/destra o a destra/sinistra come il testo, lasciando il FLOAT solo per la prima?
Premetto che quel codice puoi intenderlo come un semplice esempio per quella particolare situazione; se ti serve risolvere altre disposizioni del layout bisogna chiaramente valutare come "aggiustare" il codice secondo le esigenze.
Certo, l'elemento <figure> può essere usato senza <figcaption> anche se la maniera più "naturale" è quella di usarli in coppia.
Qui qualche lettura:
The figure & figcaption elements
The Right Way to Use Figure & Figcaption Elements
- Nota a margine -
Considera che nel mio esempio ho omesso di proposito l'attributo alt per i tag <img> perché, in termini di accessibilità, il testo in <figcaption> fa da sostituto.
Questo significa che se non usi <figcaption> è obbligatorio usare l'attributo alt
------------------
Tieni conto che nel mio esempio ho applicato il float per gli elementi <figure>, per cui saranno questi a disporsi a sinistra e destra in modo alternato relativamente alla sequenza dei div contenitori.
In questo caso inserendo più elementi <img> dentro un unico <figure>, l'intero blocco sarà disposto a destra o sinistra.
Teoricamente potresti usare comunque semplici <img> fuori dal <figure>, ma in tal caso andrà presumibilmente aggiunta qualche altra regola, ad esempio per rendere flottanti questi elementi, da valutare a seconda delle tue esigenze.
Fai sapere magari quale risultato vorresti ottenere di preciso, vediamo se possiamo ragionare sul CSS.
Grazie, buon proseguimentoAncora grazie e buona domenica!!!
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Se in <figure> posso inserire più immagini, questo risponde alla mia oscura domanda sul 'FLOAT solo per la prima (immagine)', dato che si disporranno a sinistra e a destra nello spazio disponibile della larghezza del Body o del Div (a proposito, cosa cambia?). Credo di capire che le dimensioni in byte occupate dell'immagine non si devono più scrivere (avevo iniziato quando ancora c'era la versione precedente di HTML), il che era una bella 'rottura'. Per ora non ho altre domande, devo solo riconvertire la 'pagina tipo' degli eventi, inserendo anche un colore o una trama di sfondo (che era già presente), sempre nel codice CSS. Se avrò altre domande, tornerò alla carica. Ancora grazie infinite!
Giusta scelta
Non ho capito bene cosa intendi per "FLOAT solo per la prima".
Premetto che quel codice puoi intenderlo come un semplice esempio per quella particolare situazione; se ti serve risolvere altre disposizioni del layout bisogna chiaramente valutare come "aggiustare" il codice secondo le esigenze.
Certo, l'elemento <figure> può essere usato senza <figcaption> anche se la maniera più "naturale" è quella di usarli in coppia.
Qui qualche lettura:
The figure & figcaption elements
The Right Way to Use Figure & Figcaption Elements
- Nota a margine -
Considera che nel mio esempio ho omesso di proposito l'attributo alt per i tag <img> perché, in termini di accessibilità, il testo in <figcaption> fa da sostituto.
Questo significa che se non usi <figcaption> è obbligatorio usare l'attributo alt
------------------
Tieni conto che nel mio esempio ho applicato il float per gli elementi <figure>, per cui saranno questi a disporsi a sinistra e destra in modo alternato relativamente alla sequenza dei div contenitori.
In questo caso inserendo più elementi <img> dentro un unico <figure>, l'intero blocco sarà disposto a destra o sinistra.
Teoricamente potresti usare comunque semplici <img> fuori dal <figure>, ma in tal caso andrà presumibilmente aggiunta qualche altra regola, ad esempio per rendere flottanti questi elementi, da valutare a seconda delle tue esigenze.
Fai sapere magari quale risultato vorresti ottenere di preciso, vediamo se possiamo ragionare sul CSS.
Grazie, buon proseguimento
Non riesco a capire il tuo discorso.Se in <figure> posso inserire più immagini, questo risponde alla mia oscura domanda sul 'FLOAT solo per la prima (immagine)'
Nel mio esempio ho applicato il float agli elementi <figure>, non a <img>.
Considera i tag HTML come delle scatole, in cui è possibile metterci dentro delle cose o delle altre scatole. L'elemento <figure> è una scatola dove puoi metterci dentro diverse cose tra cui una o più <img>.
Se applichi il float a questa scatola (<figure>), l'intera scatola si sposta, quindi va da sé che tutto il suo contenuto si sposta assieme a questa.
Le <img> contenute dentro un singolo <figure> risulteranno quindi "spostate" tutte assieme a destra o sinistra perché la scatola stessa che le contiene è spostata a destra o sinistra.
Non capisco il discorso della "prima immagine".
Nel caso del float, lo spazio disponibile è sempre da considerarsi in riferimento al *genitore*, cioè al contenitore in cui è presente l'elemento al quale è applicato il float.dato che si disporranno a sinistra e a destra nello spazio disponibile della larghezza del Body o del Div (a proposito, cosa cambia?)
Nel mio esempio ho usato dei div per definire sostanzialmente delle "righe", cioè dei contenitori in cui inserire le coppie foto-testo (o in questo caso quello che è l'elemento <figure> e il restante contenuto testuale).
Dato che il float è applicato agli elementi <figure>, questi fluttueranno a sinistra o destra del loro relativo genitore (cioè il relativo <div> "riga"), quindi in base allo spazio orizzontale disponibile per tali <div> riga.
I <div> riga a loro volta sono contenuti in un ulteriore <div> #main, che si estende per tutta la larghezza del body.
Normalmente gli elementi di blocco (come i div) si estendono per tutta la larghezza disponibile, sempre relativamente al loro genitore; questo significa che gli stessi <div> riga risulteranno larghi quanto l'intero body.
Forse mi sono perso qualcosa ma, ti dico onestamente, in 20 anni e passa che metto mano a codice (X)HTML (comprese versioni più vecchie) non ho mai visto quella sintassi e non sapevo della necessità di specificare i byte. Farò qualche ricercaCredo di capire che le dimensioni in byte occupate dell'immagine non si devono più scrivere (avevo iniziato quando ancora c'era la versione precedente di HTML), il che era una bella 'rottura'.
prego, buon proseguimento[...] Se avrò altre domande, tornerò alla carica. Ancora grazie infinite!
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Scusami se non sono stato chiaro: se devo semplicemente mettere due immagini, una a sx e l'altra a dx, senza testo tra le immagini (come mi succede a volte quando ho finito le descrizioni, posso usare <figure> per farle stare nello spazio orizzontale del body? Devo usare Float per entrambe, una volta left e l'altra right? Comunque, domattina farò delle prove e, se non ci riesco, ti farò sapere. Buona notte!
Permessi di invio
Rispondi quotando
