CSS propietate mugikorrak erabiliz diseinatu Web orrien diseinuak
CSS propietatea diseinuaren propietate garrantzitsua da. Zure web-orrien diseinuak zure pantailak bistaratu nahi dituzun bezala kokatzeko aukera ematen du, baina nola funtzionatzen duen ulertu behar duzu nola funtzionatzen duen.
Estilo-orri batean, CSS flotatzen duen propietatea honako hau da:
.right {float: right; }
Honek nabigatzaileari kontatzen dio "eskuinera" klasearekin dena eskuinera mugitu behar dela.
Honelaxe esleituko zenuke:
class = "right" />
Zer egin dezakezun CSS flotatzen duen propietatearekin?
Ezin duzu web orrialdean elementu guztiak mugitu. Blokeo-mailaren elementuak bakarrik mugi ditzakezu. Hauek orrialdeko espazio bloke bat hartzen duten elementuak dira, irudiak (), paragrafoak (), zatiketa () eta zerrendak ().
Testuari eragiten dion beste elementu batzuk, baina orriaren koadro bat ez sortzeko, lerroko elementuak deritze eta ezin dira mugitu. Hauek dira span (), lerro jauziak (), enfasi handia () edo letra etzanak () bezalako elementuak.
Non lo egiten dute?
Elementuak eskuinera edo ezkerrera mugitu ditzakezu. Mugikorreko elementuari jarraitzen dion elementua beste aldean dagoen elementu flotaz inguratuko da.
Adibidez, irudi bat ezkerrean flotatzen badut, testu hau edo beste elementu batzuk jarraitzen badira, eskuinera inguratzen da. Eta eskuineko irudian flotatzen badut, testu hau edo beste elementu batzuk jarraitzen badira, ezkerrera egingo dugu. Testu-bloke batean jartzen den irudia, aplikatu gabeko karaktere-estilorik gabe agertuko da, baina nabigatzailea irudiak bistaratuko dira.
Hau da, normalean, irudiko beheko aldean agertzen den testuaren lehen lerroa.
Zenbat urrun egon behar dute flotatzen?
Mugitu den elementu batek edukiontziaren ezkerrean edo eskuinera mugituko du. Horrek hainbat egoeratan eragiten du zure kodea idatzita dagoenaren arabera.
Adibide hauei esker ezkerreko elementu DIV txiki bat flotatzen ari naiz:
- Mugikorreko elementuak ez badu aurrez zehaztutako zabalera, beharrezko espazio horizontal gisa hartuko da eta erabilgarri egongo da, mugikorra kontuan hartu gabe. Oharra: nabigatzaile batzuek elementu mugikorren gaineko elementuak jartzen saiatzen dira zabalera ez denean zehazten denean, normalean laino mugikorreko elementua ez da espazio txiki bat bakarrik ematen. Beraz, beti zehaztu behar duzu zabaldutako elementuen zabalera .
- Edukiontziaren elementua HTML elementua bada, DIV flotatzaileak orriaren ezkerreko marjinean eseri egingo da.
- Edukiontziaren elementua beste zerbaitetan jasotzen bada, DIV flotatzaileak edukiontziaren ezkerreko marjinean eseri egingo da.
- Hiru elementu flotatzen ahal dituzu, eta horrek leku harrigarri batean amaitzen duen karroza sor dezake. Adibidez, flotatzailea ezkerreko DIV flotatzen da eskuineko DIV flotatzen batean.
- Elementu flotatzaileak elkarren ondoan eseri egingo dira edukiontzian dagoen gela badago. Esate baterako, edukiontzi honek hiru 100px zabal DIV elementuak 400px zabal edukiontzi batean flotatzen ditu.
Blokeoak ere erabil ditzakezu argazki galeria diseinua sortzeko. Koadro txikian (onena daukatenean, tamaina berekoak dira) DIV-ean jasotako epigrafean eta edukiontziaren DIV elementuak flotatzen ditu.
Arakatzailearen leiho zabala ez den arren, koadro txikiak uniformeki lerrokatuko dira.
Flotatzailea itzaltzen
Mugikorreko elementu bat nola sortu jakin ondoren, garrantzitsua da flotatzailea itzaltzea. Flotatzen du CSS argiaren propietatearekin. Ezkerreko karroza, eskuineko karroza edo biak garbitu ditzakezu:
argia: ezkerrera;
argi: zuzen;
argi: biak;
Elementu garbiak ezartzen dituen elementuek norabide horretan mugitzen den elementu baten azpian agertuko dira. Adibidez, adibide honetan, testuaren lehen bi paragrafoak ez dira garbitu, baina hirugarrena.
Erreproduzitu zure dokumentuen elementu ezberdinen balio garbiarekin, diseinu-efektu ezberdinak lortzeko.
Mugikorreko diseinu interesgarrienetako bat testu-paragrafoen ondoan dagoen eskuineko edo ezkerreko zutabean dauden irudi multzo bat da. Nahiz eta testua ez da nahikoa iraganeko irudia igarotzeko, irudi guztiak argi eta garbi erabil ditzakezu zutabean agertzen direnak, aurreko irudian baino.
HTML (paragrafo hau errepikatu):
Duela urte asko iraun zuen denbora pixka bat bururatu zitzaion burutik. Cupidatat ez da nahikoa, laborantza eta makineria handitzeko.
CSS (irudiak ezkerrera mugitzeko):
img.float {float: left;
Argi: ezkerrera
marjina: 5px;
}
Eta eskuinera:
img.float {float: right;
Argi: eskuinera;
marjina: 5px;
}
Mugikorren diseinua erabiltzea
Flotaren propietateak nola funtzionatzen duen ulertzen duzunean, zure web orriak zehazteko erabil dezakezu. Web orrialde mugikor bat sortzeko hartzen ditudan urrats hauek dira:
- Diseinatu diseinua (paperean edo tresna grafikoetan edo buruan).
- Zehaztu non dauden orrien zatiketa.
- Hainbat edukiontzi eta horien barruan dauden elementuak zehaztu.
- Float everything. Nahiz eta kanpoaldeko edukiontziaren elementua ezkerrera mugitzen da, nabigatzailearen ikuspegitik zein portura izango den jakin nahiko dudan.
Zure diseinuaren atalen zabalera (ehunekorik ongi) ezagutzen duzun heinean, mugikorreko propietatea erabil dezakezu orrialdearen barruan dauden lekuan jartzeko. Eta gauza atsegina da, ez duzu kezkatu ereduari dagokionez Internet Explorer edo Firefox-era desberdina izan.