CSS เด็ดๆ

[หนึ่ง]

ส่วนใหญ่เห็นแต่ Text เนื้อหาดี ครอบคุมหลายเรื่อง หาคนไทยเขียนยากจัง ...

เอามาแปลเลยดีมั้ยครับ   

กรี๊ดด

[st]

กรี๊ดด

ร้องแบบนี้ เห้นด้วยใช่มั้ยครับ หรือว่า ตกใจ ไม่อยากอ่านหนังสือแปล 

[Layiji]

ถามเรื่องการ flow ของ DIV ครับ 


ทำแล้วสวยงามใน FF
ได้อย่างนี้


พอเป็น IE




CSS เป็นอย่างนี้ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

.picborder {
float:left;
padding: 3px;
border: 1px solid #999999;
background-color: #FFFFFF;

}

.hotelframe {
background-image: url(images/dot1.gif);
background-repeat: repeat-x;
background-position: center bottom;
padding: 10px 0 20px 40px;
overflow: auto;

}
.hoteldetail {
font-family: tahoma;
font-size: 12px;
color: #666666;
float: left;
padding-left: 30px;
width: 700px;
}
.inner {
padding: 10px 0 0 0;
float: left;
}


โค้ด เลือกทั้งหมด ขยายเนื้อหา

    <div class="hotelframe">
    <div class="picborder"><img src="images/hotel/sam001.jpg">
    </div>
    <div class="hoteldetail"> <span class="big3">HOTELNAME</span>  &nbsp; <span class="style1">&nbsp;Bangkok</span> <div class="inner">

</div>
</div>
    </div> x2

[iannnnn]

ลองปรับๆ ได้แบบนี้ครับ
ไม่รู้ได้เปล่านะ ลองเทสต์แต่ไม่ละเอียด
(ผมเปลี่ยน design บางส่วนนะครับ เอาไว้ทดสอบ)

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<style type="text/css">

.hotelframe {
background: #ffffdd;
padding: 10px 0 20px 40px;
overflow: hidden;
margin:10px;
clear:both;
}

.picborder {
float:left;
padding: 3px;
border: 1px solid #999999;
background-color: #FFFFFF;
overflow: hidden;
}

.hoteldetail {
font: normal tahoma 12px;
color: #666666;
padding-left: 30px;
}

.inner {
margin-top: 10px;
}

.big3 {
  font: bold 14pt Tahoma;
}

</style>



<div class="hotelframe">
    <div class="picborder"><img src="http://www.crestock.com/uploads/referral/graphics/125x125-illustration.gif"></div>
    <div class="hoteldetail"><span class="big3">HOTELNAME</span>  &nbsp; <span class="style1">&nbsp;Bangkok</span>
      <div class="inner"></div>
  </div>

</div>
<div class="hotelframe">
    <div class="picborder"><img src="http://www.crestock.com/uploads/referral/graphics/125x125-illustration.gif"></div>
    <div class="hoteldetail"><span class="big3">HOTELNAME</span>  &nbsp; <span class="style1">&nbsp;Bangkok</span>
      <div class="inner"></div>
  </div>
</div>

สังเกตว่า:
- clear:both แปลว่า เอาอีซ้ายกะขวาที่เกะกะออกให้หมด
- margin: กับ padding: ให้ผลต่างกัน ในกรณีที่จะผลักก้อนข้างๆ ออกไปห่างๆ ควรใช้ margin
- IE มันไม่รู้จักการตัดบรรทัดลงมาได้ไงไม่รู้ครับ ถ้าเรากำหนดขนาดที่รัดแน่นเกิน มันจะหล่นลงมาข้างล่างเป็นก้อน
- อะไรอีกไม่รู้ ลืม

[Layiji]

clear all
กับ overflow hidden แปลว่าอะไรครับ 

[iannnnn]

ว้าย clear:all ไม่มีนะครับ ผมพิมพ์ผิด
overflow:hidden คือ ถ้าเกิน(กรอบกว้างยาวที่กำหนด) จงตัดออก
เอาไว้ hack ปัญหาไออีเวลาใส่กรอบแล้วมันชอบเป๋ครับ

http://del.icio.us/iannnnn/css+iefuck
รู้สึกในนี้มีอธิบายนิดนึง

[iannnnn]

ลองศึกษาอันนี้เพิ่มมาคัรบ

ไปเจอโค้ดแบบนี้มาครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

a[href^="mailto"] {
background: url(images/emailIcon.png) left center no-repeat;
padding-left: 10px;
}

ทำให้ลิงก์ใดๆ ที่มีคำว่า "mailto:" มีลักษณะ css ตามที่กำหนด

เหมือนเจอคัมภีร์เทวดา
อยู่ดีๆ ก็ลองค้นกูเกิ้ลหาวิธีต่อยอดวิธีใช้ css แบบที่ว่าครับ
เพื่อจะลองหาทางออกให้ปัญหาของโพสต์นี้

เดี๋ยวมาเล่าให้ฟัง กำลังแก้อยู่จ้ะ

[Layiji]

ถามเรื่อง padding margin ที่งงๆในกรณีนี้ครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

.wrapper {
width:100%;
height:100%;
}
.a {
width:700px;
height:100%;
background-color:#FFFFFF;

}

.b {
width:100%;
height:100px;
overflow:auto;
margin-left: 10px;
padding:10px;
background-color: #FFCC00;
text-align: left;
}

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<div class="wrapper" align="center"><div class="a"><div class="b">asdfsdfasdf</div>
</div>
</div>



