شناور ساختن عناصر و تراز عمودی

 

خاصیت Float

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

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

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

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

کد html :

1 <h1> 7Learn.com </h1>
2 <ul class="navi">
3 <li> <a href="#"> Home Page </a> </li>
4 <li> <a href="#"> Tutorials </a> </li>
5 <li> <a href="#"> About Us </a> </li>
6 </ul>

و کد Css زیر :

1 H1 {
2 Float: left;
3 Margin-top: 0;
4 }
5  
6 .navi {
7 Float: right;
8 Margin: 0;
9 List-style: none;
10 }
11  
12 .navi li {
13 Float: left;
14 }
15  
16 .navi a {
17 Display: block;
18 Margin-left: 15px;
19 Padding: 15px;
20 Border: 1px solid #ccc;
21 Color: #233;
22 Text-decoration: none;
23 }
24  
25 .navi a:focus , .navi a:hover {
26 Background: #aaa;
27 Color: #fff;
28 }

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

navigation <a  style=آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی" title="navigation" width="528" height="248" />

خاصیت 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 شناور نخواهد شد.

مثال :

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

و کد Css زیر :

1 H1 {
2 Float: left;
3 Margin-top: 0;
4 }
5  
6 .navi {
7 Float: right;
8 Margin: 0;
9 List-style: none;
10 }
11  
12 .navi li {
13 Float: left;
14 }
15  
16 .navi a {
17 Display: block;
18 Margin-left: 15px;
19 Padding: 15px;
20 Border: 1px solid #ccc;
21 Color: #233;
22 Text-decoration: none;
23 }
24  
25 .navi a:focus , .navi a:hover {
26 Background: #aaa;
27 Color: #fff;
28 }
29  
30 H2 {
31 Clear: both;
32 }

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

float with clear <a  style=آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی" title="float-with-clear" width="647" height="270" />

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

float no clear <a  style=آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی" title="float-no-clear" width="624" height="270" />

خصوصیت 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% متن را در وسط خط تراز می کند.

مثال :

1 P {
2 Line-height: 10px;
3 Vertical-align: 5px;
4 }

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

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

مثال :

کد html :

1 <h1>
2     <span class="top"> Top </span>
3     <span class="middle"> Middle </span> 7Learn
4     <span class="bottom"> bottom </span> 7Learn
5 </h1>

و کد css :

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

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

vertical align <a  style=آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی" title="vertical-align" width="430" height="201" />

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

منبع : 7learn.com

ارسال نظر