Awesome! টিউনস
সকল Awesome! টিউনস

হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্স [পর্ব-০৪] :: সিএসএস দিয়ে বেসিক স্টাইলিং ও হেডার স্টাইলিং

7,953 দেখা 47 টিউমেন্টস জোসস
টিউন বিভাগ ওয়েব ডিজাইন
প্রকাশিত
Level 0

101 টিউনস 1258 টিউমেন্টস 20 ফলোয়ার

PSD2HTML পূর্ণাঙ্গ চেইন কোর্স

সবাইকে আবারো স্বাগতম জানাচ্ছি হাতে ধরে PSD2HTML পুর্ণাঙ্গ চেইন কোর্স এর ৪র্থ পর্বে।

গত কোর্সে আমরা যা শিখেছি

গত পর্বে আমরা পিএসডি টেমপ্লেট থেকে এইচটিএমএল মার্কাপ তৈরি করা শিখেছি। পিএসডি ফাইলটির সপুর্ন এইচটিএমএল মার্কাপ তৈরি করেছি।

:arrow: গত কোর্সের টিউন দেখুন এখানেঃ https://www.techtunes.io/web-design/tune-id/256741

:arrow: গত কোর্সের টিউটোরিয়াল দেখুন এখানেঃ https://www.youtube.com/watch?v=39tDfHnZZPs

আজকের কোর্স এ যা শিখবেন

:arrow: সিএসএস রিসেট ও বেসিক সিএসএস স্টাইলিং

আমরা একটি সিএসএস রিসেট কোড ব্যবহার করে আমাদের পেজ টির সিএসএস রিসেট করবো। অর্থাৎ একটি এইচটিএমএল পেজ এ ব্রাউজার থেকে ডিফল্ট ভাবে কিছু স্টাইলিং দেয়া থাকে। আমরা সিএসএস রিসেট কোড টি ব্যবহার করে সেই ডিফল্ট সিএসএস টি ডিলিট করবো। এবং আমরা পেজ এর বেসিক স্টাইলিং করবো। যেমন পেজ টিকে ব্রাউজার এর মাঝখানে আনা, পেজ এর উইথ ঠিক করা ইত্যাদি।

:arrow: সিএসএস দিয়ে হেডার স্টাইল করা

এই অংশে আমরা আমাদের হেডার টিকে সিএসএস দিয়ে স্টাইল করবো। হেডার এর মধ্যে রয়েছে লোগো ও ড্রপডাউন মেনু। অর্থাৎ আমাদেরকে লোগো ও ড্রপডাউন মেনু টি তৈরি করতে হবে।

ভিডিও কোর্স

:arrow: Youtube Link: http://www.youtube.com/watch?v=Ii5yindf4GE

সিএসএস রিসেট ও বেসিক স্টাইলিং

সিএসএস রেসিট করতে আমরা একটি রেডিমেড কোড ব্যবহার করবো। গুগল এ css reset লিখে সার্চ করলে অনেক সিএসএস রিসেট কোড পাবেন। আমি Eric Meyer এর সিএসএস রিসেট কোড ব্যবহার করবো। এটি অনেক জনপ্রিয় এবং কাজের।

➡ Eric Meyer CSS reset: http://meyerweb.com/eric/tools/css/reset/

আমাদের প্রোজেক্ট ফোল্ডার এর ভিতরে css নামে একটি ফোল্ডার করে নিন। তার ভিতর reset.css নামে একটি ফাইল করুন এবং style.css নামে একটি ফাইল তৈরি করুন। এবার আমাদের index.html ফাইলটিতে একটি কোড যোগ করতে হবে। যাতে করে এইচটিএমএল ফাইলটি আমাদের এই দুটি সিএসএস ফাইলকে চিনতে পারে। index.html ফাইলটি ওপেন করে </head> এর আগে নিচের কোড টি লিখুন।


	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">

তাহলে আমাদের এইচটিএমএল পেজ এর <head> অংশের কোড টুকু দারাবে নিচের মতঃ


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
</head>

