વેબસાઇટ બનાવતી વખતે કેન્દ્ર છબીઓ, ટેક્સ્ટ અને અવરોધિત ઘટકો
જો તમે વેબસાઇટ્સને કેવી રીતે બનાવવી તે શીખી રહ્યાં હોવ, તો તમને સૌથી વધુ સામાન્ય યુક્તિઓમાંથી એક માસ્ટર બનવાની જરૂર છે જે બ્રાઉઝર વિંડોમાં વસ્તુઓનું કેન્દ્ર કેવી રીતે રાખવું આનો અર્થ પૃષ્ઠ પર છબીને કેન્દ્રિત કરી શકે છે, અથવા તે ડિઝાઇનના ભાગ રૂપે હેડલાઇન્સ જેવા કેન્દ્ર-ન્યાયી લખાણ હોઈ શકે છે.
કેસ્કેડીંગ સ્ટાઇલ શીટ્સ (CSS) નો ઉપયોગ કરીને કેન્દ્રિત છબીઓ અથવા ટેક્સ્ટ અથવા તમારા સમગ્ર વેબપૃષ્ઠનું દ્રશ્ય દેખાવ પૂર્ણ કરવાની યોગ્ય રીત છે. સેન્ટ્રીંગ માટેની મોટાભાગની મિલકતો આવૃત્તિ 1.0 થી CSS માં રહી છે, અને તેઓ CSS3 અને આધુનિક વેબ બ્રાઉઝરો સાથે કામ કરે છે .
વેબ ડીઝાઇનના ઘણા પાસાઓની જેમ, વેબ પેજમાં કેન્દ્ર ઘટકો માટે CSS નો ઉપયોગ કરવાના ઘણા માર્ગો છે. ચાલો આ દ્રશ્ય દેખાવને હાંસલ કરવા માટે CSS નો ઉપયોગ કરવાના કેટલાક અલગ અલગ રીતો પર એક નજર કરીએ.
એચટીએમએલમાં સેન્ટર એલિમેન્ટસમાં CSS નો ઉપયોગ કરવાના ઝાંખી પર
સી.એસ.એસ. સાથે કેન્દ્રિત વેબ ડીઝાઇનર્સની શરૂઆત માટે એક પડકાર બની શકે છે કારણ કે આ દ્રશ્ય શૈલીને પૂર્ણ કરવાના ઘણા જુદા જુદા રીતો છે. જ્યારે વિવિધ પદ્ધતિઓ સરસ અથવા અનુભવી વેબ વિકાસકર્તાઓ હોઈ શકે છે, જે જાણે છે કે દરેક તકનીકો દરેક તત્વ પર કામ કરતી નથી, વિવિધ વેબ પ્રોફેશનલ્સ માટે આ ઘણું જ પડકારરૂપ બની શકે છે કારણ કે વિવિધ પદ્ધતિઓનો અર્થ છે કે કયા અભિગમનો ઉપયોગ કરવો તે ક્યારે જાણવા જરૂરી છે. થોડાક અભિગમની સમજ મેળવવા માટે શ્રેષ્ઠ બાબત છે. જેમ જેમ તમે તેમનો ઉપયોગ કરવાનું શરૂ કરો તેમ, તમે શીખીશું કે કઈ રીત શ્રેષ્ઠ રીતે કામ કરે છે.
ઉચ્ચ સ્તર પર, તમે આના પર CSS નો ઉપયોગ કરી શકો છો:
- કેન્દ્ર ટેક્સ્ટ
- એક બ્લોક-સ્તરનું તત્વ કેન્દ્રિત કરો (એક વિભાગ જેવું)
- એક છબી કેન્દ્રિત કરો
- વર્ટિકલ એક બ્લોક અથવા એક છબી કેન્દ્ર
ઘણાં (ઘણા) વર્ષો અગાઉ, વેબ ડિઝાઇનરો <કેન્દ્ર> તત્વનો છબીઓ અને ટેક્સ્ટને મધ્યમાં ઉપયોગ કરી શકે છે, પરંતુ તે HTML ઘટક હવે દૂર કરવામાં આવેલ છે અને આધુનિક વેબ બ્રાઉઝરોમાં હવે સપોર્ટેડ નથી. આનો અર્થ એ છે કે જો તમે તમારા પૃષ્ઠોને યોગ્ય રીતે પ્રદર્શિત કરવા અને આધુનિક ધોરણોને અનુસરવા માંગતા હો તો આ HTML ઘટકનો ઉપયોગ કરવાનું ટાળવું જોઈએ! આ તત્વને દૂર કરવામાં આવેલું કારણ મોટા ભાગમાં છે, કારણ કે આધુનિક વેબસાઇટ્સને માળખા અને શૈલીનું સ્પષ્ટ વિભાજન હોવું જોઈએ. એચટીએમએલનો ઉપયોગ માળખું બનાવવા માટે થાય છે જ્યારે CSS શૈલીને સૂચવે છે. કારણ કે કેન્દ્રમાં એક તત્વની દ્રશ્ય લાક્ષણિકતા છે (તે કઈ છે તેના કરતાં તે કેવી રીતે જુએ છે), તે શૈલી CSS સાથે નિયંત્રિત નથી, HTML નથી આ માટે HTML સેગમેન્ટમાં
CSS સાથે ટેક્સ્ટિંગ કેન્દ્ર
વેબપૃષ્ઠ પર કેન્દ્રિત સૌથી સરળ વસ્તુ એ ટેક્સ્ટ છે. ત્યાં માત્ર એક જ શૈલીની મિલકત છે જેને તમે આ કરવા માટે જાણવાની જરૂર છે: ટેક્સ્ટ-સંરેખિત નીચે CSS શૈલી લો, ઉદાહરણ તરીકે:
p.center {text-align: કેન્દ્ર; }
CSS ની આ રેખા સાથે, કેન્દ્ર વર્ગ સાથે લખાયેલ દરેક ફકરો તેના પિતૃ તત્વની અંદર આડા કેન્દ્રિત થશે. ઉદાહરણ તરીકે, જો ફકરો એક વિભાજનની અંદર હતો, જેનો અર્થ તે તે વિભાગનો બાળક હતો, તો તે
અહીં HTML દસ્તાવેજમાં લાગુ કરેલ આ ક્લાસનું ઉદાહરણ છે:
આ ટેક્સ્ટ કેન્દ્રિત છે.
ટેક્સ્ટ-સંરેખિત સંપત્તિ સાથે ટેક્સ્ટને કેન્દ્રિત કરતી વખતે, યાદ રાખો કે તે તેના ઘટક ઘટકની અંદર કેન્દ્રિત હશે અને સંપૂર્ણ પૃષ્ઠની અંદર જ જરૂરી નથી. પણ યાદ રાખો કે કેન્દ્ર-પ્રામાણિક લખાણ સામગ્રીના મોટા બ્લોક્સ માટે વાંચવું મુશ્કેલ હોઈ શકે છે, તેથી આ શૈલીનો અસ્પષ્ટ રીતે ઉપયોગ કરો. હેડલાઇન્સ અને ટેક્સ્ટના નાના બ્લોક્સ, જેમ કે લેખ અથવા અન્ય સામગ્રી માટે સતામણી કરનાર ટેક્સ્ટની જેમ, કેન્દ્રિત થાય ત્યારે ઘણીવાર વાંચવાનું અને દંડ કરવું સહેલું હોય છે, પરંતુ ટેક્સ્ટના મોટા બ્લોક્સ, સંપૂર્ણ લેખ જેવા જ, સામગ્રી સંપૂર્ણપણે કેન્દ્રમાં છે તે વપરાશ માટે પડકારરૂપ રહેશે ન્યાયી યાદ રાખો, જ્યારે વેબસાઇટ ટેક્સ્ટની વાત આવે છે ત્યારે વાંચી શકાય તે હંમેશા ચાવી છે !
CSS સાથે સામગ્રીના વિભાગોને કેન્દ્રિત કરી રહ્યાં છે
બ્લોક્સ તમારા પૃષ્ઠ પર કોઈપણ ઘટકો છે જે નિર્ધારિત પહોળાઈ ધરાવે છે અને બ્લોક-સ્તર તત્વ તરીકે સ્થાપિત કર્યા છે. વારંવાર, આ બ્લોક્સ HTML
div.center {
હાંસિયો: 0 સ્વતઃ;
પહોળાઈ: 80મ;
}
માર્જિન પ્રોપર્ટી માટે આ સીએસએસ લઘુલિપિ, ટોચની અને નીચલા માર્જિનને 0 ની કીંમત પર સેટ કરશે, જ્યારે ડાબી અને જમણી "ઓટો" નો ઉપયોગ કરશે. આ આવશ્યકપણે કોઈપણ જગ્યા લે છે જે ઉપલબ્ધ છે અને વ્યૂપોર્ટ વિંડોની બે બાજુઓ વચ્ચે સમાનરૂપે વિભાજન કરે છે, પૃષ્ઠ પર તત્વને અસરકારક રીતે કેન્દ્રિત કરે છે.
અહીં તે HTML માં લાગુ થાય છે:
પરંતુ તે અંદરની ટેક્સ્ટ ગોઠવાયેલ છે.
જ્યાં સુધી તમારા બ્લોકની નિર્ધારિત પહોળાઈ હોય ત્યાં સુધી, તે પોતે સમાવિષ્ટ ઘટકની અંદર કેન્દ્રિત થશે. તે બ્લોકમાં રહેલો ટેક્સ્ટ તેની અંદર કેન્દ્રિત થશે નહીં, પરંતુ તેને બાય-ન્યાયી રાખવામાં આવશે. આ કારણે વેબ બ્રાઉસરમાં ટેક્સ્ટ બાકી છે. જો તમે ટેક્સ્ટને કેન્દ્રિત કરવા ઇચ્છતા હોવ તો, તમે ટેક્સ્ટ-સંરેખિત સંપત્તિનો ઉપયોગ કરી શકો છો જે આપણે પહેલા આ વિભાગ સાથે સંકળાયેલા હતા જેથી વિભાગને કેન્દ્રિત કરી શકાય.
સીએસએસ સાથે છબીઓ કેન્દ્રિત
જ્યારે મોટાભાગના બ્રાઉઝર્સ છબીઓને એક જ ટેક્સ્ટ-સંરેખિત સંપત્તિનો ઉપયોગ કરીને કેન્દ્રિત કરે છે જે અમે પહેલાથી જ ફકરા માટે જોયાં હતાં, તે ટેકનિક પર ભરોસો રાખવાનો કોઈ સારો વિચાર નથી કારણ કે તે W3C દ્વારા ભલામણ કરાયેલ નથી. તે આગ્રહણીય નથી, તેથી હંમેશાં એવી તક છે કે બ્રાઉઝર્સની ભાવિ આવૃત્તિઓ આ પદ્ધતિને અવગણવા માટે પસંદ કરી શકે છે.
ઇમેજને મધ્યમાં રાખવા માટે ટેક્સ્ટ-સંરેખિત કરવાને બદલે, તમારે સ્પષ્ટપણે બ્રાઉઝરને જણાવવું જોઈએ કે છબી એક બ્લોક-સ્તર ઘટક છે આ રીતે, તમે તેને અન્ય કોઇ બ્લોક તરીકે કેન્દ્રિત કરી શકો છો. આવું કરવા માટે અહીં સીએસએસ છે:
img.center {
પ્રદર્શન: બ્લોક;
માર્જિન ડાબે: ઑટો;
માર્જિન-જમણે: ઓટો;
}
અને અહીં એચટીએમએલ છે જે ઈમેજ માટે કે જે આપણે કેન્દ્રિત થવાની ઇચ્છા રાખીએ છીએ:
તમે ઇન-લાઇન CSS (નીચે જુઓ) નો ઉપયોગ કરીને ઑબ્જેક્ટ્સ કેન્દ્ર પણ કરી શકો છો, પરંતુ આ અભિગમની ભલામણ કરવામાં આવી નથી કારણ કે તે તમારા HTML માર્કઅપમાં વિઝ્યુઅલ સ્ટાઇલ ઉમેરે છે. યાદ રાખો, અમે શૈલી અને માળખાને અલગ કરવા માંગીએ છીએ, જેથી વિરામ સાથેના તમારા HTML કોડમાં CSS શૈલીઓ ઉમેરીને અને, જેમ કે, શક્ય હોય ત્યારે તે ટાળવા જોઈએ.
સી.એસ.એસ.
વેબ ડિઝાઇનમાં ઉભા રહેલા વસ્તુઓને ઊભી કરવામાં હંમેશા પડકાર છે, પરંતુ CSS3 માં CSS ફ્લેક્સિબલ બોક્સ લેઆઉટ મોડ્યુલના પ્રકાશન સાથે, હવે તે કરવા માટેની એક રીત છે.
વર્ટિકલ સંરેખણ ઉપર આવરી આડી સંરેખણની જેમ જ કામ કરે છે. CSS ગુણધર્મ મધ્યમ મૂલ્ય સાથે વર્ટિકલ- સંરેખિત છે.
.vcenter {
ઊભી-સંરેખિત: મધ્યમ;
}
આ અભિગમ માટેનું નુકસાન એ છે કે તમામ બ્રાઉઝર્સ CSS FlexBox ને સપોર્ટ કરતા નથી, તેમ છતાં આ નવી CSS લેઆઉટ પદ્ધતિમાં વધુ અને વધુ આવ્યાં છે! હકીકતમાં, તમામ આધુનિક બ્રાઉઝર્સ આજે આજે આ CSS શૈલીને ટેકો આપે છે. આનો અર્થ એ કે Flexbox સાથેની તમારી માત્ર ચિંતાઓ ખૂબ જૂના બ્રાઉઝર સંસ્કરણ હશે.
જો તમને જૂના બ્રાઉઝર્સ સાથે સમસ્યા હોય, તો W3C આગ્રહ રાખે છે કે તમે નીચેની પદ્ધતિનો ઉપયોગ કરીને કન્ટેનરમાં ઊભું લખાણ કેન્દ્રિત કરો:
- ઘટકોને એક ઘટકમાં કેન્દ્રિત કરવા માટે તત્વોને મૂકો, જેમ કે એક div
- સમાવતી તત્વ પર લઘુત્તમ ઊંચાઈ સેટ કરો.
- જાહેર કરો કે ટેબલ સેલ તરીકે તત્વ શામેલ છે.
- ઊભી ગોઠવણીને "મધ્યમ" તરીકે સેટ કરો.
ઉદાહરણ તરીકે, અહીં CSS છે:
.vcenter {
લઘુત્તમ ઊંચાઇ: 12 અંશ;
પ્રદર્શન: કોષ્ટક-કોષ;
ઊભી-સંરેખિત: મધ્યમ;
}
અને અહીં HTML છે:
આ ટેક્સ્ટ બટનોમાં ઊભી કેન્દ્રિત છે.
વર્ટિકલ સેન્ટરિંગ અને ઈન્ટરનેટ એક્સપ્લોરરના જૂના વર્ઝન
ઇન્ટરનેટ એક્સ્પ્લોરર (IE) ને કેન્દ્રમાં ચલાવવા માટેના કેટલાક રસ્તાઓ છે અને પછી શરતી ટિપ્પણીઓનો ઉપયોગ કરે છે જેથી કરીને માત્ર IE શૈલીઓ જુએ છે, પરંતુ તે થોડું વર્બોઝ અને નીચ છે. સારા સમાચાર એ છે કે માઇક્રોસોફ્ટની તાજેતરના IE ના જૂના સંસ્કરણોને ટેકો આપવાનું તાજેતરના નિર્ણય સાથે, તે બિનઆધારિત બ્રાઉઝર્સ ટૂંક સમયમાં તેમના માર્ગ પર હોવું જોઈએ, વેબ ડીઝાઇનરોને CSS ફલેક્સબોક્સ જેવા આધુનિક લેઆઉટ અભિગમનો ઉપયોગ કરવાનું સરળ બનાવે છે જે તમામ CSS લેઆઉટ બનાવશે, બધા વેબ ડીઝાઇનરો માટે માત્ર કેન્દ્રમાં, વધુ સરળ નહીં.