Nastavi

Prilikom postavljanja rasporeda sa dvije kolone, vrlo je uobičajeno koristiti parametar float, koji se dodaje svakom sloju. Iako je ovaj atribut namijenjen za razvoj toka, zbog svoje svestranosti je odavno prihvaćen od strane dizajnera izgleda.

Ova metoda izrade rasporeda sa više kolona ima i određeni nedostatak, koji se očituje u činjenici da kada se prozor pretraživača smanji na određenu veličinu, kolone "skaču" jedna ispod druge. Da biste to izbjegli, dodatno koristite atribut stila margin-left, dodajući ga u desnu kolonu. U ovom slučaju, slojevi ostaju na svojim originalnim mjestima, bez obzira na veličinu prozora pretraživača.

Pozdrav, dragi čitaoci blog stranice. Danas nastavljamo sa proučavanjem klasičnog CSS-a, a zatim imamo plutajuće elemente kreirane pomoću Float-a. Dotaknut ćemo se i svrhe Clear (oba, lijevo, desno) pravila i pogledati primjere horizontalnog menija i rasporeda u tri kolone da vidimo kako se sve to može koristiti u praksi.

Malo ranije smo već pogledali mnoge aspekte jezika za označavanje stila, o kojima možete saznati iz naracije sastavljene usput. Kaskadne tablice stilova mnogo je teže proučavati od čistog HTML-a, a ako vam se u početku nešto čini komplikovano i nerazumljivo, onda tu nema ničeg čudnog ili zastrašujućeg. Probajte u praksi, poboljšajte se i sve će se srediti. Sretno!

Float - kreiranje plutajućih elemenata u CSS kodu

Kada u dokument ubacimo nekoliko oznaka za redom, očekujemo da se pojave na stranici približno istim redoslijedom kojim su napisane u kodu. Na primjer, prilikom kreiranja teksta ubacujemo naslove, pasuse, liste itd., tako da ih vidimo istim redoslijedom na web stranici.

Ali postoje dva pravila u CSS-u koja ovo mogu promijeniti. Govorimo o plutanju i poziciji. Kada se ova dva pravila ne primjenjuju na oznake, ova opcija se u normalnom toku naziva kodom.

Ovo pravilo ima tri moguće vrijednosti (prema W3C specifikaciji), pri čemu je zadana vrijednost Nema, tj. U početku nemamo plutajuće elemente:

Vrijednosti Lijevo i desno To je ono što vam omogućava da kreirate plivanje. U ovom slučaju, svojstva takve oznake će se promijeniti i ona će drugačije komunicirati s drugima. Pogledajmo sve ovo na primjeru. Uzmimo jedan inline Span tag i dva elementa Div bloka.

Zapamtite, u članku o dodjeli sam rekao da ova pravila neće raditi za inline elemente, tj. Ne možete postaviti visinu i širinu za njih. Stoga, da demonstriram promjenu svojstava plutajućeg elementa, dodajem pravila visine i širine u inline Span tag, što prirodno ne bi funkcioniralo u normalnoj situaciji.

Mala slova

