آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۲۰ آذر ۱۳۹۱

فهرست محتوای این مقاله

خاصیت Float

 از این خاصیت برای شناور کردن عناصر و قرار دادن آن‌ها در کنار یکدیگر استفاده می‌شود و یکی از سه مقدار را می‌پذیرد :

  • None : مقدار پیشفرض (هیچ)
  • Left : عنصری که این خاصیت برای آن تخصیص یابد در سمت چپ صفحه و یا در سمت چپ عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.
  • Right : عنصری که این خاصیت برای آن تخصیص یابد در سمت راست صفحه و یا در سمت راست عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.

خاصیت float برای ایجاد و تنظیم بخش navigation ( منوی سایت ) مناسب است

مثال : (ایجاد بخش منوی بالای سایت با استفاده از float )

کد html :

<h1> 7Learn.com </h1>
<ul class="navi">
<li> <a href="#"> Home Page </a> </li>
<li> <a href="#"> Tutorials </a> </li>
<li> <a href="#"> About Us </a> </li>
</ul>

و کد Css زیر :

H1 {
Float: left;
Margin-top: 0;
}

.navi {
Float: right;
Margin: 0;
List-style: none;
}

.navi li {
Float: left;
}

.navi a {
Display: block;
Margin-left: 15px;
Padding: 15px;
Border: 1px solid #ccc;
Color: #233;
Text-decoration: none;
}

.navi a:focus , .navi a:hover {
Background: #aaa;
Color: #fff;
}

نتیجه در مرورگر :

خاصیت Clear

خاصیت clear وابسته به خاصیت float بوده و برای کنترل خاصیت float به کار می‌رود. و یکی از چهار مقدار زیر را می‌گیرد:

  • مقدار پیشفرض : none
  • Left : تاثیر خاصیت float:left را از بین می‌برد؛ یعنی باعث می‌شود که تاثیر left floated element (عنصری که خاصیت float left به آن دادیم) بر روی عناصر دیگر از بین برود.
  • Right : تاثیر خاصیت float: right را از بین می‌برد.
  • Both : تاثیر هر دو خاصیت float:left و float:right را بین می‌برد.

یک توضیح ساده برای خاصیت clear این است که این خاصیت برای cancel کردن تاثیر یک یا تعداد بیشتری از عناصر floated بر روی دیگر عناصراستفاده می‌شود. تاثیر یک عنصر floated بر روی دیگر عناصر این است که عناصر همجوار این عنصر به صورت شناور در کنار این عنصر قرار خواهند گرفت. به منظور از بین بردن تاثیر عنصر floated بر روی عناصر همجواراز خاصیت clear استفاده می‌کنند.

اگر خاصیت clear برای عنصری تعریف شود این عنصر در کنار عنصر floated شناور نخواهد شد.

مثال :

<h1> 7Learn.com </h1>
<ul class="navi">
<li> <a href="#"> Home Page </a> </li>
<li> <a href="#"> Tutorials </a> </li>
<li> <a href="#"> About Us </a> </li>
</ul>
<h2> Javascript and Web Design Tutorials </h2>

و کد Css زیر :

H1 {
Float: left;
Margin-top: 0;
}

.navi {
Float: right;
Margin: 0;
List-style: none;
}

.navi li {
Float: left;
}

.navi a {
Display: block;
Margin-left: 15px;
Padding: 15px;
Border: 1px solid #ccc;
Color: #233;
Text-decoration: none;
}

.navi a:focus , .navi a:hover {
Background: #aaa;
Color: #fff;
}

H2 {
Clear: both;
}

نتیجه در مرورگر :

اگر در مثال فوق از خاصیت clear استفاده نکنیم، صفحه به هم ریخته خواهد شد. همانند شکل زیر:

خصوصیت Vertical Align

این خاصیت به منظور تراز عمودی عناصر inline مثل <a> , <img> , <span> و ... استفاده می‌شود...

خب اول باید فرق عناصر inline  و عناصر block را بدانید تا تعریف این خاصیت قابل فهم شود.

  • عناصر block : عناصری هستند که قبل و بعد از آنهایک خط خالی وجود دارد؛ مانند <p> , <div> , <hn> و ... در HTML
  • عناصر inline (خطی) : عناصر خطی عناصری هستند که قبل و بعد از انها خط خالی وجود ندارد؛ مانند <a> ,<img> <span>  و... در HTML

و همان طور که گفتیم خاصیت vertical align برای تراز عناصر inline  استفاده می‌شود؛ این خاصیت یکی از سه مقدار عددی، درصدی و کلمات کلیدی را به عنوان مقدار می‌پذیرد.

