Nola mugitu irudi bat testuinguru ezkerrean Web orri batean

CSS erabiltzea irudia web orriaren ezkerreko diseinuarekin lerrokatzeko

Begiratu ia web orrialde bat gaur egun eta orri horietako gehienek osatzen duten testua eta irudiak konbinatzen dituzula ikusiko duzu. Oso erraza da testua eta irudiak orri batera gehitzea. Testua kodetuta dago, paragrafo, zerrenda eta izenburuen artean HTML etiketa estandarrak erabiliz, irudiak barne elementua erabiliz .

Testu hori egiteko gaitasuna eta irudiak ondo funtzionatzen dituztela iruditzen zait web diseinatzaile bikainak! Ez duzu besterik nahi zure testua eta irudiak bata bestearen atzean agertzea, hau da, bloke-mailako elementu horiek modu lehenetsian egongo dira. Ez, testua eta irudiak elkarrekin fluxua izango dira, zure webgunearen diseinu bisuala izango denaren gainean.

Orrialde baten ezkerraldean lerrokatuta dagoen irudi bat izatea, orri horren testua inguratzen duen bitartean, inprimatutako diseinuaren diseinua eta web orriak ere diseinu arruntak dira. Web-terminoetan, efektu hau irudia flotatzen den bezala ezagutzen da . Estilo hau CSS propietatearekin lortzen da "flotatzen" delakoan. Propietate honek ezkerreko lerrokatutako irudia eskuinetara aldatzen du testua. (Edo eskuinaldean lerrokatutako irudia ezkerreko aldean.) Ikusizko efektu hori nola lortu azter dezagun.

Hasi HTML bidez

Lehenik eta behin, egin behar duzun HTMLa izango duzu. Gure adibidean, testu zati bat idazten eta irudia gehituko dugu paragrafoaren hasieran (testua baino lehen, baina

etiketa ondoren). Hona hemen zer HTML markatze itxura duten:

Paragrafoaren testua hemen doa. Adibide honetan, headshot argazkiko irudia daukagu, beraz, testua litekeena da buruan dagoen pertsonaren inguruan.

Lehenespenez, gure web orria testuaren gaineko irudia bistaratuko litzateke. Honek irudiak bloke-maila diren HTML elementuetan dituelako. Horrek esan nahi du arakatzaileak lehenetsitako irudia aurretik eta ondorengo lerro jauziak bistaratzen dituela. Modu lehenetsi hau aldatuko dugu CSS bihurtuz. Lehenik, ordea, klasearen balioa gehituko dugu irudi irudiari . Klase hori gure CSSan erabiliko dugun "kako" gisa jardungo dugu.

Paragrafoaren testua hemen doa. Adibide honetan, headshot argazkiko irudia daukagu, beraz, testua litekeena da buruan dagoen pertsonaren inguruan.

Kontuan izan "ezkerrean" klase hau ez dela inola ere ez! Nahi dugun estilo lortzeko, hurrengo CSS erabili behar dugu.

CSS estiloak

Gure HTML formatuarekin, "left" atributua gure klasearen barne, orain CSSra buelta dezakegu. Irudi hori flotatzen duen estilo-orriko arau bat gehituko genuke, eta ondoan beteko apur bat gehituko dugu, irudian zehar azkeneko irudian itzuliko den testua ez dela estuki lotuta. Hemen CSS idatz dezakezu:

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

Estilo honek ezkerrera darama irudia eta apur bat estaltzen du (CSS izen laburra erabiliz) irudiaren eskuinean eta behealdean.

Arakatzailean HTML hau duen orrialdean berrikusi baduzu, irudia ezkerrerantz joango litzateke eta paragrafoaren testua eskuinera agertuko litzateke bi arteko tarte egokiarekin. Erabili dugun "left" klasearen balioa arbitrarioa da. "Dena" hitza ez da ezer deus ere deitu. Klase-atributu bat behar du CSS estilo errealarekin lan egiten duen ikusizko aldaketak zuzentzen dituen HTMLan .

Modu alternatiboak estilo hauek lortzeko

Irudiaren elementua klasearen atributuari ematen zaion hurbilketa hau eta, ondoren, elementu hori flotatzen duen CSS estilo orokor bat "ezkerreko lerrokatutako irudia" itxura lortzeko modu bakarra baino ez da. Klaseko balioa ere kendu egin dezakezu irudian eta CSS-rekin estilo bat hautatzaile zehatzagoa idazteko. Esate baterako, ikus dezagun adibide bat irudi hori zatiketa baten barruan dagoen "eduki nagusi" batekin.