Hajde sada da napišemo float pravilo za Span sa vrijednošću Left i vidimo šta će iz toga proizaći (radi jasnoće, našem novopečenom plutajućem bloku dat ćemo i marginu od 5px sa svih strana (margina: 5px) kako bi bio njegov odnos sa susjednim jasnije oznake:

Naš element počinje da lebdi ulijevo (jer smo specificirali float:left). U isto vrijeme, širina i visina specificirana u pravilima visine i širine su radile, uprkos činjenici da je Span izvorno bio oznaka linije. Osim toga, radila je i margina visine (uvlačenje prema susjedima), što je u početku bilo beskorisno za oznake linija.

Iz ovoga zaključujemo da nakon pisanja float element je postao potpuno drugačiji i za razliku od onoga što je bio ranije. Osim toga, počeo je drugačije komunicirati s drugim oznakama.

Metode interakcije zavise od toga koja je vrijednost specificirana za njega, ali u osnovi ćemo raditi sa blokovima (zato se raspored naziva blok), za koje ovo CSS pravilo ima blok vrijednosti.

Najčešće će to biti Div kontejner - idealan za pravljenje blok dijagrama, jer inicijalno ima nula vrijednosti, a njegova visina i širina su postavljene na Auto. To. Div je blok blok, kao i Span, koji također ima sve na nuli.

No, vratimo se na našu ovcu, naime, opisati ćemo sve promjene koje se događaju s oznakom kada se na nju primjenjuje pravilo Float s vrijednošću lijevo ili desno:

Očisti (oba, lijevo, desno) i horizontalni meni na Float

Postavlja se pitanje: da li je moguće prisiliti blokove koji se nalaze u kodu ispod plutajućeg elementa (sa float:lijevo ili desno) da stupe u interakciju s njim (tj. podesiti njihov položaj ovisno o veličini plutajućih blokova)? Ispostavilo se da je to moguće, a CSS to omogućava posebno pravilo Clear. Ima četiri važeće vrijednosti (nijedna nije zadana):

Kada napišemo CSS pravilo Clear za bilo koju Html oznaku, to znači da će upravo ovaj element morati uzeti u obzir sve blokove koji lebde i stoje ispred njega u kodu:

1. Lijevo, ako je specificirano clear:left
2. Desno kada desno
3. Svugdje sa jasno:oba (znači na obje strane)

Pokušajmo pogledati clear:left primjer za snimak ekrana dat malo iznad (zapisaćemo ga za zeleni Div kontejner):

Float block

To. prisilili smo Div kontejner da vidi i poštuje element koji lebdi s njegove lijeve strane. Ako napišete clear:right za istu oznaku, onda neće doći do promjena, jer nema blokova koji plutaju udesno (sa desnim) u našem kodu prije ove oznake.

Ako koristite clear:both, tada će se uzeti u obzir svi plutajući blokovi (i lijevo i desno - koji god se nađu). Oba se koriste u slučajevima kada nije poznato na kojoj će se strani pojaviti plutajući i visoki element. Ovo je ono što danas najčešće možete pronaći u kodu.

Pa, pogledajmo mali primjer da vidimo zašto bi to moglo biti Float je korišten u izgledu web stranice. Činjenica je da pomoću plutajućih blokova možete kreirati horizontalni meni iz obične liste. Hajde da u početku imamo nešto ovako:

• Tačka 1
• Tačka 2
• Tačka 3
• Tačka 4
• Tačka 5

Ovaj nered će izgledati otprilike ovako:



Sada hajde da uklonimo markere koristeći vrijednost None, i napravimo blokove umetnutih pomoću display:block, označimo ih nekom vrstom pozadine i postavimo male vanjske margine za stavke liste da ih odvoje jedna od druge.

Za promjenu, pokušajmo postaviti svojstva pomoću oznake Style, koja je napisana između početne i završne glave:

Kao rezultat toga, slika našeg budućeg remek-djela će izgledati mnogo više kao meni, ali, međutim, meni je okomit, ali želimo da kreiramo horizontalni koristeći Float:



Postavite ovaj meni horizontalno To će biti moguće samo dodavanjem pravila float:left elementu liste Li:

Meni li( margin:5px; float:lijevo; )



Zašto se to dogodilo na ovaj način? Plutajući blok (sa float-om koji nije nikakav), kada treba da se postavi, gleda u susjedne oznake, na ivice kontejnera i stoji što je moguće više na web stranici. To je uradila “Tačka 1” - ustao je što je više mogao, a zatim otišao lijevo (jer je u njemu pisalo float:left).

“Tačka 2” je takođe imala dovoljno prostora da stoji što je više moguće, a onda je otišla ulijevo i naletjela na prethodni plutajući blok. Isto se može reći i za ostale stavke u našem horizontalnom meniju. Ali šta se dešava ako širina kontejnera nije dovoljna za sve stavke menija? da vidimo umjetno sužavanje područja gledanja:



Kada plutajući element (sa plutajućim elementom) nema dovoljno prostora da lebdi do vrha, tada on određuje donju granicu prethodnog plutajućeg bloka (sa drugim oznakama bloka, kao što se sjećate, plutajući ne komuniciraju) i gradi svoju vertikalu položaj duž njega, a zatim se pomiče ulijevo do kraja . U našem slučaju, “Tačka 5” je uspješno stigla do lijeve granice vidnog područja.

Ali ako bi, na primjer, visina prve točke bila veća od visine četvrte, po čemu je "Tačka 5" odredila svoju gornju granicu, ispala bi sljedeća slika:



Ako se ispostavi da je "tačka 4" previsoka, slika će se promijeniti u ovu:



U ovom slučaju, “Tačka 5” se poravnala sa visinom posljednjeg plutajućeg bloka i, bez nailaska na prepreke na putu, stigla je do lijeve granice kontejnera.

Odavde, inače, slijedi zaključak da ako je tekst u stavkama takvog horizontalnog menija zasnovanog na CSS float pravilu jako dugačak, onda može ispasti upravo onako kako je prikazano na prethodnim snimcima ekrana. Možda će biti lakše kreirati takav meni koristeći pozadinske slike čija je veličina fiksna. Možete koristiti i display:table, ali kreiranje takvih menija je tema za poseban članak, a možda čak i više od jednog.

Blok raspored - kreiranje kolona u rasporedu koristeći Float

Ali glavna svrha Floata je, naravno, kreiranje kolona kada koristite raspored blokova. O tome sam već pisao vrlo detaljno u nizu članaka posvećenih stvaranju .

Kada kreirate izgled stranice, uvijek ćete morati da poredate blokove jedno pored drugog (na primjer, područje lijeve kolone, područje sadržaja i područje desne kolone). Uobičajeni blokovi u CSS-u se postavljaju jedan ispod drugog. Šta je sa njima staviti jedno pored drugog? Naravno, korištenjem plutajućih elemenata baziranih na Float.

Možete detaljnije proučiti kreiranje rasporeda sa dvije i tri kolone na linku koji je dat malo iznad, ali ovdje ću samo iznijeti ideju koja je inherentna ovome bez daljnjih detalja. U početku se uzimaju tri Div kontejnera s dodijeljenim im klasama. Oni će na kraju formirati naše kolone:

Sadržaj lijeve kolone
Sadržaj desne kolone
Tekst područja sadržaja

Zatim, za klase kontejnera lijevog i desnog stupca, postavljamo float: lijevo i desno (radi jasnoće, spremnici su istaknuti u pozadini pomoću pozadine), a također ograničavamo njihovu širinu pomoću širine:

Na ovaj način dobili smo dva bočna stupca fiksne širine koristeći čarobno Float pravilo. Sve što ostaje je da shvatite područje sadržaja:



#center( background:#cfc; margin:0 150px 0 100px; )



Sretno vam bilo! Vidimo se uskoro na stranicama blog stranice

Možda ste zainteresovani

Pozicija (apsolutna, relativna i fiksna) - načini pozicioniranja HTML elemenata u CSS-u (pravila lijevo, desno, gore i dolje)
Pozicioniranje pomoću Z-indeksa i pravila CSS kursora za promjenu kursora miša
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza HTML elemenata na web stranici
Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu
CSS svojstva text-decoration, vertical-align, text-align, text-indent za ukrašavanje teksta u Html-u
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, prilog) - sve za postavljanje boje pozadine ili pozadinske slike HTML elemenata
Visina, širina i prelivanje - CSS pravila za opisivanje područja sadržaja u blok rasporedu
Čemu služi CSS, kako povezati kaskadne stilove sa HTML dokumentom i osnovna sintaksa ovog jezika
Padding, Margin and Border - postavite unutrašnje i spoljašnje padding u CSS-u, kao i granice za sve strane (gore, dole, levo, desno) Kako konfigurirati naizmjeničnu boju pozadine redova tabela, lista i drugih Html elemenata na web mjestu koristeći pseudo-klasu nth-child

