Trebate li kod za omatanje teksta oko slike? Obično kada stvorite HTML stranicu, sve teče linearno, što znači jedan blok neposredno iza drugog. Svi moji prethodni postovi su primjer toga, tj. Tekst, zatim slika, zatim tekst, itd.
Ponekad možete dodati tekst uz sliku umjesto ispod slike. To se naziva omatanjem teksta oko slike. Zapravo je prilično lako prelomiti 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 dizajniranim web-lokacijama.
Prelomi 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 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. Utjeloviti u norem u lorem egestas non imperdiet enim congue.
Da biste tekst prebacili duž desne strane slike, morate poravnati sliku s lijeve strane:
Vaš tekst dolazi ovdje.
Ako želite da se tekst pojavi na lijevoj strani, a slika da se pojavi na desnoj strani, samo promijenite parametar poravnavanja u "desno".
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. Utjeloviti u norem u lorem egestas non imperdiet enim congue.
Vaš tekst dolazi ovdje.
To je to! Prilično lako? Jedini put kada biste htjeli koristiti CSS je ako želite dodati slike fotografijama, tako da postoji razmak između teksta i slike.
Margine možete dodati slici pomoću sljedećeg CSS koda:
Vaš tekst dolazi ovdje.
Gornji kod koristi MARGIN CSS element za dodavanje 10 piksela razmaka na desnoj strani slike. Budući da smo poravnali sliku lijevo, želimo dodati razmak desno.
U osnovi, četiri broja predstavljaju TOP RIGHT BOTTOM LEFT. Ako želite dodati bijeli prostor slici koja je poravnana udesno, učinili biste to:
Vaš tekst dolazi ovdje.
Stoga je prilično jednostavno koristiti HTML za izvođenje ovog zadatka, ali opet, možda neće dobro funkcionirati za osjetljive web-lokacije.
Prelomi tekst oko slike pomoću CSS-a
Bolji način za prebacivanje teksta oko slike jest korištenje CSS-a. To vam daje bolju kontrolu zrna u odnosu na pozicioniranje elemenata i bolje radi s modernim standardima kodiranja.
Iako sam uključio CSS izravno u oznaku slike u HTML primjeru, doista to više ne biste trebali raditi. Umjesto toga, trebali biste imati zasebnu datoteku pod nazivom stylesheet koja sadrži sav vaš CSS kod.
U IMG oznaci jednostavno dodijelite klasi oznaci i dajte joj ime. U mom primjeru sam nazvao klasu lijevo . U mojoj stilskoj tablici, sve što trebam je dodati sljedeći kôd:
.left {float: lijevo; padding: 0 10px 0 0;} Kao što možete vidjeti, dodao sam 10px paddinga na desnu stranu lijevo poravnate slike. Također sam koristio float svojstvo za pomicanje slike iz normalnog toka dokumenta i stavio je na lijevu stranu roditeljskog spremnika.
Kao što možete vidjeti, mnogo je čišće od dodavanja cijelog koda u samu IMG oznaku. Također je lakše upravljati, a za prilagođavanje izgleda web-stranice možete koristiti mnogo više svojstava CSS-a. Ako imate bilo kakvih pitanja, slobodno komentirajte. Uživati!
