ટેબલલેસ લેઆઉટનો નવી ડિઝાઇન ફ્રન્ટિયર ખોલો
લેઆઉટ માટે કોષ્ટકોનો ઉપયોગ ન કરવાના ઘણા કારણો છે લોકો તેનો ઉપયોગ ચાલુ રાખવા માટેના સૌથી વધુ વારંવારના કારણોમાંથી એક છે કારણ કે CSS સાથે લેઆઉટ કરવું મુશ્કેલ છે. જો કે CSS સ્ક્રીપ્ટિંગ એ શીખવાની કર્વ શામેલ કરે છે, જ્યારે તમે CSS લેઆઉટ કેવી રીતે કરવું તે સમજી શકો છો, તમને આશ્ચર્ય થશે કે તે કેટલું સરળ છે અને તમે શીખ્યા તે પછી, તમે CSS નો ઉપયોગ ન કરવા બદલ બીજા સામાન્ય કારણોસર સંબોધશો - "તે કોષ્ટકો લખવા માટે વધુ ઝડપી છે." તે વધુ ઝડપથી છે કારણ કે તમે કોષ્ટકો જાણો છો, પરંતુ એકવાર તમે CSS શીખ્યા, તમે જેટલું ઝડપી છો તે સાથે.
સીએસએસ પોઝિશનિંગનો બ્રાઉઝર સપોર્ટ
બધા આધુનિક બ્રાઉઝર્સમાં CSS પૉઝીંગિંગ સારી રીતે સપોર્ટેડ છે જ્યાં સુધી તમે નેટસ્કેપ 4 અથવા ઇન્ટરનેટ એક્સ્પ્લોરર 4 માટે કોઈ સાઇટ બનાવી રહ્યાં ન હો, ત્યાં સુધી તમારા વાચકોને તમારા સીએસએસ-સ્થિતિવાળી વેબ પૃષ્ઠો જોવાની કોઈ તકલીફ ન હોવી જોઈએ.
તમે કોઈ પૃષ્ઠ કેવી રીતે બનાવશો તે અંગે ફરી વિચાર કરવો
જ્યારે તમે કોષ્ટકોનો ઉપયોગ કરીને એક સાઇટ બનાવો છો, ત્યારે તમારે કોષ્ટક સ્વરૂપમાં વિચારવું પડશે. બીજા શબ્દોમાં કહીએ તો, તમે કોશિકાઓ અને પંક્તિઓ અને કૉલમ્સ દ્રષ્ટિએ વિચારી રહ્યાં છો. તમારા વેબ પૃષ્ઠો આ અભિગમને પ્રતિબિંબિત કરશે. જ્યારે તમે CSS પૉઝીસીંગ ડીઝાઇન પર જાઓ છો, ત્યારે તમે સામગ્રીના સંદર્ભમાં તમારા પૃષ્ઠોને વિચારી શકો છો, કારણ કે સામગ્રી જ્યાં તમે ઇચ્છો છો ત્યાં સામગ્રીમાં ગમે ત્યાં મૂકી શકાય છે-અન્ય સામગ્રીની ઉપર સ્તરવાળી.
જુદી જુદી વેબસાઈટોમાં વિવિધ માળખાં છે. એક અસરકારક પૃષ્ઠ બનાવવા માટે, તમે તેને સામગ્રી સોંપી તે પહેલાં આપેલ કોઈપણ પૃષ્ઠના બંધારણનું મૂલ્યાંકન કરો. ઉદાહરણ પૃષ્ઠમાં પાંચ અલગ વિભાગો શામેલ હોઈ શકે છે:
- હેડર બૅનર જાહેરાત, સાઇટનું નામ, નેવિગેશન લિંક્સ, એક લેખ શીર્ષક અને સાથે સાથે કેટલીક બીજી વસ્તુઓનું હોમ.
- જમણા કૉલમ . આ શોધ બૉક્સ, જાહેરાતો, વિડિઓ બૉક્સ અને શોપિંગ વિસ્તારો સાથે પૃષ્ઠની જમણી બાજુ છે.
- સામગ્રી એક લેખ, બ્લોગ પોસ્ટ અથવા શોપિંગ કાર્ટનો ટેક્સ્ટ - પૃષ્ઠના માંસ અને બટાટા.
- ઇનલાઇન જાહેરાતો આ જાહેરાતો સામગ્રી અંદર ઇનલાઇન
- ફૂટર નીચે નેવિગેશન, લેખક માહિતી, કૉપિરાઇટ માહિતી, નીચલા બેનર જાહેરાતો અને સંબંધિત લિંક્સ.
એક કોષ્ટકમાં તે પાંચ ઘટકો મૂકવાને બદલે, HTML5 કલમ તત્વોનો ઉપયોગ સામગ્રીના જુદા જુદા ભાગોને વ્યાખ્યાયિત કરવા માટે કરો, અને પછી પૃષ્ઠ પરની સામગ્રી ઘટકો મૂકવા માટે CSS સ્થિતિનો ઉપયોગ કરો.
તમારા સામગ્રી વિભાગો ઓળખવા
તમે તમારી સાઇટના વિવિધ સામગ્રી ક્ષેત્રોને વ્યાખ્યાયિત કર્યા પછી, તમારે તેને તમારા HTML માં લખવાની જરૂર છે. જ્યારે તમે સામાન્ય રીતે, તમારા વિભાગોને કોઈ પણ ક્રમમાં મૂકી શકો છો, તે પહેલાં તમારા પૃષ્ઠના સૌથી મહત્વપૂર્ણ ભાગો મૂકવા માટે એક સારો વિચાર છે. આ અભિગમ સર્ચ-એન્જિન ઓપ્ટિમાઇઝેશનમાં પણ મદદ કરશે.
સ્થિતિ દર્શાવવા માટે, ત્રણ સ્તંભો સાથે એક પૃષ્ઠની કલ્પના કરો, પરંતુ કોઈ હેડર અથવા ફૂટર નથી. તમે ગમે તે પ્રકારની કોઈપણ લેઆઉટ બનાવવા માટે સ્થિતિ વાપરી શકો છો.
ત્રણ-કૉલમ લેઆઉટ માટે, ત્રણ વિભાગોને વ્યાખ્યાયિત કરો: ડાબી કૉલમ, જમણા સ્તંભ અને સામગ્રી.
આ વિભાગો સામગ્રી માટે આર્ટિકલ ઘટક અને બે કૉલમ માટે બે સેક્શન તત્વોનો ઉપયોગ કરીને ઇન્સ્ટિટ થશે. બધું પણ તે ઓળખવા એક લક્ષણ હશે જ્યારે તમે id એટ્રીબ્યુટનો ઉપયોગ કરો છો, ત્યારે તમારે દરેક id માટે અનન્ય નામની નોંધ કરવી આવશ્યક છે.
સામગ્રીની સ્થિતિ
CSS નો ઉપયોગ કરીને, તમારા ID'd તત્વો માટે સ્થિતિ વ્યાખ્યાયિત કરો. આના જેવી શૈલી કૉલમાં તમારી સ્થિતિ માહિતીને સ્ટોર કરો:
# સામગ્રી {
}
આ ઘટકોની અંદરની સામગ્રી તેટલી જગ્યા લેશે, જેમ કે વર્તમાન સ્થાન અથવા પૃષ્ઠની પહોળાઇના 100 ટકા. એક વિભાગની સ્થિતિને તેને નિશ્ચિત પહોળાઈ પર દબાણ કર્યા વગર, પેડિંગ અથવા માર્જિન પ્રોપર્ટીઝ બદલો.
આ લેઆઉટ માટે, બે કૉલમ્સને નિશ્ચિત પહોળાઈઓ પર સેટ કરો અને પછી પોતાનું પોઝિશન નિશ્ચિત કરો, જેથી તેઓ એચટીએમએલમાં ક્યાં મળે છે તેનાથી પ્રભાવિત થશે નહીં.
# ડાબા-કૉલમ {
સ્થિતિ: નિરપેક્ષ;
ડાબી: 0;
પહોળાઈ: 150 પીએક્સ;
માર્જિન ડાબે: 10 પીએક્સ;
માર્જિન-ટોચ: 20 પીએક્સ;
રંગ: # 000000;
પેડિંગ: 3px;
}
# જમણા-કૉલમ {
સ્થિતિ: નિરપેક્ષ;
ડાબી: 80%;
ટોચ: 20px;
પહોળાઈ: 140px;
પેડિંગ-ડાબે: 10 પીએક્સ;
z- અનુક્રમણિકા: 3;
રંગ: # 000000;
પેડિંગ: 3px;
}
પછી સામગ્રી વિસ્તાર માટે, જમણે અને ડાબા પર હાંસિયા સેટ કરો જેથી સામગ્રી બે બહારના કૉલમને ઓવરલેપ નહીં કરે.
# સામગ્રી {
ટોચ: 0 પીએક્સ;
માર્જિન: 0 પીએક્સ 25% 0 165 પીએક્સ;
પેડિંગ: 3px;
રંગ: # 000000;
}
તમારા પૃષ્ઠને એચટીએમએલ કોષ્ટકને બદલે CSS નો ઉપયોગ કરીને થોડી વધુ તકનીકી કુશળતા જરૂરી છે, પરંતુ ચૂકવણી વધુ લવચીક અને પ્રતિભાવિત ડિઝાઇનોથી અને પછી તમારા પૃષ્ઠ પર માળખાકીય ગોઠવણો કરવાથી વધુ સરળ બને છે.