طراحی سایت ساناتک
سه شنبه 04 مهر 1396
0
جابه جایی تگ ها با absolute

شاید بهترین و ساده‌ترین روش برای جابه‌جایی موارد موجود در سایت به وسیله CSS استفاده از جابه‌جاییِ Absolute باشد. با استفاده از این روش ما مختصات را از بالا و چپ به CSS می‌دهیم. تصور کنید درون یک ویترین ساعت‌فروشی می‌خواهید یکی از ساعت‌هایی را که در نظر دارید به صاحب مغازه نشان‌ دهید تا آن‌ را برایتان بیاورد؛ "ردیف پنجم و ستون سوم". به احتمال زیاد چنین چیزی به مغازه‌دار می‌گویید. ما نیز به روش Absolute به این‌گونه آدرس‌دهی می‌کنیم.

در مثال پایین ما تگِ div مورد نظر خود را 200 پیکسل از بالا و 200 پیکسل از سمت چپ جابه‌جا می‌کنیم:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Absolute Positioning</title>

<meta charset="utf-8"/>

<style type="text/css">

#redblock {

position: absolute;

top: 200px;

left: 200px;

color: white;

background-color: red;

width: 90px;

height: 90px;

padding: 5px;

}

</style>

</head>

<body>

<h1>Absolute Positioning</h1>

<div id="redblock">This is the red block.</div>

<p>The red block is positioned 200 pixels from the top and 200

pixels from the left.</p>

</body>

</html>

در عکس 4.26 می‌توانید نتیجه کار را مشاهده کنید.

جا به جایی با absolute

عکس 4.26: نمونه‌ای از جابه‌جاییِ Absolute

جابه‌جایی با خصوصیت absolute برای position

حالا زمان آن رسیده که با استفاده از مختصات مورد نظر از بالا و سمت چپ تگ‌هایی که در نظر داریم آن‌ها را جابه‌جا کنیم. ابتدا باید تعدادی از style-هایی را که در نظر گرفتیم حذف کنیم.

  1. فایل style1.css را باز کرده، لایه‌ها و حاشیه‌های افزوده شده درون تگ body را حذف کنید.
  2. در این قسمت مقادیر لایه(padding) و مرز(margin) را صفر کنید.

تگ body شما با تغییرات گفته شده باید به این صورت شده باشد:

body {

background-color: #e2edff;

font-family: Verdana, Helvetica, Arial, sans-serif;

line-height: 125%;

padding: 0;

margin: 0;

}

صفر همیشه صفر است

تفاوت بین مقدار صفر در واحد متر، فوت و ... چیست؟ در حقیقت صفر، صفر است، فارغ از آنکه واحد اندازه گیری چه باشد.

این اصل در CSS بالا به خوبی دیده می شود. زمانی که مقدار صفر را برای یک بخش در نظر می گیریم دیگر نیازی به مشخص کردن واحد اندازه گیری نیست.

مرورگر خود را از نو بارگذاری کرده و تغییرات را همان گونه که در عکس 4.27 آورده شده است مشاهده نمایید.

padding و margin حذف شده

عکس 4.27: لایه و حاشیه تعریف شده از body حذف شد

عنوان صفحه ما—BubbleUnder.com(h1) و About Us(h2)—توسط مرزهایی که به صورت پیش فرض توسط مرورگر قرار گرفته اند محاصره شده اند. بهتر است آن ها را حذف کنیم. سعی در این داریم که تمامی تگ های موجود را تا جایی که ممکن است بدون هیچ واسطه گرافیکی به اطراف مرورگر نزدیک کنیم تا بتوانیم برای جابه جایی، اندازه های بهتر و دقیق تری به کار بدهیم، علاوه بر این مطمئن خواهیم شد که درون انواع مرورگرها کار به صورت تقریبا یکسانی نمایش داده خواهد شد.

  •  درون style1.css کد مربوط به تگِ h1 را پیدا کنید.
  •  مرز را به صفر تغییر اندازه دهید.

h1 {

font-size: x-large;

background-color: navy;

color: white;

padding-top: 2em;

padding-bottom: .2em;

padding-left: .4em;

margin: 0;

}

  • محل قرارگیری #tagline p را یافته و مرز در نظر گرفته شده برای آن را نیز صفر کنید.

#tagline p {

font-style: italic;

font-family: Georgia, Times, serif;

background-color: #bed8f3;

border-top: 3px solid #7da5d8;

border-bottom: 3px solid #7da5d8;

padding-top: .2em;

padding-bottom: .2em;

padding-left: .8em;

margin: 0;

}

  •  صفحه را از نو بارگذاری کرده و تغییرات را مشاهده کنید. فضاهای خالیِ بالا و پایین عنوان ما باید حذف شده باشند. در عکس 4.28 نتیجه کار را مشاهده کنید.

حذف فضای اطراف تگ عنوان

 

عکس 4.28: از بین بردن فضای اطراف عنوان‌ها

 

حالا نفس خود را در سینه حبس کنید از آنجایی که کار قرار است به شدت زشت و غیر قابل تحمل گردد! اما اعتماد کنید، از آنجایی که راه بهبود وضعیت را به شما خواهیم گفت. در ضمن، در رابطه با گذاشتن حاشیه های قرمزرنگ نیز بعدها تشکر خواهید کرد.

1. کدِ زیر را به انتهای فایل CSS اضافه کنید:

#navigation, #bodycontent, #header {

position: absolute;

}

 

2. فایل را ذخیره کرده و مرورگر را رِفرِش کنید.

به نظر می رسد که سایت را گرفته، از ارتفاع زیاد به پایین پرتاب کرده ایم. نگران نباشید، طبیعی است! در بخش بعد به شما نشان خواهیم داد که این کار چگونه در طراحی یک صفحه وب قابل قبول به ما کمک می گند.

تعداد بازدید: 100
مطالب دیگر آموزش طراحی سایت
زیرنویس عکس در htmlتغییرات فرمت عکس به وسیله CSSآرشیو تصاویر در سایتافزودن گالری تصاویر به سایتفرمت های مختلف تصاویر
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید