Tag: inherit

CSS : ใช้งาน Position กันอย่างไร
ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ

CSS : Position นั้นมีอะไรบ้าง
- static
- relative
- absolute
- fixed
- inherit
คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ
```
<div id="wrapper">
  <div id="div-1">div-1</div>
    <div id="div-2">
      <div id="div-a">div-a</div>
      <div id="div-b">div-b</div>
      <div id="div-c">div-c</div>
    </div>
  <div id="div-3">div-3</div>
</div>
```
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
}

#div-c {
  background: #99F;
}
```
ซึ่งจะแสดงผลดังรูป

จาก Code ที่เขียน เราจะได้เว็บดังรูป

Position : static

position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน
```
#div-a {
  background: #339;
  position: static;
}
```
ผลลัพธ์จากการตั้ง #div-a ด้วย position:static

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static

Position : relative

position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้
```
#div-a {
  background: #339;
  position: relative;
}
```
position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า
```
#div-2 {
  background: #C0C;
  position: relative;
  top: 30px;
  left: -20px
}

#div-a {
  background: #339;
}
```
#div-2 จะห่างจาก #div-1 ตามที่กำหนดไว้

จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels
```
#div-2 {
  background: #C0C;
  position: relative;
  bottom: 10px;
  right: 20px;
}
```
ตำแหน่งเปลี่ยนไปจากครั้งที่แล้ว หลังเราเปลี่ยนค่า

คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels

Position : absolute

position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย
```
#div-2 {
  background: #C0C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
ตอนนี้ #div-2 ไปอยู่ที่ตำแหน่งด้านบนสุด ด้านขวาสุดแล้ว

ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ
```
#div-2 {
  background: #C0C;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
จะเห็นว่า #div-b ไปอยู่ด้านบนขวา

ใช้ Position : relative คู่กับ Position : absolute

แล้วถ้าเราอยากให้ #div-b มาอยู่ในกรอบ #div-2 ก็ทำได้โดยการใส่ position : relative ให้ #div-2 เหมือนเป็นการกำหนดกรอบให้มัน
```
#div-2 {
  background: #C0C;
  position: relative;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
#div-b จะอยู่ด้านบนขวาสุดของ #div-2

Position : fixed

position : fixed นั้นทำหน้าที่คล้าย absolute เลย แต่มีแตกต่างกันที่ fixed นั้นจะใช้กับ relative เพื่อกำหนดกรอบของมันไม่ได้ และจะตรึงตัวเองอยู่ตรงนั้นเสมอ ดูตัวอย่างน่าจะเข้าใจง่ายกว่าครับ อย่างเช่น

Absolute
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
  height: 2000px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}

