“ফ্রী বাংলা টিউটোরিয়াল” এর পাঠক বন্ধুরা
নিশ্চয়ই আপনার সাইটের মূল্যবান সব বাংলা ভিডিও টিউটোরিয়াল ও আর্টিকেল
পড়ে অনেক উপকৃত হচ্ছেন। আজ আমরা CSS classification এর বারংবার ব্যবহার
হয় এমন একটি প্রপার্টি float নিয়ে আলোচনা করি। এর মান এটিকে নির্দিষ্ট
করে যে একটি উপাদান আর একটি উপাদানের কোথায় অবস্থান নেবে। এর মান বাম, ডান
কিংবা কোনটি নয় হতে পারে। নিচের কোডটি দেখিঃ
1
2
3
4
5
6
img
{
float:right;
Width:300px;
height:200px;
}
উপাদানটি parent উপাদানের ডানে অবস্থান নেবে। একটি ওয়েব
সাইটের dropdown menu তৈরিতে float property এর ব্যবহার দেখা যায় সবখানে।
প্রথম স্তরের লিস্ট উপাদানগুলো যাতে পাশাপাশি বাম হতে ধীরে ধীরে ডান দিকে
যায় সেই কাজটি করতে float এর মান বাম বা left করা হয়। নিচে একটি
paragraph এর ডান পাশে একটি ছবি সেট করবোঃ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<body>
<img src=”sample.jpg”alt=”no image found”/>
<p>
Sample text here.Sample text here.Sample text here.
</p>
</body>
যার ফলে sample.jpg ইমেজটি paragraph টির ডানে অবস্থান নেবে। আর
vertical-alignment property টি একটি উপাদান উলম্ভ ভাবে কোন দিকে যাবে তা
নির্ধারণ করা হয়। যেমন নিচের কোডে ছবিটিকে নিচের দিকে alignment করা
হয়েছে ।
1
2
3
4
5
6
img
{
vertical-align:bottom;
height:345px;
width:400px;
}
vertical-alignment এর মান baseline মানে প্যারেন্ট উপাদানের নিচের ভিত্তিক
সারিতে অবস্থান নেবে। তাছাড়াও middle, top, text-top, sub ও super
ইত্যাদি মান হতে পারে। যাহোক একটি sample home page তৈরির কোড নিচে দেওয়া
হলঃ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
</head>
<body>
<div>
<div>
<h1>Atique IT</h1></div>
<div>
<p>Atique IT brings the quickest solutions foryou.No matter where you are inthe world,we are committed torespond within maximum72hours andbring reliable solution foryou andyour problem.</p></div>
<div>
<h2>Welcome!</h2>
<p>Atique IT isaleading website development company inBangladesh.Already it has earned vast popularity inCorporate Web Solutions.Our goal istoprovide the best innovative andunique creative solutions toour valued customers.We mainly focus on web applications andmanagement website according tomeet our clients criteria.</p>
<div>Copyright|www.atique-it.com|2012</div>
</div>
</body>
</html>
আপনারা বিভিন্ন মান নিয়ে নিজে নিজে চেষ্টা করুন আর বাংলা ভিডিও টিউটোরিয়াল দেখে নিন। ধন্যবাদ পাঠক বন্ধুরা।
একটি মন্তব্য পোস্ট করুন Blogger Facebook
fuck
ass
suck
dick