تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


امروزه طراحی قالب وب (سایت، وبلاگ و...) بدون سر و کار داشتن با استایل نویسی CSS امری تقریبا غیر قابل تصور است، از این گذشته حتی آنهایی که در این باره تجربه اندکی دارند نیز به خوبی واقف هستند که صرف آشنایی با خاصیت ها و کارکردهای عادی کدهای CSS، جوابگوی تمام نیازها و ایده های طراح قالب نخواهد بود، از این رو همیشه مواردی پیش می آید که پا را از قواعد ساده CSS فراتر گذاشته و با تکنیک های ویژه آن کار کنیم، به هر صورت با ذکر این مقدمه در این آموزش می خواهیم یک تکنیک جالب در طراحی وب را با هم مرور کنیم و آن آشنایی با نحوه به اصطلاح چسباندن فوتر قالب به پائین صفحه با CSS است.
منظور از چسباندن فوتر به انتهای قالب
قبل از اینکه وارد مباحث کدنویسی و نوشتن استایل CSS شویم، بد نیست یادآوری کنیم که منظور از این تکنیک چیست؟
به طور خلاصه و در شرایط عادی، هنگامی که ارتفاع قالبمان از ارتفاع صفحه نمایش کوچکتر است، مرورگر به صورت پیش فرض قالب (و فوتر آن را) به بالاترین حد ممکن هدایت کرده و از انتهای صفحه نمایش فاصله می گیرد، این موضوع در حالتی که بخواهید فوتر همواره به پائین صفحه چسبیده باشد مشکل زا خواهد بود.
کدنویسی HTML و CSS
برای استفاده از این تکنیک در هنگام طراحی قالب، کافی است مراحل زیر را دنبال کنید.
ابتدا طرح کلی قالبمان باید از دو بلاک div تشکیل شده باشد، یک بلاک به عنوان قسمت اصلی و یک بلاک به عنوان فوتر قالب، به مثال زیر توجه کنید.


<div class="wrapper">
قسمت اصلی قالب
</div>
<div class="footer">
قسمت فوتر قالب
</div>

سپس در استایل CSS قالبمان موارد زیر را تعریف می کنیم.


<style type="text/css">
html, body{
    height:100%;
}
.wrapper{
    min-height:100%;
    height:auto;
    margin:0px auto -50px auto;    
}
.footer{
    height:50px;
}
</style>

همان طور که ملاحظه می کنید جهت کشیده شدن ارتفاع قالب به اندازه ارتفاع صفحه نمایش، برای تگ html و body مقادیر %100 (خاصیت height) در نظر می گیریم، برای دو بلاک wrapper و footer نیز مطابق نمونه کدها را تعریف می کنیم، نکته قابل توجه در اینجا اندازه margin است که در بلاک wrapper (برای تعیین فاصله انتهای بلاک از عناصر مجاور)، برابر با ارتفاع بلاک footer در نظر گرفته می شود تا فوتر ما کاملا به انتهای صفحه بچسبد، البته در صورت لزوم می توان این مقادیر را تغییر داد و متناسب با طرح دلخواه خود تنظیم نمود.
در زیر مثالی از تکنیک فوق را بررسی می کنیم.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>سفارش.نت | تکنیک هدایت فوتر به پائین صفحه</title>
<!-- http://sefaresh.net -->
<style type="text/css">
html, body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    margin:0px;
    padding:0px;
    height:100%;
}
.wrapper{
    min-height:100%;
    height:auto;
    margin:0px auto -50px auto;
    background-color:#F0F0F0;    
}
.footer{
    width:100%;
    height:50px;
    background-color:#369;
    color:#FFF;
}
hr{
    border:0px;
    border-bottom:1px dashed #CCC;
}
</style>
</head>
<body>
<div class="wrapper">
قسمت اصلی قالب
<hr>
</div>
<div class="footer">
قسمت فوتر قالب
<hr>
نکته: این روش با تمام مرورگرهای استاندارد سازگار است (شامل مرورگر قدیمی و غیر استاندارد IE 6 نیز می شود).
</div>
</body>
</html>


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین