పట్టికలు లేకుండా లేఅవుట్ సృష్టించడానికి CSS స్థాన ఉపయోగించండి ఎలా

Tableless లేఅవుట్ కొత్త డిజైన్ సరిహద్దులను తెరవండి

లేఅవుట్ కోసం పట్టికలను ఉపయోగించకూడదనే అనేక కారణాలు ఉన్నాయి. ఇది CSS తో లేఅవుట్ చేయడానికి కష్టం ఎందుకంటే ప్రజలు వాటిని ఉపయోగించడానికి కొనసాగించడానికి తరచుగా ఇవ్వడానికి కారణాలు ఒకటి. మీరు CSS లేఅవుట్ ఎలా చేయాలో అర్థం చేసుకున్నప్పుడు, CSS స్క్రిప్టింగ్ ఒక సాంకేతికతను కలిగి ఉన్నప్పటికీ, మీరు ఎంత సులభమో ఆశ్చర్యకరంగా ఉండవచ్చు. మరియు ఒకసారి మీరు తెలుసుకోవడానికి, మీరు CSS ను ఉపయోగించడం కోసం రెండవ అతి సాధారణ కారణంతో ప్రస్తావించబడతారు- "పట్టికలు వ్రాయడం వేగవంతం." మీరు పట్టికలు తెలిసినందున ఇది వేగంగా ఉంటుంది, కానీ ఒకసారి మీరు CSS ను నేర్చుకోవచ్చు, మీరు దానితో.

CSS స్థాన యొక్క బ్రౌజర్ మద్దతు

CSS స్థానాలు బాగా అన్ని ఆధునిక బ్రౌజర్లలో మద్దతు ఉంది. మీరు నెట్స్కేప్ 4 లేదా ఇంటర్నెట్ ఎక్స్ప్లోరర్ 4 కోసం ఒక సైట్ను నిర్మించకపోతే, మీ పాఠకులు మీ CSS స్థాన వెబ్ పేజీలను చూసి ఏ సమస్యను కలిగి ఉండకూడదు.

రీడ్లింకింగ్ హౌ యు బిల్డ్ ఎ పేజ్

మీరు పట్టికలను ఉపయోగించి ఒక సైట్ను నిర్మించినప్పుడు, మీరు ఒక టాబ్లార్ ఫార్మాట్లో ఆలోచించాలి. మరో మాటలో చెప్పాలంటే, మీరు కణాలు మరియు వరుసలు మరియు నిలువుల పరంగా ఆలోచిస్తున్నారు. మీ వెబ్ పేజీలు ఈ పద్ధతిని ప్రతిబింబిస్తాయి. మీరు CSS స్థాన రూపకల్పనకు వెళ్ళినప్పుడు, మీరు కంటెంట్లో పరంగా మీ పేజీల గురించి ఆలోచిస్తూ మొదలుపెడతారు, ఎందుకంటే కంటెంట్లో ఎక్కడైనా మీరు ఉంచాలనుకుంటున్నారు-ఇతర కంటెంట్ పైన కూడా లేయర్డ్.

వేర్వేరు వెబ్సైట్లు వివిధ నిర్మాణాలు కలిగి ఉన్నాయి. సమర్థవంతమైన పేజీని నిర్మించడానికి, మీరు దానికి కంటెంట్ని కేటాయించే ముందు ఏదైనా పేజీ యొక్క నిర్మాణంను విశ్లేషించండి. ఉదాహరణ పేజీలో ఐదు విభిన్న విభాగాలు ఉండవచ్చు:

1. శీర్షిక . బ్యానర్ ప్రకటన, సైట్ పేరు, పేజీకి సంబంధించిన లింకులు లింకులు, ఒక వ్యాసం శీర్షిక మరియు కొన్ని ఇతర విషయాలు.
2. కుడి కాలమ్ . శోధన పెట్టె, ప్రకటనలు, వీడియో బాక్సులను మరియు షాపింగ్ ప్రాంతాలతో పేజీ యొక్క కుడి వైపు ఇది.
3. కంటెంట్ . ఒక వ్యాసం, బ్లాగ్ పోస్ట్ లేదా షాపింగ్ కార్ట్ యొక్క టెక్స్ట్-పేజీ యొక్క మాంసం మరియు బంగాళాదుంపలు.
4. ఇన్లైన్ ప్రకటనలు . కంటెంట్ లోపల ఇన్లైన్ ప్రకటనలు.
5. ఫుటర్ . దిగువ పేజీకి సంబంధించిన లింకులు, రచయిత సమాచారం, కాపీరైట్ సమాచారం, తక్కువ బ్యానర్ ప్రకటనలు మరియు సంబంధిత లింక్లు.

