പട്ടികകളില്ലാത്ത ശൈലി തയ്യാറാക്കുന്നതിന് എങ്ങനെയാണ് CSS സ്ഥാനനിർണ്ണയം ഉപയോഗിക്കേണ്ടത്

Tableless ലേഔട്ടുകൾ പുതിയ ഡിസൈൻ അതിർത്തികൾ തുറക്കുക

ലേഔട്ടിനായി ടേബിളുകൾ ഉപയോഗിക്കരുതെന്ന് പല കാരണങ്ങളുണ്ട് . CSS ഉപയോഗിച്ച് ലേഔട്ട് ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ളതിനാൽ ആളുകൾ അവ ഉപയോഗിക്കുന്നത് തുടരുന്നതിനുള്ള ഏറ്റവും പ്രധാനപ്പെട്ട കാരണം ആണ്. CSS സ്ക്രിപ്റ്റിങ്ങിൽ ഒരു പഠന വക്രത ഉണ്ടെങ്കിലും, CSS ലേഔട്ട് എങ്ങനെ ചെയ്യണമെന്ന് നിങ്ങൾ മനസ്സിലാക്കുമ്പോൾ, അത് എത്ര എളുപ്പത്തിൽ നിങ്ങൾക്ക് ആശ്ചര്യമാകും. പഠിച്ചതിനു ശേഷം, നിങ്ങൾ ഉപയോഗിക്കുന്നത് രണ്ടാമത്തെ ഏറ്റവും സാധാരണ കാരണം, കാരണം സി.എസ്.റ്റി ഉപയോഗിക്കാത്തതിനാൽ ആളുകൾക്ക് അത് കൊടുക്കുന്നു. "പട്ടികകൾ എഴുതാൻ വേഗതയാണ്." നിങ്ങൾക്ക് ടേബിളുകൾ അറിയാമെങ്കിലും വേഗത്തിൽ, നിങ്ങൾ CSS പഠിച്ചാൽ, നിങ്ങൾക്ക് വേഗത്തിൽ അതിന്റെ കൂടെ.

CSS സ്ഥാനത്തേക്കുള്ള ബ്രൌസർ പിന്തുണ

എല്ലാ ആധുനിക ബ്രൌസറുകളിലും സിഎസ്എസ് പൊസിഷനിംഗ് നന്നായി പിന്തുണയ്ക്കുന്നു. നിങ്ങൾ നെറ്റ്സ്കേപ്പ് 4 അല്ലെങ്കിൽ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 4 എന്നിവയ്ക്കായി ഒരു സൈറ്റ് നിർമ്മിക്കുന്നില്ലെങ്കിൽ, നിങ്ങളുടെ വായനക്കാർക്ക് നിങ്ങളുടെ CSS- സ്ഥാനപ്പെടുത്തിയ വെബ് പേജുകൾ കാണുന്നതിൽ ഒരു പ്രശ്നവുമില്ല.

നിങ്ങൾ ഒരു പേജ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് പുനർവിചിന്തനം ചെയ്യുന്നു

പട്ടികകൾ ഉപയോഗിച്ച് ഒരു സൈറ്റ് നിർമ്മിക്കുമ്പോൾ, ഒരു ടാബുലർ ഫോർമാറ്റിൽ ചിന്തിക്കണം. മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, നിങ്ങൾ സെല്ലുകൾ, വരികൾ, നിരകൾ എന്നിവയെക്കുറിച്ചാണ് ചിന്തിക്കുന്നത്. നിങ്ങളുടെ വെബ് പേജുകൾ ഈ സമീപനത്തെ പ്രതിഫലിപ്പിക്കും. നിങ്ങൾ ഒരു CSS സ്ഥാനനിർണ്ണയം ഡിസൈനിലേക്ക് നീങ്ങുമ്പോൾ, ഉള്ളടക്കത്തിൽ നിങ്ങളുടെ പേജുകളെക്കുറിച്ച് ചിന്തിക്കാൻ തുടങ്ങും, കാരണം മറ്റെവിടെയെങ്കിലും ലേഔട്ടിൽ ഇഷ്ടപ്പെടാം - മറ്റെവിടെയെങ്കിലുമോ മുകളിൽ ലേബൽ ചെയ്യുക.