#div-c {
  background: #99F;
}
```
Position : absolute

เมื่อทำการ scroll ลงมา #div-b จะไม่ได้ขยับตามลงมา และหายไป

#div-b หายไปจากการ scroll ลงมา

Fixed

แต่ถ้าเป็น position : fixed แล้ว มันจะตรึงตัวเองอยู่กับที่ ไม่ว่าจะ scroll ลงมายังไง มันก็จะอยู่ที่ตำแหน่งนั้น

#div-b ไม่ขยับไปไหน

รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ
October 15, 2011
inherit คืออะไร
หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ

มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ แต่ก่อนจะรู้จัก inherit เรามาดูก่อนว่าเวลาเราเขียน CSS เนี่ยแต่ละส่วนมันเรียกว่าอะไรกันบ้าง

CSS ประกอบด้วยอะไรบ้าง

[css]
#my-div {
font-size : 16px;
color : #F00;
}
[/css]

สำหรับ #my-div เราเรียกมันว่า Selectors ก็คือเหมือนชี้เป้าหมายว่า ตัวนี้นะจะต้องมีคุณสมบัติตามใน { } ของชั้นนะ

ต่อมาคือ font-size, color เราเรียกมันว่า Properties ซึ่งจริง ๆ แล้ว CSS มี Properties อีกมากมาย แต่นี่เป็นการยกตัวอย่างมาเท่านั้น โดย Properties ก็ทำหน้าที่บอกหัวข้อคุณสมบัติ อย่างเช่น font-size ก็คือบอกหัวข้อคุณสมบัติว่า Selector ตัวนี้ต้องมีขนาดของตัวอักษร … เป็นต้น

สุดท้ายก็คือ 16px, #F00 เราเรียกมันว่า Value ซึ่งทำหน้าที่บอกว่าค่าให้คุณสมบัตินั้น ๆ อย่างเช่น font-size:16px; ก็แสดงว่าต้องการให้มีขนาดตัวอักษรที่ 16px เป็นต้น

แล้ว inherit คืออะไร

inherit นั้นเป็น Value ซึ่งถ้าตามหลัง Properties ตัวไหน มันก็จะสืบทอดค่ามาจาก parent โดย Properties ที่มีค่า Default ของตัวเองเป็น inherit นั้นได้แก่
- border-collapse
- border-spacing
- caption-side
- color
- cursor
- direction
- empty-cells
- font-family
- font-size
- font-weight
- font-style
- font-variant
- font
- letter-spacing
- list-style-type
- list-style-position
- list-style-image
- list-style
- line-height
- orphans
- page-break-inside
- quotes
- text-align
- text-indent
- text-transform
- visibility
- white-space
- widows
- word-spacing
ถ้าเริ่มงง ๆ แล้วไม่เป็นไรครับ เดี๋ยวทำตัวอย่างให้ดู

[css]
#my-div {font-size:16px;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

เราจะได้ผลลัพธ์ออกมาเป็น

จะเห็นว่าตัวอักษรใน p มีขนาด 16px เพราะว่าตัว font-size นั้นมันมีค่า default value เป็น inherit ดังนั้นจึงดึงค่า font-size มาจาก parent ของมัน ซึ่งก็คือ #my-div

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

คราวนี้เรามีเพิ่มกรอบให้ #my-div จะได้ผลลัพธ์ออกมาเป็นแบบนี้นะครับ

ถ้าเกิดเราใส่ค่าให้ #my-div p มี border:inherit; ละผลจะเป็นยังไง

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;border:inherit;}
[/css]

จะเห็นได้ว่า p ก็ไปดึงค่า border มาจาก parent ซึ่งก็คือ #my-div มาใช้งานด้วย

สิ่งที่ควรรู้เพิ่มเติมสำหรับ inherit
- Browser ที่ไม่ Support ค่า inherit นั้นก็มี IE6 กับ IE7
- ใช้ inherit กับ shorthand properties ไม่ได้
แถม : shorthand properties คืออะไร

มันก็คือการเขียนให้สั้นลงของ CSS อย่างเช่น

[css]
#my-border {
border-width : 2px;
border-style : solid;
border-color : #F00;
}
[/css]

เราสามารถเขียนให้สั้นลงได้ให้กลายเป็น

[css]
#my-border {
border : 2px solid #F00;
}
[/css]

ซึ่งค่า inherit ไม่สามารถใส่ค่าลงไปแบบนี้ได้

[css]
#my-border {
border : 2px inherit #F00;
}
[/css]
September 17, 2011
CSS : มารู้จัก Float กัน
float จะมี property 4 ตัว คือ

float
- left ก็คือ สั่งให้ลอยชิดซ้าย
- right คือ สั่งให้ลอยชิดขวา
- inherit คือ ค่าที่สืบทอดมา
- none คือ ไม่ต้องลอย [ซึ่งปรกติ element ทั่วไปจะเป็น none]
ลองมาดูตัวอย่างของคำสั่ง float แล้วกัน ว่ามันใช้งานแล้วได้ผลลัพธ์เป็นแบบไหน
```
img { float:right; margin:15px; }
```
ตัวอย่าง

จะเห็นว่า รูปของยูริ จะลอยอยู่ทางด้านขวาของหน้าเว็บตามที่เราสั่งไว้

ลองมาดูตัวอย่างต่อไปนะครับ ถ้าเรามี div สามตัว เหมือนใน ตัวอย่าง

ถ้าเราต้องการให้มันมาลอยชิดกัน เราก็ไปสั่งมันแบบนี้ [div ทั้งสามตัวมี class ชื่อ block นะครับ]
```
.block { float:left; width:300px; height:200px; }
```
ซึ่งผลลัพธ์ที่ได้จะเป็นแบบนี้ ตัวอย่าง

div ทั้งสามตัวก็มาลอยเรียงติดกันอย่างสวยงาม

แล้วถ้า float มันใช้งานง่ายแบบนี้ มันจะมีปัญหาอะไรละ เราลองไปดูบ้าง ว่าปัญหาที่เจอมันจะเป็นแบบไหน
```
<div class="block item-1 float"></div>

<div class="block item-2 float"></div>

<div class="block item-3"></div>