পেজ টিকে সেভ করে নিন।

reset.css ফাইলটি আপনার কোড এডিটর এ ওপেন করে নিচের কোড টি লিখে সেভ করুন।


/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

এবার index.html পেজ টি ব্রাউজার এ ওপেন করে দেখুন, সব ধরণের স্টাইল রিসেট হয়ে গেছে। পেজ টি নিচের মত দেখাবেঃ

সিএসএস দিয়ে হেডার স্টাইল করা

এখন আমাদের একটু ফটোশপ এ ফিরে যেতে হবে। ফটোশপ এর টিপস ও ট্রিক্স অংশে আমরা যা যা শিখেছিলাম এর কিছু জিনিস এখন আমাদের কাজে লাগবে। তাহলে চলুন প্রথমেই আমাদের সেই পিএসডি টেমপ্লেট টি ফটোশপ এ ওপেন করি...

পিএসডি টেমপ্লেট এ জুম করে হেডার অংশ টি দেখুনঃ

হেডারে আমাদের লোগোটিকে বাম পাশে নিতে হবে, ডান পাশে ড্রপডাউন মেনু টি তৈরি করতে হবে। এছারাও বডির কিছু বেসিক স্টাইলিং করতে হবে। তাহলে চলুন শুরু করা যাক?

প্রথমে আমরা বডির বেসিক স্টাইলিং দিয়ে শুরু করি। ফটোশপে আমরা টেক্সট টুল টি সিলেক্ট করে টেমপ্লেট থেকে কয়েকটি টেক্সট সিলেক্ট করে তার সাইজ দেখে নিবো।

এ থেকে বোঝা যাচ্ছে যে সাভাবিক ফন্ট এর সাইজ ১৩ পিক্সেল এবং ফন্ট ব্যবহার করা হয়েছে Arial । তাহলে চলুন আমরা সিএসএস এ সেটি ঠিক করে নেই?

css ফোল্ডার থেকে style.css ফাইল টি আপনার পছন্দের টেক্সট এডিটর এ ওপেন করুন। এবং নিচের কোড গুলো লিখা শুরু করুন।


/*-----------------------------
-----------Common--------------
-----------------------------*/

body {
	font-size:13px;
	font-family:arial;
	width:100%;
	overflow:hidden;
}

উপরের সিএসএস কোডটির সাহায্যে আমরা আমাদের পেজ এর উইথ ১০০% করেছি। ফন্ট এরিয়াল করেছি এবং ফন্ট এর সাইজ ১৩ পিক্সেল করেছি।

এবার ফটোশপ এ মারকিউ টুলের সাহায্যে আমাদের পেজ এর উইথ দেখে নেই।

উইথ ১০০০ পিক্সেল। তাহলে চলুন সিএসএস এ আমাদের উইথ টি ঠিক করে নেই? style.css এ নিচের কোড টূকু লিখে নিন।


.container {
	width:1000px;
	margin:0 auto;
}

বেশ! এবার আমরা ক্লিয়ার ফিক্স এর জন্য একটি ক্লাস সিএসএস এ যোগ করবো। নিচের কোডটি সিএসএস এ যুক্ত করে দিন।


/*-----------------------
        Clearfix
-----------------------*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

বাহ! এইতো! আমাদের বডির বেসিক স্টাইলিং শেষ 😀 এইবার চলুন আমরা লোগো এবং নেভিগেশন বারে ঝাপ দেই।

প্রথমে হেডারটিকে মেরামত করে নেই। হেডার এর ব্যাকগ্রাউন্ড উচ্চতা ইত্যাদি ঠিক করে নেই 🙂 নিচের সিএসএস টুকু style.css এ যোগ করে দিন।


/*-----------------------------
-----------Header--------------
-----------------------------*/
header {
	height:120px;
	background: #e8ebf1;
	border-bottom:1px solid rgba(0,0,0,.2);
}

চলুনতো দেখি এবার আমাদের পেজটিকে কেমন দেখাচ্ছে?