വ്യത്യസ്ത വെബ്സൈറ്റുകൾക്ക് വ്യത്യസ്ത കെട്ടിടങ്ങൾ ഉണ്ട്. ഒരു ഫലപ്രദമായ പേജ് നിർമ്മിക്കുന്നതിന്, നൽകിയിരിക്കുന്ന പേജിന്റെ ഘടന നിങ്ങൾ മൂല്യനിർണ്ണയം നടത്തുന്നതിന് മുമ്പ് വിലയിരുത്തുക. ഒരു ഉദാഹരണ പേജിൽ അഞ്ച് വ്യത്യസ്ത ഭാഗങ്ങൾ ഉൾപ്പെട്ടിരിക്കാം:

1. ഹെഡ്ഡർ . ബാനർ പരസ്യം, സൈറ്റിന്റെ പേര്, നാവിഗേഷൻ ലിങ്കുകൾ, ഒരു ലേഖന ശീർഷകം എന്നിവയും മറ്റ് ചില കാര്യങ്ങളും.
2. വലത് നിര . തിരയൽ ബോക്സ്, പരസ്യങ്ങൾ, വീഡിയോ ബോക്സുകൾ, ഷോപ്പിംഗ് ഏരിയകൾ എന്നിവയുമുള്ള പേജിന്റെ വലതുഭാഗമാണിത്.
3. ഉള്ളടക്കം . ഒരു ലേഖനം, ബ്ലോഗ് പോസ്റ്റ് അല്ലെങ്കിൽ ഷോപ്പിംഗ് കാർട്ടിലെ പാഠം - പേജിന്റെ മാംസം, ഉരുളക്കിഴങ്ങ്.
4. ഇൻലൈൻ പരസ്യങ്ങൾ . പരസ്യത്തിനുള്ളിൽ ഉള്ള പരസ്യങ്ങൾ.
5. ഫൂട്ടർ . താഴെയുള്ള നാവിഗേഷൻ, സ്രഷ്ടാവ് വിവരം, പകർപ്പവകാശ വിവരങ്ങൾ, കുറഞ്ഞ ബാനർ പരസ്യങ്ങൾ, അനുബന്ധ ലിങ്കുകൾ.

മേശയിലെ ആ അഞ്ച് മൂലകങ്ങൾ ചേർക്കുന്നതിനു പകരം, ഉള്ളടക്കത്തിന്റെ വിവിധ ഭാഗങ്ങളെ നിർവ്വചിക്കുന്നതിന് HTML5 വിഭാഗത്തിന്റെ ഘടകങ്ങൾ ഉപയോഗിക്കുക, തുടർന്ന് പേജിൽ ഉള്ളടക്ക ഘടകങ്ങൾ സ്ഥാപിക്കുന്നതിന് CSS സ്ഥാനനിർണ്ണയം ഉപയോഗിക്കുക.

നിങ്ങളുടെ ഉള്ളടക്ക വിഭാഗങ്ങൾ തിരിച്ചറിയുക

നിങ്ങളുടെ സൈറ്റിലെ വ്യത്യസ്ത ഉള്ളടക്ക മേഖലകളെ നിർവ്വചിച്ചതിന് ശേഷം, നിങ്ങൾ അവ നിങ്ങളുടെ HTML- ൽ എഴുതേണ്ടതുണ്ട്. നിങ്ങൾക്ക് സാധാരണയായി, നിങ്ങളുടെ വിഭാഗങ്ങൾ ഏതെങ്കിലും ക്രമത്തിൽ സ്ഥാപിക്കുക, ആദ്യം നിങ്ങളുടെ പേജിന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട ഭാഗങ്ങൾ സ്ഥാപിക്കുന്നതിനുള്ള നല്ല ആശയമാണ്. തിരയൽ എഞ്ചിൻ ഒപ്റ്റിമൈസേഷനും ഈ സമീപനം സഹായിക്കും.

സ്ഥാനപ്പെടുത്തൽ പ്രകടമാക്കാൻ, ഒരു നിരയെ ഒരു നിരയുടെ തലക്കെട്ട് അല്ലെങ്കിൽ അടിക്കുറിപ്പിൽ മൂന്ന് നിരകളുണ്ട്. നിങ്ങൾക്ക് ഇഷ്ടമുള്ള ഏത് തരം ലേഔട്ടുകളെയും സൃഷ്ടിക്കാൻ സ്ഥാനനിർണ്ണയം ഉപയോഗിക്കാം.

മൂന്ന് നിര ശൈലിയിൽ, മൂന്ന് വിഭാഗങ്ങൾ നിർവ്വചിക്കുക: ഇടത് നിര, വലത് നിര, ഉള്ളടക്കം എന്നിവ.