کلمات کلیدی:

  • Baseline : این مقدار خطی است فرضی که هم تراز با قسمت پایینی حروف یک کلمه یا جمله می‌باشد. مثلا خط فرضی که کلمه 7Learn رو آن می‌نشیند.
  • Middle : تراز با میانه ی خط
  • Sub : تراز بالای خط مثل اعداد توان در ریاضی؛ این مقدار معادل تگ <sub> در HTML است.
  • Super : تراز با پایین خط و مثل اعداد اندیس در ریاضی ؛ این مقدار معادل تگ <sup> در HTML است.
  • Text-top : متن را با بالای بلندترین حروف اطراف تراز می‌کند.
  • Text-bottom : متن را با کوتاه‌ترین یا پایین‌ترین حروف تراز می‌کند، برای مثال g یا y زیر خط اصلی (baseline) قرار می‌گیرند و متن با پایین‌ترین قسمت این حروف تراز می‌شود.
  • Top : قسمت بالای عنصر را بلند‌ترین عنصر موجود در خط تراز می‌کند.
  • Bottom : قسمت پایین عنصر را با کوتاه‌ترین عنصر موجود در خط تراز می‌کند.

استفاده از مقادیر درصدی و عددی بستگی به خاصیت line-height تعریف شده برای عنصر مورد نظر دارد.

مثال : استفاده از vertical-align: 50% متن را در وسط خط تراز می‌کند.

مثال :

P {
Line-height: 10px;
Vertical-align: 5px;
}

در مثال فوق line-height برابر 10 پیکسل و از آنجاییکه vertical-align برابر 5 پیکسل و نصف مقدار line-height می‌باشد، متن در وسط خط تراز می‌شود.

خاصیت vertical-align به طور خاص برای تراز بندی تصاویر مفید است.

مثال :

کد html :

<h1>
<span class="top"> Top </span>
<span class="middle"> Middle </span> 7Learn
<span class="bottom"> bottom </span> 7Learn
</h1>

و کد css :

H1 span { font-size: 10px;}
.top {vertical-align: top;}
.bottom {vertical-align: bottom;}
.middle {vertical-align: middle;}

نتیجه در مرورگر :

بسیار خب تا اینجا با شناور ساختن عناصر و طریقه از بین بردن شناور بودن عناصر بعد از آن ها، و تراز عمودی آشنا شدیم، در فصل بعدی به کار با لیست‌های ul و ol و عناصر آن‌ها یعنی تگ li می‌پردازیم.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

حبیب

ببخشید یه سوال دیگه برای اینکه مثلا یه دیو ساختم بعدی زیرش بیاد ونره آخر صفحه چه کار باید کرد

سجاد دریس

سلام.
سوالتون رو واضح تر بگین.

saeidsh

سلام ببخشید کد css زیر در IE6 کار نمی کند، آیا کد جایگزینی هست؟
position: fixed

محمدسینا معراجیان

سوالتون رو توی انجمن مطح کنید اما اینترنت اکسپلورر 6 دیگه اصلا مهم نیستا تو طراحی وب!

saeidsh

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

لقمان آوند

سلام
اگر موس رو روی کد ببرید در گوشه ی بالا سمت راست اون گزینه هایی ظاهر میشه که توی اونها یکی برای کپی کردن کد هست و یکی برای دیدن کد بدون شماره ها . از اونها می تونید استفاده کنید .

sadeghlinux

با سلام

یه پیام گذاشته بودم که جوابمو ندادین

نمیشه یه قالب وبلاگ رو بردارین (مثلا میهن بلاگ یا …) و متن قالب رو توضیح بدین ؟ اگه اینکارو بکنین واقعا عالی میشه

لقمان آوند

در آینده اگر وقت شد سعی می کنیم اینکارو انجام بدیم.

نیما مهرپویا

نمیدونم چرا کدهای انگلیسی توی نظرات پیدا نیست.

لینک دانلود عکسشو اینجا گذاشتم.

http://8pic.ir/images/4pz9jpqovu1jbmotu3vj.jpg

لقمان آوند

از دکمه قرار دادن کد در بالای باکس نوشتن نظر استفاده کنید .

نیما مهرپویا

با سلام. بنده چند روزه سوالمو توی انجمن پرسیدم و کسی جوابی نداد واز اونجا که شدیدا به پاسخ اون احتیاج داشتم این شد که سوالو اینجا پرسیدم. امیدوارم آقا لقمان منو ببخشن.
برای حذف وبلاگ از سرچ گوگول میبایست این کد را در بین دو تگ head قرار داد ولی متاسفانه در هر سایتی این کدها با یک تغییر کوچیک نوشته شده. خواستم ببینید کدومشون درست ترن.

لقمان آوند

سلام
از دومی استفاده کنید .
عذر می خوام اگه دیر جواب دادیم . این چند روزه من نبودم .

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.