এবার লোগোটিকে মেরামত করতে হবে... চলুন কাজে নেমে যাই...


header .logo {
	float:left;
	background:url(../images/logo.png) no-repeat;
	width:370px;
	height:85px;
	margin-top:10px;
	cursor:pointer;
}
header .logo h1 {
	text-indent:99999px;
}

এবার পেজটিকে কেমন দেখাচ্ছে?

হুম দারুণ! লোগোটা ঠিকই আছে বলা যায়। এবার তাহলে নেভিগেশন এ হাত দেই। কি বলেন আপনি? চলুন তাহলে...


nav > ul {
	list-style:none;
}
nav > ul > li {
	float:left;
	margin:40px 5px;
	position:relative;
}
nav > ul > li a {
	display:block;
	color:#000;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	text-transform: uppercase;
	padding:15px;
}
nav > ul > li a:hover {
	border-top:5px solid #2aacc8;
	color:#2aacc8;
	background:#fff;
	padding-top:10px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

এখানে আমি নেভিগেশন মেনু টাকে ঠিক করেছি, এর উইথ হাইট ব্যাকগ্রাউন্ড ইত্যাদি ঠিক করা হয়েছে। হোভার ইফেক্ট এ আমি কিছু ট্রান্সিশন ইফেক্ট ব্যবহার করেছি।

চলুন দেখে নেয়া যাক পেজটিকে কেমন দেখাচ্ছে?

এবার ড্রপডাউন টা ঠিক করে নেইঃ


nav > ul > li:hover > a {
	border-top:5px solid #2aacc8;
	color:#2aacc8;
	background:#fff;
	padding-top:10px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
nav > ul > li:hover > ul {
	display:block;
	opacity:1;
	visibility: inherit;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
nav > ul > li > ul {
	list-style:none;
	background:#fff;
	width:190px;
	visibility: hidden;
	position:absolute;
	z-index:99999;
	margin:0;
	padding:5px;
	border-bottom:5px solid #50b9d0;
	opacity:0;
}
nav > ul > li ul li {
	display:block;
	float:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #dddddd;
}
nav > ul > li ul li a {
	margin:0;
	padding:15px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
nav > ul > li ul li a:hover {
	background:#e8ebf1;
	color:#50b9d0;
	border-top:none;
	margin:0;
	padding:15px;
}
nav > ul > li a span:after {
	content:"";
	display:inline-block;
	background:url(../images/arrow.png);
	height:5px;
	width:7px;
	line-height:13px;
}

সিএসএস দিয়ে যদি এর পুর্বে ড্রপডাউন মেনু তৈরি করে থাকেন তবে এটি বুঝতে তেমন সমস্যা হবার কথা নয়।

দেখে নেই এই মুহুর্তে আমাদের পেজটিকে কেমন দেখাচ্ছেঃ

বেশ সুন্দর দেখাচ্ছে আমাদের হেডার টিকে 😀 আজকের মত এখানেই আমাদের কাজ শেষ।

৩য় কোর্স থেকে কিছু প্রশ্নের উত্তর

➡ কিছু ইমেজ এইচটিএমএল আর কিছু ইমেজ সিএসএস এ ব্যবহার করা হয়েছে কেন?

=> টাইটেল এর ইমেজটি সিএসএস এ ব্যবহারের কারণ হচ্ছে এসইও সুবিধা। আর আরো কিছু ইমেজ সিএসএস এ ব্যবহার করা হয়েছে কারণ সেগুলো সিএসএস এ করতে সুবিধা আর ডিজাইনটি সুন্দর এবং প্রোফেশনাল হয়।

➡ স্লাইডারে এ কি আমার ইচ্ছে মত ইমেজ ব্যবহার করতে পারবো?

=> অবশ্যই পারবেন। তবে ইমেজ এর সাইজ এর ব্যাপারে খেয়াল রাখবেন।

➡ .container ক্লাস এর ট্যাগ একাধিক বার ব্যবহার করা হয়েছে কেন? এক বার ব্যবহার করলে হয়না?

=> আমাদের হেডার, স্লাইডার, কন্টেন্ট, ফুটার প্রতিটি অংশের ব্যাকগ্রাউন্ড ভিন্ন। ওই ট্যাগ গুলোতে আমরা ব্যাকগ্রাউন্ড দিয়েছি এবং .container ট্যাগ দিয়ে কন্টেন্ট গুলোকে পেজ এর মাঝে নিয়েছি।

৪র্থ কোর্সের উপসংহার

এই কোর্স এ আমি আমাদের এইচটিএমএল পেজটিকে সিএসএস দিয়ে স্টাইল করেছি। এই পর্বে আমরা শুধু হেডার অংশটি স্টাইল করেছি। হেডার অংশে লোগো, ড্রপডাউন নেভিগেশন বার স্টাইল করেছি সিএসএস দিয়ে। যারা সিএসএস এ একটু কাচা তাদের কিছুটা সমস্যা বা কঠিন মনে হয়ে পারে। তবে একটু প্র্যাক্টিস করলে এবং সিএসএস নিয়ে কিছু ঘাটাঘাটি করলে বিষয়গুলো পরিষ্কার হয়ে যাবেন আশা করি। নেভিগেশন বারে আমি কিছু সিএসএস ৩ ইফেক্ট ব্যবহার করেছি। এতে নেভিগেশন বার টি দেখতে আরো ভালো লাগছে। কিছুটা এনিমেশন দেয়ার চেষ্টা করেছি আমি।

আগামী কোর্সের জন্য হোম টাস্ক

হেডার অংশটি সিএসএস এর সাহায্যে নিজে নিজে স্টাইল করুন। এবং সম্পুর্ন প্রোজেক্ট এর ফোল্ডারটি জিপ করে নিচের ঠিকানায় সাবমিট করুন। এই হোমটাস্ক গুলোর মার্কিং হবে এবং মার্ক এর উপর ভিত্তি করে সার্টিফিকেট দেয়া হবে। তাই নিয়মিত হোমটাস্ক সাবমিট করতে ভুলবেন না।

:arrow: প্রোজেক্ট ফাইল জমা দেয়ার লিঙ্কঃ http://techtun.es/1iEFv5n

চুপ করে না থেকে প্রাসঙ্গিক প্রশ্ন করুন, করুন গঠনমূলক প্রশ্ন, তাহলেই শিখতে পারবেন

প্রশ্ন না করলে কখনোই শেখা যায় না। আজকে যেসব বিষয় টিউনে তুলে ধরা হয়েছে সেসব বিষয়ের উপর প্রাসঙ্গিক ও গঠনমূলক প্রশ্ন করুন। আমি সবার প্রশ্নের উত্তর দিবো ইনশাল্লাহ। যেকোনো বিষয়ে সামান্য খটকা লাগলে বা সমস্যা মনে হলে প্রশ্ন করুন। মনে করবেন না যে আপনার প্রশ্ন পড়ে অন্যরা হাসবে, বরংচ আপনার প্রশ্ন থেকে আপনার মত নতুন আরো দশ জন বিষয়টি শিখতে পারবে এবং বিষয়টি সম্পর্কে জানতে পারবে। খুটে খুটে সমস্যা বের করুন, প্রশ্ন করুন। যে জত বেশি প্রশ্ন করবে সে তত বেশি শিখতে পারবে এবং সফল হতে পারবে।

আগামী কোর্সে যা শিখবেন

আগামী পর্বে আমরা আমাদের এইচটিএমএল পেজটির কন্টেন্ট অংশটিকে স্টাইল করবো। কন্টেন্ট অংশে ইমেজ যোগ করা। তা সঠিক সাইজ এ পেজ এ ব্যবহার করা ইত্যাদি বিষয় গুলো আগামী পর্বে দেখানো হবে। অর্থাৎ আগামী পর্বও সিএসএস নিয়ে। সিএসএস দিয়ে পেজ এর আরেকটি অংশ স্টাইল করবো।

হাতে ধরে PSD2HTML পূর্ণাঙ্গ কোর্স এ আপনি ভর্তি হয়েছেন তো?

হাতে ধরে PSD2HTML পুর্নাঙ্গ চেইন কোর্স এ আপনি ভর্তি হয়েছেন তো? না হলে ভর্তি হয়ে যান বিশাল কমিউনিটির এই চেইন কোর্স এ এবং নিজেকে ঝালাই করে নিন PSD2HTML এ!

প্রায় ৩০০০ টিউজিটর ও টিউমেন্টর ভর্তি হয়েছেন বাংলাদেশের এই প্রথম ও সবচেয়ে বড় অনলাইন PSD2HTML পুর্নাঙ্গ কোর্স এ। আপনি বাদ থাকবেন কেন?

কোর্স এ ভর্তি হতে এই টিউনটি দেখুনঃ

টেকটিউনস এ চালু হচ্ছে!! “হাতে ধরে PSD2HTML পূর্ণাঙ্গ চেইন কোর্স”!! সম্পূর্ণ ফ্রি করুন PSD2HTML এর পূর্ণাঙ্গ কোর্স! সফল ও সঠিক ভাবে কোর্স সম্পন্নকারীরা পাবেন টেকটিউনস ভেরিফাইড সার্টিফিকেট!

কম্পিউটার লাভার () রাকিবুল হাসান।

:arrow: ইমেইলে পেয়ে যান আমার সকল টিউনের আপডেট! ক্লিক করুন এবং ইমেইল দিয়ে ভেরিফাই করুনঃ টেকটিউনস » কম্পিউটার লাভার

Level 0

আমি কম্পিউটার লাভার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 101 টি টিউন ও 1258 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 20 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

Also known as "Raiku Saiko". React.js & Javascript Developer. Former Wordpress Developer, Front-end Designer. Technology Addicted.

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

আপনাকে অনেক ধন্যবাদ এত কষ্ট করে এগুলো আমাদেরকে শিখানোর জন্য। আপনার জন্য অন্তর থেকে দোয়া করছি।

Level 0

আপনাকে অনেক ধন্যবাদ এত কষ্ট করে এগুলো আমাদেরকে শিখানোর জন্য। আপনার জন্য অন্তর থেকে দোয়া করছি।

Level New

Thank you, vai. Onek opekkhar obosan holo.

Level 0

ভাই আপনাকে অনেক ধন্যবাদ। দোয়া করি আল্লাহ যেন আপনাকে উভয়কালে কল্যান দান করেন।

Level 0

হ্যালো রাকিবুল ভাই, অনেকদিন অপেক্ষার পর ৪র্থ টিউনটি পেয়ে খুবই খুশি লাগছে। আজ থেকে আবার কাজ শুরু করতে হবে, ধন্যবাদ। সময়মত হোম টাস্ক জমা দিতে চেষ্টা করব। আবার ও টিউন এর জন্য ধন্যবাদ। চালিয়ে যান- আমরা সাথে আছি সবসময়।

Level 0

অপেক্ষায় ছিলাম ৪র্থ পর্বের, অপেক্ষার অবসান ঘটল @ ধন্যবাদ রাকিব ভাই

Level 0

রাকিবুল ভাই ধন্যবাদ এত সুন্দর টিউন এর জন্য তবে রেগে আছি এত দিন অপেক্ষা করানোর জন্য :p

    Level 0

    @rosesamiul: 😛 কিছু ব্যস্ততার কারণে দেরি হয়ে গেছে… ধন্যবাদ রাগ করার জন্য 😀

Level 3

রাকিব ভাই আপনাকে অনেক ধন্যবাদ। দোয়া করি আল্লাহ যেন আপনাকে উভয়কালে কল্যান দান করেন।

Level 0

ধন্যবাদ। থিমটা কি রেস্পন্সিভ হবে?

Level 0

অনেক ধন্যবাদ। আমি আমর টাস্ক করে জমা দিয়েছি।

Level 0

what is —<!doctype html>

    Level 7

    @tech_freak: হলো ব্রাউজার যাতে বুঝতে পারে আপনি html ল্যাংগুয়েজ ব্যবহার করছেন । আর margin:0 auto; ব্যবহার করা হয় কনটেন্ট কে সেন্টারিং করার জন্য । আর clearfix ব্যবহার করা হয় যাতে আপনার কনটেন্ট এর দুই পাশে অবঞ্চিত কিছু না আসে । আশা করি বুঝতে পারছেন ।

    আর রাকিবুল ভাইকে ধন্যবাদ জানাচ্ছি এতো সুন্দর একটা তথ্যবহুল টিউন উপহার দেওয়ার জন্য ।

      Level 0

      @সানিম মাহবীর ফাহাদ: ধন্যবাদ আপনাকে উনার সমস্যা গুলোর সমাধান দেয়ার জন্য 🙂

Level 0

margin:0 auto; এটা কি?

Level 0

sorry, ignore my previous questions

Level 0

can you explain “clearfix”?

Level 0

আমার কাজ জমা দিলাম।

Level 0

header.logo{background:url(..images/logo.png) no-repeat;}ai code ti ki thik ase boss?no-repeat likle to brows_e show kare na logo…background-repeat:no-repeat; likte hai alada kare..?

Level 0

HTML কি সিঁড়ির মত করেই লিখতে হয়?

Level 0

আমার কাজ জমা দিলাম।

Level 0

আমার webpage (index.html) Home এ কার্সর রাখলে Home এর উপর Highlight বর্ডার টি বেশি মোটা দেখায় এটা আপনার মত (মার্জিত) করব কিভাবে, please কিভাবে এটা solve করব জানাবেন।

    Level 0

    @orchid: border: 5px solid #color দেয়া আছে। দেখুন আপনার টা এমন আছে কিনা। 5px এর বেশি থাকলে কমিয়ে নিন। অথবা আমার সোর্স কোড ডাউনলোড করে দেখে নিন।

Level 0

কিভাবে techtunes ID বের করব? নাকি https://www.techtunes.io/orchid লিখলেই চলবে।

Level 0

আমার পূর্বের কাজগুলো কি পেয়েছেন? Pls জানাবেন এবং উপরের প্রশ্ন গুলোর উত্তর দিলে উপকৃত হব।

Level 0

Rakib vhai, clearfix ar content gula ki always fixed naki variable hobe. variable hole con subject ar upor depend kore.

    Level 0

    @iftyorco: এটা ফিক্সড থাকে। তবে এর আরো কিছু নিয়ম আছে। যার যেটা পছন্দ ব্যবহার করে। আপনি গুগল এ css clearfix লিখে সার্চ দিলেই পাবেন।

Level 0

Thank you vi

Level 0

At last, got it. Many many thanks to you Computer Lover vai. Very nice and interactive tutoril.

Level 0

fine thanks

Level 0

অনেকদিন পড় আবার আপনার টিউন পেয়ে খুশি হলাম।

Level 0

আমার কাজ জমা দিলাম।@কম্পিউটার লাভার: thanks

Level 0

ব্যস্ততার কারনে এতদিন ভাল করে শিখতে পারিনি। কাজটা কালকেই জমা করে দিব।
টিউটরিয়াল টা দেখলাম। মনে হচ্ছে টিউনটি করার সময় আপনি অসুস্থ ছিলেন। অসুস্থতার মাঝেও কষ্ট করে এত সুন্দর করে ৪র্থ পর্ব টিউন করার জন্য শুধু ধন্যবাদ দেওয়াটা কম হয়ে যাই, বরং এটাই কামনা করি তারাতারি সুস্থ হয়ে উঠুন এবং সুস্থ থাকুন।

Level 3

ব্যস্ততার কারণে…….

Level 0

কোথায় হারিয়ে গেলেন। এত অপেক্ষাতো আর ভাল লাগেনা।

Level 0

রাকিব ভাই,
আপনি হেডার এ বর্ডার বটম এর রং RGB কালার ব্যবহার করেছেন কেনো?