Come avvolgere il testo attorno a un'immagine con i CSS

Guarda qualsiasi pagina web e vedrai una combinazione di contenuti testuali e immagini. Entrambi questi elementi sono ingredienti essenziali per il successo di un sito web. Il contenuto del testo è ciò che i visitatori del sito leggeranno e quali motori di ricerca utilizzeranno come parte dei loro algoritmi di classificazione. Le immagini aggiungeranno interesse visivo al sito e contribuiranno ad accentuare il contenuto del testo.

Aggiungere testo e immagini ai siti Web è facile. Il testo viene aggiunto con tag HTML standard come paragrafi, intestazioni ed elenchi, mentre le immagini vengono posizionate su una pagina con il elemento. Una volta aggiunta un'immagine alla tua pagina web, tuttavia, potresti volere che il flusso del testo si sposti accanto all'immagine, piuttosto che allinearlo al di sotto di esso (che è il modo predefinito con il quale un'immagine nel codice HTML verrà aggiunta al browser). Tecnicamente, ci sono due modi per ottenere questo aspetto, usando CSS (consigliato) o aggiungendo le istruzioni visive direttamente nell'HTML (non consigliato, dal momento che si desidera mantenere la separazione di stile e struttura per il proprio sito Web).

Usando i CSS

Il modo corretto per cambiare il modo in cui il layout di testo e di immagini di una pagina e il modo in cui i loro stili visivi appaiono nel browser è con i CSS. Basta ricordare, dal momento che stiamo parlando di un cambiamento visivo sulla pagina (facendo scorrere il testo intorno a un'immagine), questo significa che è il dominio di Cascading Style Sheets.

1. Innanzitutto, aggiungi la tua immagine alla tua pagina web. Ricorda di escludere qualsiasi caratteristica visiva (come i valori di larghezza e altezza) da quell'HTML. Questo è importante, specialmente per un sito web reattivo in cui le dimensioni dell'immagine variano in base al browser. Alcuni software, come Adobe Dreamweaver, aggiungeranno informazioni di larghezza e altezza alle immagini che vengono inserite con quello strumento, quindi assicurati di rimuovere queste informazioni dal codice HTML! Assicurati, tuttavia, di includere il testo alternativo appropriato. Ecco un esempio di come potrebbe apparire il tuo codice HTML:

   

2. Per motivi di stile, puoi anche aggiungere una classe a un'immagine. Questo valore di classe è ciò che useremo nel nostro file CSS. Nota che il valore che usiamo qui è arbitrario, anche se, per questo particolare stile, tendiamo a usare valori di "sinistra" o "destra", a seconda del modo in cui vogliamo che la nostra immagine si allinei. Troviamo che la sintassi semplice funzioni bene e sia facile per gli altri che potrebbero dover gestire un sito in futuro per capire, ma potresti dare a questo qualsiasi valore di classe che desideri.

   

   Di per sé, questo valore di classe non farà nulla. L'immagine non verrà automaticamente allineata a sinistra del testo. Per questo, ora dobbiamo passare al nostro file CSS.

3. Nel tuo foglio di stile, ora puoi aggiungere il seguente stile:

   .sinistra {

   fluttuare: a sinistra;

   riempimento: 0 20px 20px 0;

   }

   Quello che hai fatto qui è usare la proprietà CSS "float", che tirerà l'immagine dal normale flusso del documento (il modo in cui l'immagine verrebbe normalmente visualizzata, con il testo allineato al di sotto di essa) e la allineerà sul lato sinistro del suo contenitore . Il testo che viene dopo di esso nel markup HTML ora lo avvolge. Abbiamo anche aggiunto alcuni valori di padding in modo che questo testo non andasse direttamente sull'immagine. Invece, avrà una bella spaziatura che sarà visivamente attraente nel design della pagina. Nella stenografia CSS per il padding, abbiamo aggiunto 0 valori al lato superiore e sinistro dell'immagine e 20 pixel alla sua sinistra e in basso. Ricorda, devi aggiungere un po 'di padding sul lato destro di un'immagine allineata a sinistra. Un'immagine allineata a destra (che vedremo tra un momento) avrebbe applicato il padding alla sua parte sinistra.

4. Se visualizzi la tua pagina web in un browser, ora dovresti vedere che l'immagine è allineata sul lato sinistro della pagina e il testo si avvolge piacevolmente intorno ad esso. Un altro modo per dire questo è che l'immagine è "fluttuante a sinistra".

5. Se si desidera modificare questa immagine per essere allineata a destra (come nell'esempio di foto che accompagna questo articolo), sarebbe semplice. Innanzitutto, devi assicurarti che, oltre allo stile che abbiamo appena aggiunto al nostro CSS per il valore di classe di "sinistra", ne abbiamo anche uno per l'allineamento a destra. Sarebbe come questo:

   .destra {

   float: giusto;

   imbottitura: 0 0 20px 20px;

   }

   Puoi vedere che questo è quasi identico al primo CSS che abbiamo scritto. L'unica differenza è il valore che usiamo per la proprietà "float" e i valori di padding che usiamo (aggiungendo alcuni al lato sinistro della nostra immagine invece che alla destra).

6. Infine, cambieresti il ​​valore della classe dell'immagine da "sinistra" a "destra" nel tuo codice HTML:

   

7. Guarda la tua pagina nel browser ora e l'immagine deve essere allineata a destra con il testo che lo avvolge. Tendiamo ad aggiungere entrambi questi stili, "left" e "right" a tutti i nostri fogli di stile in modo che possiamo usare questi stili visivi quando necessario quando stiamo creando pagine web. Questi due stili diventano caratteristiche simpatiche e riutilizzabili a cui possiamo rivolgerci ogni volta che è necessario creare immagini con il testo che le avvolge.

Usare HTML invece di CSS (e perché non dovresti farlo)

Anche se è possibile avvolgere il testo attorno a un'immagine con HTML, gli standard Web impongono che CSS (e i passaggi illustrati sopra) siano la via da seguire per mantenere una separazione tra struttura (HTML) e stile (CSS). Questo è particolarmente importante se si considera che, per alcuni dispositivi e layout, quel testo non può bisogno di scorrere intorno all'immagine. Per schermi più piccoli, il layout di un sito Web reattivo può richiedere che il testo sia effettivamente allineato sotto l'immagine e che l'immagine si estenda per tutta la larghezza dello schermo. Questo è fatto facilmente con le query multimediali se i tuoi stili sono separati dal markup HTML.Nel mondo multi-dispositivo di oggi, in cui immagini e testo appariranno in modo diverso per visitatori diversi e su schermi diversi, questa separazione è essenziale per il successo e la gestione a lungo termine di una pagina web.