CSS เด็ดๆ

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

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

กรี๊ดด

กรี๊ดด

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

ถามเรื่องการ 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

ลองปรับๆ ได้แบบนี้ครับ
ไม่รู้ได้เปล่านะ ลองเทสต์แต่ไม่ละเอียด
(ผมเปลี่ยน 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 มันไม่รู้จักการตัดบรรทัดลงมาได้ไงไม่รู้ครับ ถ้าเรากำหนดขนาดที่รัดแน่นเกิน มันจะหล่นลงมาข้างล่างเป็นก้อน
- อะไรอีกไม่รู้ ลืม

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

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

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

[เหมือนเจอคัมภีร์เทวดา]

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

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

โค้ด:

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

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

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

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

ถามเรื่อง 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 ไว้แล้วครับ

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

[*= หมายถึง อะไรก็ได้]

เอาล่ะ มาต่อกัน
ตะกี้เพิ่ม 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 นะครับ

  นึกว่าใช่

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

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

เจ๋งมาก 

  มากๆ