Atributi pružaju dodatne informacije o HTML elementima.

HTML atributi

• HTML elementi mogu imati atributi
• Atributi pružaju dodatne informacije o elementu
• Atributi su uvijek specificirani u start tag
• Atributi dolaze u parovima ime/vrijednost, na primjer: ime="vrijednost"

Primjer atributa

Uvijek koristite navodnike s vrijednostima atributa

Vrijednosti atributa uvijek moraju biti stavljene u navodnike.

Obično se koriste dvostruki navodnici, ali jednostruki navodniki su također prihvatljivi.

savjet: U nekim rijetkim situacijama, kada sama vrijednost atributa sadrži navodnike, potrebno je koristiti jednostruke navodnike: name="Ivan "Vano" Petrov"

Imena atributa i vrijednosti atributa ne razlikuju velika i mala slova.

Međutim, Svjetski internet konzorcij (W3C) preporučuje string atribute/vrijednosti atributa u HTML 4.

Novije verzije (X)HTML-a zahtijevaju inline atribute.

Referenca HTML atributa

Spisak svih HTML elemenata možete pronaći ovdje:

Ispod je lista nekih atributa koji su standardni za većinu HTML elemenata:

Za više informacija o standardnim atributima pogledajte ovdje.

Materijal iz Imenika Web jezika

Moguće vrijednosti

sFloat Linija, koji može definirati i uzeti jednu od sljedećih vrijednosti:

Ovo svojstvo nije naslijeđeno. Zadana vrijednost je ništa.

Bilješke

Ako je svojstvo objekta postavljeno na lijevo ili desno, ono se tumači kao blok objekt. Stoga će njegovo svojstvo prikaza biti zanemareno.

Objekti koji prate leteći objekt pozicioniraju se prema specificiranim svojstvima toka.

Plutajući objekt se pomiče lijevo ili desno dok ne dosegne granice (marginu, padding) drugog blok objekta.

Ako divovi i rasponi imaju postavljenu širinu, oni će biti prikazani kada se koristi atribut float. U Microsoft Internet Explorer 5, ovi objekti imaju zadanu širinu i ionako se prikazuju.

Primjeri

Sljedeći primjeri ilustriraju upotrebu svojstva styleFloat i atribut float za postavljanje različitih parametara za protok oko objekta.

Prvi primjer koristi atribut float da odredite na kojoj strani teksta će se nalaziti dve slike (sfera.jpg će biti na levoj, a cone.jpg na desnoj).



Drugi primjer koristi svojstvo styleFloat tako da slike zamene mesta kada pređete kursorom miša preko dugmeta.

: Flip-flop slike.