രണ്ട് നിരകൾക്കുള്ള ഉള്ളടക്കവും രണ്ട് സെക്ഷൻ ഘടകങ്ങൾക്കും ആർട്ടിക്ലെക് ഘടകം ഉപയോഗിച്ച് ഈ വിഭാഗങ്ങൾ ഉടൻ ഉരച്ചുനീക്കപ്പെടും. എല്ലാം തിരിച്ചറിയുന്ന ഒരു ആട്രിബ്യൂട്ടും ഉണ്ടാകും. നിങ്ങൾ id ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുമ്പോൾ, ഓരോ ഐഡിയിലേയ്ക്കും നിങ്ങൾ ഒരു പ്രത്യേക പേര് രേഖപ്പെടുത്തണം.

ഉള്ളടക്കം പൊസിഷനിംഗ്

CSS ഉപയോഗിച്ച്, നിങ്ങളുടെ ID'd ഘടകങ്ങളുടെ സ്ഥാനം നിർവ്വചിക്കുക. ഇതുപോലുള്ള സ്റ്റൈൽ കോളിൽ നിങ്ങളുടെ സ്ഥാന വിവരം സൂക്ഷിക്കുക:

# ഉള്ളടക്കം {

}

ഈ ഘടകങ്ങൾക്കുള്ളിലെ ഉള്ളടക്കം കഴിയുന്നിടത്തോളം നടക്കും, നിലവിലെ സ്ഥാനത്തിന്റെ അല്ലെങ്കിൽ വീതിയുടെ 100 ശതമാനം വീതിയും. ഒരു നിശ്ചിത വീതിയ്ക്ക് നിർബന്ധിക്കാതെ ഒരു വിഭാഗത്തിന്റെ സ്ഥാനം ബാധിക്കുന്നതിനായി, പാഡിംഗ് അല്ലെങ്കിൽ മാർജിൻ പ്രോപ്പർട്ടികൾ മാറ്റുക.

ഈ ലേഔട്ടിനായി, രണ്ട് നിരകൾ നിശ്ചിത വീതികളിലേക്ക് സജ്ജമാക്കുകയും, തുടർന്ന് അവരുടെ സ്ഥാനം പൂർണ്ണമായും സജ്ജമാക്കുകയും ചെയ്യുന്നു, അതിനാൽ അവ HTML- ൽ കണ്ടെത്തുന്നതിന് അവരെ ബാധിക്കില്ല.

# ഇടത് നിര {
സ്ഥാനം: കേവലമായ;
ഇടത്: 0;
വീതി: 150px;
മാർജിൻ-ഇടത്: 10px;
മാർജിൻ-ടോപ്പ്: 20px;
നിറം: # 000000;
പാഡിംഗ്: 3px;
}
# വലത് കോളം {
സ്ഥാനം: കേവലമായ;
ഇടത്: 80%;
മുകളിൽ: 20px;
വീതി: 140px;
പാഡിംഗ് ഇടത്: 10px;
z- ഇൻഡെക്സ്: 3;
നിറം: # 000000;
പാഡിംഗ്: 3px;
}

തുടർന്ന് ഉള്ളടക്ക മേഖലയ്ക്ക്, വലത് വശത്തുള്ള മാർജിനുകൾ സജ്ജമാക്കുകയും ഇടത് ഭാഗത്തെ രണ്ട് നിര നിരകളുമായി പൊരുത്തപ്പെടാൻ പാടില്ല.

# ഉള്ളടക്കം {
മുകളിൽ: 0px;
മാർജിൻ: 0px 25% 0 165px;
പാഡിംഗ്: 3px;
നിറം: # 000000;
}

ഒരു HTML പട്ടികയ്ക്ക് പകരം CSS ഉപയോഗിച്ച് നിങ്ങളുടെ പേജ് നിർദ്ദിഷ്ട സാങ്കേതിക ശീർഷകം ആവശ്യമാണ്, പക്ഷെ നിങ്ങളുടെ പേജിന് പിന്നീട് ഘടനാപരമായ മാറ്റങ്ങൾ വരുത്തുന്നതിൽ കൂടുതൽ എളുപ്പവും പ്രതികരിക്കുന്നതുമായ ഡിസൈനുകളിൽ നിന്നും കൂടുതൽ എളുപ്പത്തിൽ നിന്നും ലഭിക്കുന്നതാണ്.