ویب سائٹ کی تعمیر کرتے وقت سینٹر تصاویر، متن، اور بلاک عناصر
اگر آپ ویب سائٹوں کی تعمیر کرنے کے بارے میں سیکھتے ہیں تو، آپ سب سے زیادہ عام چالوں میں سے ایک کو ماسٹر کی ضرورت ہوگی، براؤزر کی ونڈو میں مرکزوں کو کیسے مربوط ہے. اس کا مطلب یہ ہے کہ صفحے پر کسی تصویر کا مرکز بنانا، یا یہ ڈیزائن کے حصے کے طور پر عنوانات کی طرح متن کی توثیق کر سکتا ہے.
سینکڑوں تصاویر یا متن یا اس سے بھی آپ کے پورے ویب صفحے کے اس بصری نظر کو پورا کرنے کا مناسب طریقہ Cascading Style Sheets (CSS) کا استعمال کرتے ہوئے ہے. مرکز کے مرکز میں زیادہ تر خصوصیات ورژن 1.0 کے بعد سے سی ایس ایس میں ہیں، اور وہ CSS3 اور جدید ویب براؤزرز کے ساتھ بہت اچھا کام کرتے ہیں .
ویب ڈیزائن کے بہت سے پہلوؤں کی طرح، ویب صفحہ میں سی ایس ایس مرکز عناصر میں استعمال کرنے کے بہت سے طریقے موجود ہیں. آئیے اس بصری نظر کو حاصل کرنے کے لئے سی ایس ایس استعمال کرنے کے کچھ مختلف طریقوں پر نظر آتے ہیں.
ایچ ٹی ایم ایل میں سینٹر عناصر میں سی ایس ایس کا استعمال کرتے ہوئے کے جائزہ پر
سی ایس ایس کے ساتھ سینٹرنگ ویب ڈیزائنرز شروع کرنے کے لئے ایک چیلنج ہوسکتا ہے کیونکہ اس ایک بصری طرز کو پورا کرنے کے بہت سے مختلف طریقے موجود ہیں. جبکہ طریقوں کی مختلف قسمیں اچھی یا موسمی ویب ویب ڈویلپرز ہوسکتی ہیں جو جانتا ہے کہ تمام تکنیک ہر عنصر پر کام نہیں کرتے، یہ وسیع پیمانے پر طریقوں سے نئے ویب کے پیشہ ور افراد کے لئے مشکل ہوسکتی ہے، جس کا مطلب یہ ہے کہ وہ کونسی نقطہ نظر کا استعمال کرنے کے لئے جاننے کی ضرورت ہے. ایسا کرنے کا سب سے اچھا کام کچھ نقطہ نظروں کو سمجھنے کے لۓ ہے. جیسا کہ آپ ان کو استعمال کرنا شروع کرتے ہیں، آپ سیکھیں گے کہ کون سی طریقہ بہترین طریقوں میں کام کرتا ہے.
اعلی سطح پر، آپ سی ایس ایس استعمال کرسکتے ہیں:
- سینٹر کا متن
- ایک بلاک سطح کے عنصر مرکز (جیسے ڈویژن)
- ایک تصویر سینٹر
- عمودی طور پر ایک بلاک یا ایک تصویر مرکز
بہت سے (کئی) سال پہلے، ویب ڈیزائنرز نے
سی ایس ایس کے ساتھ مرکز سینٹرنگ
ویب پیج پر مرکز کا سب سے آسان کام متن ہے. یہ صرف ایک سٹائل کی جائیداد ہے جسے آپ کو یہ کرنے کے لئے جاننے کی ضرورت ہے: متن - سیدھ. نیچے سی ایس ایس سٹائل لے لو، مثال کے طور پر:
p.center {متن-سیدھ: مرکز؛ }
سی ایس ایس کی اس لائن کے ساتھ، مرکز کلاس کے ساتھ لکھی گئی ہر پیراگراف کو اپنے والدین عنصر کے اندر افقی طور پر مرکوز کیا جائے گا. مثال کے طور پر، اگر پیراگراف ایک ڈویژن کے اندر تھا، مطلب یہ کہ اس ڈویژن کا ایک بچہ تھا، اسے
ایچ ٹی ایم ایل دستاویز میں لاگو اس کلاس کا ایک مثال ہے:
یہ متن مرکز ہے.
جب متن کی سیدھ جائیداد کے ساتھ متن کا مرکز بناؤ، تو یاد رکھو کہ اس کے اس عناصر کے اندر اندر مرکوز کیا جائے گا اور پورے صفحے پر خود کو مرکوز نہ کرنا. یہ بھی یاد رکھو کہ اس مرکز کے حقائق کا متن مواد کے بڑے بلاکس کے لئے پڑھنے کے لئے مشکل ہوسکتا ہے، لہذا یہ انداز اس انداز میں استعمال کرتا ہے. عنوانات اور متن کے چھوٹے بلاکس، جیسے مضمون یا دیگر مواد کے لئے ٹیکزر کا متن، اکثر پڑھنے اور ٹھیک کرنے کے لئے اکثر آسان ہوتے ہیں، لیکن متن کے بڑے ٹکڑے، مکمل مضمون خود کی طرح، کھپت کرنے کے لئے مشکل ہو جائے گا اگر مواد مکمل طور پر مرکز تھا جائز. یاد رکھو، جب ویب سائٹ کے متن میں آتا ہے تو پڑھنے کی صلاحیت ہمیشہ اہم ہے.
سی ایس ایس کے ساتھ مواد کے سینٹرنگ بلاکس
بلاکس آپ کے صفحے پر کسی بھی عناصر ہیں جن کی وضاحت کی چوڑائی ہے اور ایک بلاک کی سطح عنصر کے طور پر قائم ہیں. اکثر اوقات، یہ بلاکس ایچ ٹی ایم ایل
div.center {
مارجن: 0 آٹو؛
چوڑائی: 80em؛
}
مارجن اسٹیٹ کے لئے یہ سی ایس ایس آٹھویںٹ 0 کی قیمت پر سب سے اوپر اور نیچے کے مارجن مقرر کرے گا، جبکہ بائیں اور دائیں "آٹو." کا استعمال کریں گے. یہ لازمی طور پر کسی ایسی جگہ لیتا ہے جو دستیابی ونڈو کے دونوں اطراف کے درمیان ہی برابر ہوتا ہے اور اس صفحے پر عنصر کو مؤثر طریقے سے تقسیم کرتی ہے.
یہاں HTML میں لاگو کیا جاتا ہے:
لیکن اس کے اندر متن متفق ہے.
جب تک کہ آپ کے بلاک کی وضاحت کی چوڑائی ہے، یہ خود مختار عناصر کے اندر ہی مرکز کرے گا. اس بلاک میں موجود متن اس کے اندر اندر نہیں رکھا جائے گا، لیکن چھوڑ دیا جائے گا. یہ وجہ ہے کہ ویب براؤزرز میں ڈیفالٹ میں بذریعہ ٹیکس چھوڑ دیا گیا ہے. اگر آپ چاہتے تھے کہ ٹیکسٹ کو بھی مرکز بنایا جائے تو، آپ اس ڈویژن کے مرکز کے لۓ اس طریقہ کے ساتھ مل کر پہلے متناسب کردہ ملکیت کا استعمال کرسکتے ہیں.
سی ایس ایس کے ساتھ تصاویر سینٹرنگ
اگرچہ زیادہ تر براؤزرز اسی ٹیکسٹ - سیدھ ملکیت کا استعمال کرتے ہوئے مرکوز تصاویر دکھائے گی جسے ہم پہلے ہی پیراگراف کے لئے دیکھتے ہیں، یہ اس تخنیک پر انحصار کرنے کا ایک اچھا خیال نہیں ہے کیونکہ یہ ڈبلیو 3 سی کی طرف سے سفارش نہیں کی جاتی ہے. چونکہ یہ سفارش نہیں کی جاتی ہے، ہمیشہ ایک موقع ہوتا ہے کہ براؤزر کے مستقبل کے ورژن اس طریقے سے نظر انداز کر سکیں.
ایک تصویر پر متن کے سیدھا استعمال کرنے کی بجائے، آپ کو واضح طور پر براؤزر کو بتانا چاہئے کہ یہ تصویر ایک بلاک کی سطح کا عنصر ہے. اس طرح، آپ اس مرکز کا مرکز کرسکتے ہیں کیونکہ آپ کسی اور بلاک کو بھی کرسکتے ہیں. یہ ایسا کرنے کے لئے سی ایس ایس ہے:
img.center {
ڈسپلے: بلاک؛
مارجن بائیں: آٹو؛
مارجن - دائیں: آٹو؛
}
اور یہاں ایچ ٹی ایم ایل یہ ہے کہ جس تصویر پر ہم مرکوز کرنا چاہتے ہیں کے لئے:
آپ آن لائن سی ایس ایس (ذیل میں ملاحظہ کریں) کا استعمال کرتے ہوئے اشیاء بھی مرکز کرسکتے ہیں، لیکن اس نقطہ نظر کی سفارش نہیں کی جاسکتی ہے کیونکہ یہ آپ کے HTML مارک اپ میں بصری شیلیوں کو شامل کرتا ہے. یاد رکھو، ہم سٹائل اور ساخت کو الگ کرنا چاہتے ہیں، لہذا سی ایس ایس کے شیلیوں کو اپنے ایچ ٹی ایم ایل کوڈ میں شامل کرنے کے ساتھ توڑنے کے ساتھ توڑنے کے لۓ الگ الگ اور اس طرح، جب بھی ممکن ہو تو اس سے بچنا چاہئے.
سی ایس ایس کے ساتھ عمودی طور پر سینٹرنگ عناصر
عمودی مرکز عمودی طور پر ہمیشہ ویب ڈیزائن میں چیلنج کر رہا ہے، لیکن سی ایس ایس 3 میں سی ایس ایس لچکدار باکس لے آؤٹ ماڈیول کی رہائی کے ساتھ، اب ایسا کرنے کا ایک طریقہ ہے.
عمودی سیدھ مندرجہ ذیل احاطہ افقی قطار کے ساتھ کام کرتا ہے. سی ایس ایس کی جائیداد عمودی طور پر سیدھا قیمت کے ساتھ ہے.
.کھیلنٹ {
عمودی سیدھ: درمیانی؛
}
اس نقطہ نظر کے نچلے حصے میں یہ ہے کہ تمام براؤزرز سی ایس ایس FlexBox کی حمایت نہیں کرتے ہیں، اگرچہ اس نئے سی ایس ایس ترتیب کے طریقہ کار کے ارد گرد زیادہ سے زیادہ آ رہے ہیں! اصل میں، آج جدید جدید براؤزر اس CSS سٹائل کی حمایت کرتے ہیں. اس کا مطلب یہ ہے کہ آپ صرف Flexbox کے ساتھ صرف خدشات سے زیادہ پرانے براؤزر کا ورژن ہوں گے.
اگر آپ پرانے براؤزرز کے ساتھ معاملات ہیں تو، W3C کی تجویز ہے کہ آپ مندرجہ ذیل طریقہ کار کا استعمال کرتے ہوئے ایک کنٹینر میں عمودی طور پر عمودی متن لکھتے ہیں:
- عناصر کو ایک ایسے عنصر کے اندر مرکوز رکھنا، جیسے ڈی.
- مشتمل عنصر پر کم از کم اونچائی مقرر کریں.
- میزائل سیل کے طور پر اس عنصر کا اعلان کریں.
- عمودی سیدھ کو "درمیانی" میں مقرر کریں.
مثال کے طور پر، یہاں سی ایس ایس ہے:
.کھیلنٹ {
کم از کم: 12em؛
ڈسپلے: میز سیل؛
عمودی سیدھ: درمیانی؛
}
اور یہاں ایچ ٹی ایم ایل ہے:
یہ متن باکس میں عمودی طور پر مرکوز ہے.
عمودی سینٹرنگ اور انٹرنیٹ ایکسپلورر کے پرانے ورژن
انٹرنیٹ ایکسپلورر (آئی ای) کو مرکز پر مجبور کرنے کے لۓ کچھ طریقے ہیں اور پھر شرطی تبصرے استعمال کریں تاکہ صرف IE شیلیوں کو دیکھ لیں، لیکن وہ تھوڑا verbose اور بدسورت ہیں. اچھی خبر یہ ہے کہ مائیکروسافٹ کے حالیہ ورژن کے لئے حمایت چھوڑنے کے مائیکرو مائیکروسافٹ کے ساتھ، ان غیر فعال براؤزر کو جلد ہی ان کے راستے پر جانا چاہئے، ویب ڈیزائنرز کے لئے جدید ترتیب کے نقطۂ نظروں کو استعمال کرنے کے لئے آسان بنانے کے لئے سی ایس ایس FlexBox جیسے سب سی ایس ایس ترتیب، تمام ویب ڈیزائنرز کے لئے صرف آسان نہیں، زیادہ آسان ہے.