<div class="block item-4"></div>
```
```
.block {width:150px;height:150px;}
.float {float:left;}
.item-1 {background:#F00;}
.item-2 {background:#0F0;}
.item-3 {background:#00F;}
.item-4 {background:#FF0;}
```
จาก code แล้ว เราจะต้องมีสี่เหลี่ยมให้เห็นทั้งหมดสี่อัน แต่ถ้าดูจาก ตัวอย่าง แล้ว

เราจะพบว่า มีสี่เหลี่ยมให้เราเห็นเพียงสามอันเท่านั้น เนื่องจาก item-1 และ item-2 ลอยชิดซ้ายกันอยู่ ส่วน item-3 นั้นอยู่ใต้ item-1 ที่ลอยอยู่ ทำให้เราไม่เห็น item-3

ดังนั้นจึงมีอีกคำสั่ง clear มาเพื่อแก้ปัญหานี้ โดย clear นั้นจะมี property 5 ตัว คือ

clear
- left คือ ไม่ให้มีอะไรลอยอยู่ด้านซ้าย
- right คือ ไม่ให้มีอะไรลอยอยู่ด้านขวา
- both คือ ไม่ให้มีอะไรลอยอยู่ทั้งสองด้าน
- none คือ อยากจะลอยก็ลอย ตูไม่ยุ่ง
- inherit คือ ค่าที่สืบทอดมา
ดังนั้นเราลองมาเพิ่มคำสั่ง clear ไปให้ item-3 กันดีกว่า โดยเราจะใส่ดังนี้
```
<div class="block item-1 float"></div>

<div class="block item-2 float"></div>

<div class="block item-3 clear"></div>

<div class="block item-4"></div>
```
```
.block {width:150px;height:150px;}
.float {float:left;}
.clear {clear:left;}
.item-1 {background:#F00;}
.item-2 {background:#0F0;}
.item-3 {background:#00F;}
.item-4 {background:#FF0;}
```
เราจะได้ผลลัพธ์ดังนี้ ตัวอย่าง

ที่เราสั่ง clear:left; เพราะว่า เรามองว่ามี item-1 และ item-2 ลอยอยู่ด้านซ้ายของ item-3 เราจึงสั่งไม่ให้มีอะไรมาลอยอยู่ด้านซ้ายของ item-3

คราวนี้เรามาลองประยุกต์ใช้งานจริง โดยเราแบ่งเว็บออกเป็น 4 ส่วนดังนี้
- header อยู่ด้านบน
- content อยู่ตรงกลางด้านซ้าย
- sidebar อยู่ตรงกลางด้านขวา
- footer อยู่ด้านล่าง
```
<div id="wrapper">

<div id="header">
<h3>Header</h3>
</div>

<div id="content">

<h3>Content</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus odio, feugiat quis eleifend vel, malesuada sit amet ante. Etiam ac ullamcorper sapien. In id felis libero, in imperdiet libero. Nullam varius magna eget tortor placerat consequat. Vivamus convallis auctor turpis, et lobortis enim pulvinar ac. Pellentesque nunc ante, facilisis non gravida sit amet, fermentum sit amet nunc. Vestibulum eleifend velit et ipsum sollicitudin non placerat lorem congue. In hac habitasse platea dictumst. Phasellus eu varius nibh. Maecenas et dolor sapien. Vestibulum ac diam lectus. Nulla magna purus, tincidunt sed elementum nec, blandit vitae risus. In at eros et urna lobortis laoreet. Vestibulum blandit nisi eu lectus pellentesque laoreet sollicitudin odio facilisis. Nam adipiscing pretium odio, eget laoreet libero volutpat eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod tortor vel tellus fringilla in tempus est rutrum. Quisque vitae nulla at erat luctus dapibus.

</div>

<div id="sidebar">
<h3>Sidebar</h3>
</div>

<div id="footer">
<h3>Footer</h3>
</div>

</div>
```
```
#wrapper {width:960px;margin:0 auto;}
h3 {font-size:30px;color:#FFF;}
#header {background:#F00;padding:20px;}
#content {background:#0F0;padding:20px;width:720px;float:left;}
#sidebar {background:#00F;padding:20px;width:160px;float:right;}
#footer {background:#FF0;padding:20px;clear:both;}
```
เราก็จะได้เว็บตามที่เราวางโครงไว้ ตัวอย่าง

แต่ถ้าเกิดเราลืมใส่ clear:both; ให้ footer ละ จะเกิดอะไรขึ้น ตามไปดู ตัวอย่าง กันเลยครับ

จะเห็นว่าตัว footer จะไปอยู่ทางด้านขวาแทนที่จะอยู่ด้านล่างอย่างที่เราต้องการ โดยตัว content และ sidebar จะลอยบังส่วนของ footer ไว้ และเหลือให้เราเห็นในส่วนที่ content และ sidebar ไม่ได้บัง

เรามาลองดูอีกปัญหานึงที่น่าจะได้เคยพบเจอกัน ลองดูจาก ตัวอย่าง นะครับ
```
<div id="wrapper">
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
</div>
```
```
#wrapper {background:#000;width:960px;margin:0 auto;}
img {float:left;margin:10px;}
```
ถ้าเราดูจาก code แล้ว ต้องจะมีพื้นหลังสีดำให้เราเห็น แต่จากที่เราดูในตัวอย่าง จะไม่เห็นพื้นหลังสีดำเลย วิธีแก้ไขก็มีอยู่หลายวิธี แต่จะขอนำเสนออยู่สองแบบ คือ
- ใช้ overflow:hidden
- ใช้ clearfix
overflow:hidden

ให้เราใส่ overflow:hidden ใน #wrapper ตัวอย่าง
```
#wrapper {background:#000;width:960px;margin:0 auto;overflow:hidden;}
img {float:left;margin:10px;}
```
clearfix

ให้เราใส่ class=”clearfix” ใน div id=”wrapper” และเพิ่ม CSS ของ class=”clearfix” เข้าไป ตัวอย่าง
```
<div id="wrapper" class="clearfix">
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
<img src="images/float-1.jpg" alt="SNSD Yuri" />
</div>
```
```
#wrapper {background:#000;width:960px;margin:0 auto;}
img {float:left;margin:10px;}
* html .clearfix { height: 1%; }
* + html .clearfix { display: inline-block; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
```
June 16, 2011