পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল – পর্ব ৪ (PSD to HTML/XHTML)

0
351

এবার সাইটের সবচেয়ে গুরত্বপূর্ন ডিভ টি নিয়ে কাজ শুরু হবে।container ডিভ।এই ডিভটির ভিতরে মুলত দুটি ডিভ থাকবে একটা content এবং অপরটি sidebar ডিভ।

psd to html পিএসডি থেকে এক্সএইচটিএমএল টিউটোরিয়াল – পর্ব ৪ (PSD to HTML/XHTML)

<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>

container ডিভের সিএসএস 

#container{
margin:0 auto;
overflow:hidden;
}

content ডিভে ব্যানার সহ এর নিচে যা আছে (পিএসডি ফাইলে) সব থাকবে আর sidebar ডিভে ডানদিকের ছবিগুলি সহ এর নিচে যা আছে।

content এবং sidebar ডিভদুটির সিএসএস

#content{
float:left;
width:662px;
margin-right:8px;
overflow:hidden;
}
#sidebar{
width:280px;
float:left;
padding:10px;
background:#fff;
overflow:hidden;
}

এখানে ডিভদুটিতে width দেয়ার সময় হিসেব করে দিয়েছি।ডিভদুটির width যোগ করলে যেন এদের কোন parent ডিভের width  এদের যোগকৃত width এর চেয়ে বেশি না হয় অথবা সমান হতে পারে।৬৬২+২৮০=৯৪২ এটা হচ্ছে ডিভদুটির width.এখন দেখুন এদের parent ডিভের width কত?এদের parent ডিভ হচ্ছে container আর এর কোন width দেয়া নেই অর্থ্যাৎ এখন এই container ডিভ তার যে parent ডিভ আছে তার width টাই তার নিজের width হবে।container এর parent ডিভ হচ্ছে main_wrapper এবং এর width ৯৭০ পিক্সেল।৯৭০-৯৪২=২৮ এখন এই ২৮ পিক্সেল গেল কোথায়?২০ পিক্সেল প্যাডিং এ আর ৮ পিক্সেল মার্জিন।

padding এর এটা একটা নিয়ম যে ডানে বামে (padding-right বা padding-left) যত padding দিবেন তা মুল width থেকে বিয়োগ করতে হবে।sidebar ডিভের padding:10; এর অর্থ হচ্ছে এর চারিদিকে padding আছে তাই মুল width ৩০০ থেকে ২০ বিয়োগ দিয়ে width:280px; করেছি।

এখন content ডিভের কাজ শুরু করা যাক,এখানে মুলত দুটি ডিভ থাকবে banner_holder এবং অপরটি text_holder.প্রথম ডিভে ব্যানার banner.jpg ছবিটি থাকবে আর পরের ডিভটিতে টেক্সটগুলি।content ডিভের ভিতরের ডিভদুটি

<div id="banner_holder"></div>
<div id="text_holder"></div>

ডিভদুটির সিএসএস 

#banner_holder{
float:left;
width:642px;
padding:10px;
background:#fff;
}
#text_holder{
float:left;
width:642px;
padding:10px;
background:#fff;
margin-top:10px;
overflow:hidden;
}

এখানে কোন নতুন কোড যোগ হয়নি তাই ব্যাখ্যা দিলামনা।শুধু margin-top:10px; আছে।মার্জিনের ব্যাপারে খেয়াল রাখতে হবে যে মার্জিন দিলে ডিভসহ সরে যায় আর প্যাডিং দিলে ডিভের height/width এর সাথে তা যোগ হয়।

banner_holder ডিভের ভিতর শুধু একটা ছবি থাকবে।

<div id="banner">
<img alt="" src="/images/banner.jpg"/>
</div>

banner_holder ডিভের সিএসএস

#banner{
width:640px;
height:265px;
}

এবার গুরত্বপূর্ন ডিভ text_holder এর কাজ হবে।এখানে মোট ৫টি ডিভ থাকবে,প্রথম ৪টি ডিভের একই স্টাইল তাই এখান থেকে শুধু একটি ডিভের কোডের ব্যাখ্যা দেব।আর এরপর ৫ম ডিভের ব্যাখ্যা থাকবে।text_holder ডিভের ভিতর ৫টি ডিভ

<div class="content_text remove"></div>
<div class="content_text"></div>
<div class="content_text"></div>
<div class="content_text"></div>
<div id="pagination"></div>

একটি উত্তর ত্যাগ