CSS เด็ดๆ

[iannnnn]

เอาจริงๆ คือปีนี้โครงการไว้เหมือนกัน

(โครงการน่ะมีมานานแล้วแต่เพิ่งจะได้ทำก็คงปีนี้แหละ)

[ยุนเอ]

ขอเล่นย้วยยิ 

[กันย์]

ไปด้วยครับ

[กากก่อเกรียนนู้บ]

เล่นด้วยครับพี่แอน ผมไม่สน IE แล้ว 

[iannnnn]

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

opacity: 0.7;
filter:alpha(opacity=70);
-ms-filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;


เป็นโค้ดที่ทำให้วัตถุใสจ้ะ ใช้ได้กับทุกเบราว์เซอร์ (เพราะพี่แกเล่นใส่ระบุทุกบรรทัด)

[กากก่อเกรียนนู้บ]

อันนี้ CSS3 เหรอครับพี่แอน

[iannnnn]

เปล่าครับ วิธีโบร่ำโบราณและไม่ได้มาตรฐานโลกด้วย
แต่เอาไว้แก้ปัญหาได้ทุกยี่ห้อ

[กากก่อเกรียนนู้บ]

  กรี๊ด ขอบคุณครับ

[iannnnn]

เพิ่งคุยกะบักก่อเมื่อกี้เรื่อง Footer ของหน้า
ที่ชอบมีปัญหาพาให้งงอยู่เรื่อย


และแล้วอยู่ดีๆ ก็อ่านฟีดไปเจออันนี้เข้าครับ

New CSS Sticky Footer - 2009



CSS

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

/* 
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 140px;}  /* must be same height as the footer */

#footer {position: relative;
margin-top: -140px; /* negative value of footer height */
height: 140px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




HTML

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


<div id="wrap">
<div id="main" class="clearfix">....</div>
</div>
<div id="footer">....</div>



เคลียร์

[กากก่อเกรียนนู้บ]

  เคลี้ยร์!

[JΛNΣ]

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

[กากก่อเกรียนนู้บ]

ใช่แล้น ครับ พี่เจน

[น็อต]

เจ๋งมาก

ของเก่าที่ใช้อยู่ใช้ได้กับบาง Browser เท่านั้น 

[ej_sing]

อืมมม 



ถามเพิ่ม min-height นี่มีปัญหากับ IE มาตลอดใช่ไหมครับ ( หรือผมเจออยู่คนเดียว  ) ถ้าใช่แก้กันอย่างไรบ้าง

[iannnnn]

http://callmebird.com/weblog/css-min-height-cross-browser
http://davidwalsh.name/cross-browser-css-min-height
ลองวิธีนี้ดูครับ