బదులుగా ఒక టేబుల్ లో ఆ ఐదు అంశాలను ఉంచడం కంటే, కంటెంట్ విభాగాలను నిర్వచించడానికి HTML5 విభాగీకరణ అంశాలు ఉపయోగించండి, ఆపై పేజీ కంటెంట్ అంశాలు ఉంచడానికి CSS స్థానాలు ఉపయోగించండి.

మీ కంటెంట్ సెక్షన్లను గుర్తించడం

మీరు మీ సైట్ యొక్క విభిన్న కంటెంట్ ప్రాంతాన్ని నిర్వచించిన తర్వాత, మీరు మీ HTML లో వాటిని వ్రాయాలి. మీరు సాధారణంగా, మీ విభాగాలను ఏదైనా క్రమంలో ఉంచవచ్చు, ఇది మీ పేజీ యొక్క అతి ముఖ్యమైన భాగాలను ముందుగా ఉంచడానికి మంచి ఆలోచన. ఈ విధానం సెర్చ్-ఇంజిన్ ఆప్టిమైజేషన్ తో పాటుగా సహాయం చేస్తుంది.

స్థానమును ప్రదర్శించుటకు, ఒక పుట మూడు నిలువు వరుసలతో కాని శీర్షిక లేదా ఫుటరు లేదని ఊహించు. మీరు మీకు కావలసిన లేఅవుట్ యొక్క ఏ రకం సృష్టించడానికి స్థానాలు ఉపయోగించవచ్చు.

మూడు కాలమ్ లేఅవుట్ కోసం, మూడు విభాగాలు నిర్వచించండి: ఎడమ కాలమ్, కుడి కాలమ్ మరియు కంటెంట్.

ఈ విభాగాలు రెండు నిలువు కోసం కంటెంట్ మరియు రెండు SECTION అంశాలకు ARTICLE ఎలిమెంట్ను ఉపయోగించి తక్షణం ప్రదర్శించబడతాయి. అంతా కూడా దానిని గుర్తించే లక్షణాన్ని కలిగి ఉంటుంది. మీరు id లక్షణాన్ని ఉపయోగించినప్పుడు, మీరు ప్రతి ఐడి కోసం ఒక ప్రత్యేక పేరును పేర్కొనాలి.

కంటెంట్ స్థానాలు

CSS ఉపయోగించి, మీ ID'd అంశాల కోసం స్థానాన్ని నిర్వచించండి. మీ స్థానం సమాచారాన్ని ఈ విధంగా ఒక శైలి కాల్లో నిల్వ చేయండి:

# కంటెంట్ {

}

ఈ మూలకాలలోని కంటెంట్ ప్రస్తుత స్థలం లేదా పేజీ యొక్క వెడల్పులో 100 శాతం మాత్రమే చేయగలదు. ఒక స్థిర వెడల్పుకు బలవంతంగా లేకుండా విభాగం యొక్క స్థానాన్ని ప్రభావితం చేయడానికి, పాడింగ్ లేదా మార్జిన్ లక్షణాలను మార్చండి.

ఈ లేఅవుట్ కోసం, రెండు నిలువు వరుసలను స్థిర వెడల్పులుగా సెట్ చేసి, ఆపై వాటి స్థానం సంపూర్ణంగా సెట్ చేయండి, తద్వారా వారు HTML లో ఎక్కడ కనుగొనబడతాయనేది ప్రభావితం కాదు.

# ఎడమ కాలమ్ {
స్థానం: సంపూర్ణ;
ఎడమ: 0;
వెడల్పు: 150px;
margin-left: 10 px;
margin-top: 20px;
రంగు: # 000000;
పాడింగ్: 3px;
}
# కుడి కాలమ్ {
స్థానం: సంపూర్ణ;
ఎడమ: 80%;
టాప్: 20px;
వెడల్పు: 140px;
పాడింగ్-ఎడమ: 10px;
z- సూచిక: 3;
రంగు: # 000000;
పాడింగ్: 3px;
}

అప్పుడు కంటెంట్ ప్రాంతం కోసం, కుడివైపున అంచులను సెట్ చేసి, ఎడమవైపుకు రెండు బాహ్య నిలువులను అతివ్యాప్తి చేయకూడదు.

# కంటెంట్ {
పైన: 0px;
మార్జిన్: 0px 25% 0 165px;
పాడింగ్: 3px;
రంగు: # 000000;
}

HTML పట్టికకు బదులుగా CSS ఉపయోగించి మీ పేజీని నిర్వచించడం ఒక బిట్ మరింత సాంకేతిక నైపుణ్యం అవసరం, కానీ చెల్లింపు తర్వాత మీ పేజీకి నిర్మాణ సర్దుబాట్లు చేయడానికి మరింత సౌకర్యవంతమైన మరియు ప్రతిస్పందించే నమూనాలు మరియు ఎక్కువ సౌలభ్యం నుండి క్రింది.