ผลที่ได้ตามนี้ครับ ปัญหาคือผมอยากได้ไอ้ div ที่มันห่างจากซ้ายไปนิดนึง แล้วก็มี Padding หน่อยนึง โดยที่อยากให้มันสุดพอดีขอบ
กรณีนี้ควรทำยังไงครับ หรือว่าต้องกำหนดเป็น pixel เป๊ะๆที่คำนวน padding margin ไว้แล้วครับ

[iannnnn]

น่าจะเป็นยังงั้นครับ คำนวณแล้วเอามาลบกัน
กรณีนี้ผมเองก็ไม่แม่นนะ อาศัยคลำเอาทุกทีไป เพราะหมาย่างกะไออีไม่เหมือนกันอีกแล้ว
พี่เลย์ลองลง อทช ชื่อ Web Developer ดูสิครับ
พอลงเสร็จเราสามารถ Edit CSS ให้มันแสดงผลสดๆ ได้เลย สะใจมาก

[iannnnn]

เอาล่ะ มาต่อกัน
ตะกี้เพิ่ม css ชุดนี้ลงไปในหน้ากากของบอร์ดครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา



table tr > td > a[href*="action=post;quote"] {
font-weight:bold;
background: url(/forum/Themes/iannnnn11/images/upshrink2.gif) no-repeat 0 -3px;
padding-left:20px !important;
}

table tr > td > a[href*="action=post;topic="] {
font: normal 8pt Tahoma;
background:#555556;
padding:2px 7px 3px 8px;
color:#ffffff !important;
border: 1px solid #999999;
}

อีชุดหลังไม่ต้องสนใจนะ เอาแค่ชุดหน้าพอ แต่มันเกี่ยวเนื่องกัน
ตูจะมาแกะให้ดู หวังว่าจะมีประโยชน์มากๆ (เพราะตูตื่นเต้น)


เรื่องของเรื่องคือจากโพสต์ของบุ๋มที่ว่าไว้ตะกี้
บวกกับโพต์ที่ตูเจอมามั่วๆ เมื่อวันก่อน
ทำให้ตูลองไปกูเกิ้ลดูว่ามันมีสัญลักษณ์อะไรที่มาโผล่ใน css ได้บ้าง
ก็เจอลิงก์นี้บอกไว้ จนออกมาเป็นไอ้นี่

โค้ด เลือกทั้งหมด ขยายเนื้อหา

table tr > td > a[href*="action=post;topic="] { ....... }

อันนี้แปลว่า ใน <table><tr><td><a href= "......"> ที่ยิงไปที่ลิงก์ที่มีคำว่าอะไรก็ได้
ที่มีส่วนประกอบของคำว่า action=post;topic= ครับ

มาขยายความกันนะ
a[.........] คือ แท็ก <a ตามด้วย .........
ซึ่งอี ......... เนี่ย จะเป็น href หรือ title หรือ rel ก็ได้ หรือส่วนขยายอะไรอย่างอื่นก็ได้

โค้ด เลือกทั้งหมด ขยายเนื้อหา



a[rel] {
color: red;
text-decoration: underline;
background:#ffff00;
}

HTML: 
<a href="#" rel="external">ทดสอบ</a>

แสดงผลออกมาจะได้

ทดสอบ

แล้วตัวอักษรหลังจากนั้น จะสาธิตเป็นตัวอย่างกันงง (แค่นี้ก็เริ่มงงละ)

*= หมายถึง อะไรก็ได้
ตัวอย่าง a[href*="nt"] หมายถึง f0nt.com ก็ได้ หรือ iannnnn.com/aaa/aaa.php?xx=asasntasaasa ก็ได้

= หมายถึง เฉพาะเจาะจง
ตัวอย่าง a[href="index.html"] หมายถึง index.html เท่านั้น จะไม่แสดงผลในกรณี href="/a/index.html"

^= หมายถึง ขึ้นต้นด้วย
ตัวอย่าง a[href^="/"] หมายถึง /xxx (ตัวอย่างแค่นี้คงพอใช่มะ)

$= หมายถึง ลงท้ายด้วย
ตัวอย่าง a[href$="pdf"] หมายถึง ลิงก์ไปที่ไหนก็ได้ที่ลงท้ายด้วย pdf (เอาไปประยุกต์ใช้ได้ดีมากๆ)

|= หมายถึง คำที่มียัติภังค์เชื่อม
ตัวอย่าง a[href|="not"] หมายถึง ลิงก์ไปที่ไหนก็ได้ที่มีคำที่ระบุ คั่นด้วยเครื่องหมาย - เช่น aaaa-not-xxxxx

~= หมายถึง คำที่มีเว้นวรรคเชื่อม
ตัวอย่าง a[title~="not"] ก็เช่น <a href="#" title="i'm not sure">

[ยุนเอ]

ตัวอย่างกันงงของพี่แอนอ่านต่อได้ที่ regular expression นะครับ

นึกว่าใช่

[iannnnn]

www.webdesignerwall.com/tutorials/css-decorative-gallery/

โอ้ว
ใส่เฟรมให้ภาพ สารพัดแบบ สวยหยาดทิพย์

[ยุนเอ]

เจ๋งมาก 

[Layiji]

  มากๆ

[หนุ่ม]