Kako preplaviti sliku lijevo od teksta na web stranici

Upotreba CSS-a za poravnavanje slike na lijevu stranu izgleda web stranice

Pogledajte gotovo bilo koju web stranicu danas i vidjet ćete kombinaciju teksta i slika koje čine većinu tih stranica. Tekst i slike vrlo je lako dodati na stranicu . Tekst je kodiran pomoću standardnih HTML oznaka kao što su odlomci, popisi i naslovi, dok su slike uključene pomoću elementa .

Sposobnost da taj tekst i one slike dobro funkcioniraju je ono što odvaja odlične web dizajnere! Ne želite samo da se tekst i slike pojavljuju jedan za drugim, što znači da će ti elementi na razini bloka prema zadanim postavkama izgledati. Ne, želite određenu kontrolu nad načinom prijenosa teksta i slika u ono što će u konačnici biti vizualni dizajn vaše web stranice.

Imajući sliku koja je poravnata s lijevom stranom stranice dok tekst te stranice teče oko nje je zajednički dizajnerski tretman za tiskani dizajn i za web stranice. U web uvjetima, taj je učinak poznat kao plutajući sliku . Ovaj stil postiže se CSS svojstvom za "float". Ova svojstva omogućuju da tekst prođe oko lijeve linije do desne strane. (Ili oko slike s desne strane s desne strane). Pogledajmo kako postići taj vizualni efekt.

Počnite s HTML-om

Prva stvar koju trebate učiniti je imati neki HTML koji će raditi. Za naš primjer napisat ćemo tekst odlomka i dodati sliku na početku odlomka (prije teksta, ali nakon otvaranja oznake

). Evo što izgleda HTML oznaka:

Tekst odlomka ide ovdje. U ovom primjeru imamo sliku glavne fotografije, pa bi se ovaj tekst vjerojatno odnosio na osobu za koju je glavni snimak.

Prema zadanim postavkama, naša će se web stranica prikazivati ​​uz sliku iznad teksta. To je zato što su slike elemente na razini bloka u HTML-u. To znači da preglednik prikazuje prekidne linije prije i poslije elementa slike prema zadanim postavkama. Ovakav zadani izgled promijenit ćemo pretvaranjem u CSS. Prvo ćemo, međutim, dodati vrijednost klase našem elementu slike . Ta klasa će djelovati kao "kuka" koju ćemo kasnije koristiti u našem CSS-u.

Tekst odlomka ide ovdje. U ovom primjeru imamo sliku glavne fotografije, pa bi se ovaj tekst vjerojatno odnosio na osobu za koju je glavni snimak.

Imajte na umu da ova klasa "lijevo" uopće ne čini ništa! Da bismo postigli željeni stil, moramo upotrijebiti sljedeći CSS .

CSS stilovi

S našim HTML mjestom, uključujući i atribut klase "lijevo", sada se možemo obratiti CSS-u. Dodali bi pravilo na naš stilski stil koji će plutajuću tu sliku i također dodati malo podloge pokraj njega, tako da tekst koji će se konačno zaokrenuti oko slike ne briše se previše tijesno. Ovdje je CSS koji možete napisati:

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

Ovaj stil lebdi tu sliku lijevo i dodaje malo padding (pomoću nekog CSS stenograma) na desno i dno slike.

Ako ste pregledali stranicu koja sadrži ovaj HTML u pregledniku, slika će sada biti poravnata s lijeve strane, a tekst odlomka će se pojaviti na desnoj strani s odgovarajućom količinom razmaka između njih. Napominjemo da je klasa vrijednost "lijevo" koju smo koristili proizvoljna. Možda smo to nazvali jer izraz "lijevo" ne radi ništa sam. To mora imati HTML klasik atributa koji funkcionira sa stvarnim CSS stilom koji diktira vizualne promjene koje želite napraviti.

Alternativni načini za postizanje tih stilova

Ovaj pristup davanja elementu slike elementu klase, a zatim upotrebom općeg CSS stila koji pluta element je samo jedan od načina na koji možete postići izgled ove "lijevo poravnate slike". Možete izuzeti i vrijednost klase iz slike i stilizirati je s CSS-om pisanjem specifičnijeg izbornika. Na primjer, pogledajmo primjer gdje je ta slika unutar dijeljenja s klasičnom vrijednošću "glavnog sadržaja".