ইমেজ গ্যালারিতে ছোট ইমেজের বর্ডার এবং মার্জিন
ইমেজ গ্যালারিতে ছোট ইমেজের চারপাশে সাধারণত সরু মার্জিন ব্যবহার করা হয় এবং ইমেজ সমূহকে সুন্দরভাবে সঠিক স্থানে স্থাপন করার জন্য মার্জিন ব্যবহার করা হয়।যেহেতু ইমেজ গ্যালারির container আইডি সিলেক্টর যুক্ত div এ padding:7px 2px 7px 7px; ব্যবহার করা হয়েছিলো সুতরাং ছোট ইমেজ গুলোকে সঠিক স্থানে নির্দিষ্ট দূরত্বে রাখার জন্য top এবং left মার্জিন প্রয়োজন নেই কিন্তু ইমেজের দুটি লাইনের মধ্যে দূরত্ব রাখার জন্য 5px এবং পাশাপাশি দুটি ইমেজের মাঝে দূরত্ব রাখার জন্য 5px মার্জিন প্রয়োজন। এজন্য margin: 0 5px 5px 0; স্ট্যাইল শীটে যুক্ত করা হয়েছে।border: 1px solid #f00; এর মাধ্যমে প্রতিটি ছোট ইমেজের চারদিকে 1px এর লাল রঙের বর্ডার তৈরি করা হয়েছে। বর্ডার এবং মার্জিনের জন্য স্ট্যাইল শীটে যুক্ত করতে হয়েছে .galpic img{border: 1px solid #f00; margin: 0 5px 5px 0;}।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Gallery</title>
<style>
#container{
background:#999;
width:345px;
height:425px;
padding:7px 2px 7px 7px;
border:1px #000 solid;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
border: 1px solid #f00;
margin: 0 5px 5px 0;}
</style>
</head>
<body>
<div id="container">
<a class="galpic"><img src="1.jpg" width="163px" height="80px" /><span><img src="1.jpg" width="300px" height="185px" /><br /><i>
text </i></span></a>
<a class="galpic"><img src="2.jpg" width="163px" height="80px" /><span><img src="2.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<br />
<a class="galpic"><img src="3.jpg" width="163px" height="80px" /><span><img src="3.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<a class="galpic"><img src="4.jpg" width="163px" height="80px" /><span><img src="4.jpg" width="300x" height="185px" /><br />
<i>text</i></span></a>
<br />
<div id="screen"><h1>Gallery<br />Screen</h1></div>
</div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত