Trebate kod za premotavanje teksta oko slike? Obično kada kreirate HTML stranicu, sve teče linearno, što znači jedan blok izravno za drugim. Svi moji prethodni postovi su primjer za to, tj. tekst, pa slika, pa tekst itd.

Ponekad ćete možda htjeti uključiti tekst pored slike umjesto ispod nje. To se zove prelamanje teksta oko slike. Zapravo je prilično jednostavno prelamati tekst pomoću HTML -a . Imajte na umu da ne morate koristiti CSS da biste prelomili tekst.

Međutim, ovih dana W3C preporučuje korištenje CSS -a umjesto HTML -a za ove vrste zadataka. Spomenut ću obje metode u nastavku, ali ako možete, bolje je koristiti CSS jer je prilagodljiviji dizajnu web stranica.

Zamotajte tekst oko slike pomoću HTML-a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing^(Duis) tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Da bi se tekst premotao uz desnu stranu slike, sliku morate poravnati s lijeve strane:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Ako želite da se tekst pojavi lijevo, a slika krajnje desno, samo promijenite parametar poravnanja u "desno".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing^(Duis) tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

To je to! Prilično^(Pretty) lako, zar ne? Jedini put kada biste željeli koristiti CSS je ako želite dodati margine slikama, tako da postoji malo prostora između teksta i slike.

Možete dodati margine na sliku pomoću sljedećeg CSS koda za stil:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Gornji kod koristi MARGIN CSS element za dodavanje 10 piksela razmaka na desnoj strani slike. Budući da smo sliku poravnali lijevo, želimo dodati razmak desno.

U osnovi, četiri broja predstavljaju GORE DESNO DOLJE LIJEVO^{(TOP RIGHT BOTTOM LEFT)} . Dakle, ako želite dodati bijeli prostor desno poravnatoj slici, učinite ovo:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Dakle, prilično je jednostavno koristiti HTML za obavljanje ovog zadatka, ali opet, možda neće dobro funkcionirati za responzivna web-mjesta.

Zamotajte tekst oko slike pomoću CSS-a

Bolji način za omotavanje teksta oko slike je korištenje CSS -a . Omogućuje vam bolju kontrolu nad pozicioniranjem elemenata i bolje funkcionira s modernim standardima kodiranja.

<img src="IMAGE URL" alt="A photo" class="left" />

Iako sam CSS uključio izravno u oznaku slike u HTML primjeru, to više nikada ne biste trebali raditi. Umjesto toga, trebali biste imati zasebnu datoteku nazvanu stylesheet koja sadrži sav vaš CSS kod.

U IMG oznaci jednostavno dodijelite klasu oznaci i date joj ime. U svom primjeru sam razred nazvao lijevo^(left) . U moju tablicu stilova, sve što moram učiniti je dodati sljedeći kod:

.left {
 float: left;
 padding: 0 10px 0 0;}

Kao što možete vidjeti, dodao sam 10px odstupanja na desnu stranu lijevo poravnate slike. Također sam koristio svojstvo float da premjestim sliku iz normalnog toka dokumenta i stavim je na lijevu stranu roditeljskog spremnika.

Kao što možete vidjeti, to je puno čišće od dodavanja cijelog tog koda u samu IMG oznaku. Također je lakše upravljati i možete koristiti puno više CSS svojstava da biste prilagodili izgled svoje web stranice. Ako imate bilo kakvih pitanja, slobodno komentirajte. Uživati!

HTML Code to Wrap Text Around Image

Need the cоde to wrap text around an image? Normallу when you create an HTML рage, everything flows linearly, meanіng one block directly after another. All of my previous posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Kako skenirati QR kod na iPhoneu i Androidu

• Kako ispisati tekstualne poruke s Androida

• Spremite popis pokrenutih procesa u tekstualnu datoteku u sustavu Windows

• Kako preuzeti datoteke i pogledati kod s GitHuba

• Traži unutar više tekstualnih datoteka odjednom

• Ekstrahirajte tekst iz PDF i slikovnih datoteka

• Isključite kontrolu korisničkog računa (UAC) za određenu aplikaciju

• SynWrite Editor: besplatni uređivač teksta i izvornog koda za Windows 10

• Kako automatski ažurirati softver vašeg računala

• Kako da vaše računalo čita tekst naglas

• Kako pogledati izvorni kod softvera otvorenog koda

• Kako povezati tekstualne okvire u Adobe InDesignu

• Kako dodati glazbu na Google slajdove

• Kako strujati tekst oko slike u InDesignu

• Recenzija knjige - Vodič za štreberke za Windows 8

• Kako preuzeti izvanmrežni (samostalni) instalacijski program za Google Chrome

• Kako otvoriti zaključanu datoteku kada je koristi drugi program

• Kako stvoriti i skenirati Spotify kod

• Kako pretvoriti dinamički disk u osnovni disk

• Kako nacrtati tekst u Photoshopu