Kako ploviti sliku levo od teksta na web stranici

Korišćenje CSS-a za poravnanje slike sa leve strane ploče veb stranice

Pogledajte skoro svaku web stranicu danas i videćete kombinaciju teksta i slika koje čine većinu tih stranica. Veoma je lako dodati tekst i slike na stranicu . Tekst je kodiran korišćenjem standardnih HTML oznaka kao što su paragrafi, liste i zaglavlja, dok su slike uključene pomoću elementa .

Sposobnost da napravite taj tekst i te slike dobro funkcionišu je ono što postavlja odlične web dizajnere! Ne želite samo da se tekst i slike pojavljuju jedan za drugim, a to je kako će ti elementi na nivou bloka izgledati podrazumevano. Ne, želite da kontrolišete kako se tekst i slike protokuraju u ono što će na kraju biti vizuelni dizajn vašeg veb sajta.

Imati sliku koja je poravnana sa leve strane stranice dok se tekst te stranice protiče oko njega je zajednički dizajn tretmana za štampani dizajn kao i za web stranice. U veb smislu, ovaj efekat je poznat kao plutanje slike . Ovaj stil se postiže korišćenjem CSS svojstva za "float". Ova svojstva omogućava tekstu da teče oko slike sa lijeve strane na desnu stranu. (Ili oko slike sa desne strane na levoj strani.) Hajde da pogledamo kako postići ovaj vizuelni efekat.

Počnite sa HTML-om

Prva stvar koju treba da uradite je da imate neki HTML sa kojim želite da radite. Za naš primjer ćemo napisati tekst i dodati sliku na početku paragrafa (prije teksta, ali nakon otvaranja

tag). Evo kako izgleda ta HTML oznaka:

Tekst paragrafa se nalazi ovde. U ovom primjeru imamo sliku slike sa glavnog snimka, tako da bi ovaj tekst vjerovatno bio o osobi za koju je zauzeo headshot.

Podrazumevano, naša veb stranica bi se prikazala uz sliku iznad teksta. To je zato što su slike elementi blok-nivoa u HTML-u. To znači da pregledač prikazuje podrazumevane prelomove pre i posle elementa slike po podrazumevanoj vrednosti. Promenili smo ovaj podrazumevani izgled okretanjem na CSS. Prvo ćemo dodati klasu vrijednost našem elementu slike . Ta klasa će delovati kao "kukica" koju ćemo kasnije koristiti u CSS-u.

Tekst paragrafa se nalazi ovde. U ovom primjeru imamo sliku slike sa glavnog snimka, tako da bi ovaj tekst vjerovatno bio o osobi za koju je zauzeo headshot.

Imajte na umu da ova klasa "levo" ne čini ništa sama! Da bismo postigli željeni stil, moramo da koristimo CSS sledeći.

CSS stilovi

Sa našim HTML-jem, uključujući naš atribut klase "lijevo", sada možemo da se okrenemo CSS-u. Dodali bi pravilo našem stylesheet-u koji bi plutao tu sliku, a takođe dodati malo padding pored njega, tako da tekst koji će se na kraju okrenuti oko slike ne preblizu tome. Evo CSS-a možete napisati:

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

Ovaj stil lebdi tu sliku levo i dodaje malo padding (koristeći neki CSS stenograf) na desno i na dnu slike.

Ako ste pregledali stranicu koja sadrži ovaj HTML u pregledaču, slika bi sada bila poravnana s leve strane, a tekst paragrafa biće prikazan sa desne strane sa odgovarajućim razmakom između njih. Imajte na umu da je vrijednost razreda "lijevo" koju smo koristili proizvoljna. Mogli smo to nazvati bilo šta jer izraz "levo" ne čini ništa samostalno. Ovo mora imati atribut klase u HTML-u koji funkcioniše sa stvarnim CSS stilom koji diktira vizuelne promjene koje želite napraviti.

Alternativni načini za postizanje ovih stilova

Ovaj pristup davanja elementa slike je atribut klase, a zatim korištenje opšteg CSS stila koji plovi element je jedini način na koji možete postići izgled "lijevo poravnate slike". Takođe možete udaljiti klase vrijednosti slike i stvoriti ga CSS-om tako što ćete pisati konkretniji selektor. Na primer, da pogledamo primer gde je ta slika unutar neke podele sa klasnom vrijednošću "glavnog sadržaja".