CSS เด็ดๆ

ครับ ผมเริ่มจากอันที่คุณ iannnnn ทำตัวอย่างนั่นแหล่ะครับ
และพอใส่ maincontent ตรงกลาง ยังยืดอยู่ถูกต้อง

แต่พอใส่ครบ ที่ IE แสดงผลได้อย่างที่ตั้งใจครับ

แต่ที่ FF ตัว warpper มันยืดลงไปไม่สุด (สุดแค่ขอบจอ)
แก้มาหลายเพลาแล้วครับ หาไม่เจอว่าติดตรงใหน

ทำได้แล้วครับ ขอบคุณครับ
แค่เพิ่ม overflow:auto; เข้าไป (มั่วๆเล็กน้อย)
ยังไม่เข้าใจคำสั่งนี้เท่าไรครับ
overflow:auto; มันคืออะไรครับ

ถามครับ ตอนนี้ลองทำแต่  warpper มันไม่ยอมยืด 100%
( Firefox มันยืดแค่พอดีหน้าจอ ถ้าเลยกว่านั้นไม่ยืด)

แต่ใน IE มันโอเคอย่างที่ต้องการซะงั้นครับ 
รบกวนหน่อยครับ



* {margin: 0;}
html, body {height: 100%;}
body { margin: 0; padding: 0; text-align: center; background-color:#003366}

#wrapper {
margin: 0 auto;
text-align: left;
width: 800px;
min-height: 100%;
height:auto; !Important
height:100%;
background: #ccff00;
overflow:auto;
}

* html #wrapper { height: 100%;}

#leftmenu{
width:170px;
float:left;
position:fixed;
background-color:#CCCCCC;
}

#maincontent{
width:620px;
background-color:#dddddd;
float:right;
padding:5px;
height:100%;
}

แปลตามตัวเลยนะครับ
"ถ้าล้น ก็จัดการไปเลยตามอัตภาพ" (แปลว่า มี Scrollbar ให้ด้วยนะ)

แต่ถ้า overflow: hidden นี่คือ ถ้าล้นก็หมกไว้ไม่ต้องปล่อยให้เกินขอบ

เมื่อวานทำ stylesheet แล้วมีปัญหากับ ie เลยไปหาวิธีแก้มาได้วิธีนึง ไม่รู้ว่ารู้กันรึยัง  แต่ผมเพิ่งรู้นะเลยเอามาแปะๆ ไว้

ถ้าต้องการให้ stylesheet บางตัวทำงานเฉพาะใน ie ให้ใส่ if ไว้ใน head ได้ เช่น

โค้ด:

<!--[if IE]>
     <style>
          .fieldset {
              position: relative;
          }
          .legend {
              position: absolute;
              top: -0.5em;
              left: 0.2em;
          }
     </style>
<![endif]-->

จากอันนี้คือวิธีแก้ fieldset ใน ie ซึ่งมันจะมีสี background ล้นออกมานอกกรอบ แน่นอนว่าใน ff / safari มันปกติ ถ้าใส่ position ตามข้างบนนี้ ใน ff / safari จะเละ เลยต้องกำหนดให้พวกนี้แสดงเฉพาะใน ie นะ

ไอ้ตัวนั้นเขาเรียกว่า แท็กคอมเมนต์แบบไม่ธรรมดาครับ
คือกำหนดเงื่อนไขที่จะแสดงผลแต่ละบราวเซอร์ได้เลย

ตัวอย่างจากอันนี้

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer

<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5

<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0

<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5

<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6

<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7

<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up

<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6

<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5

<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6

<![endif]-->
</p>

ที่มา http://www.quirksmode.org/css/condcom.html

สังเกตมีบางอันบอกว่า ถ้าสูงกว่า หรือถ้าห่วยกว่าด้วยแหละ
ถ้าเอามาประยุกต์ใช้กะ css แบบโหลดภายนอกเนี่ย ก็เลือกใช้เป็นชุดๆ เลยก็ได้ครับ

โค้ด:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

ไม่ใช่ไออี

โค้ด:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

ใช่ไออี


รู้สึกว่าศัพท์เฉพาะของ CSS เขาเรียก IE Hack ครับ

  +

ขอบคุณครับ

[DivLand]

แล้วก็เจอเว็บ(บล็อก) CSS ในฝัน

DivLand
Divland.com : CSS gallery, Blog, Archives, Web2.0, Style sheet, สไตล์ชีท, Webdesign, CSS


  (ดูดฟีดโลด)

ถามเพิ่มเติมคุณแอน
ว่าถ้า สมมุติเปิดเว็บด้วย mobile Phone
เราสามารถให้มันออโต้เลือก css ที่เราทำสำหรับ mobile ได้ไหมครับ

เช่นถ้าเปิดด้วย mobilephone ให้ใช้ mobile.css ถ้าไม่ใช่ ก็ใช้ main.css ตัวปรกติ

ไม่รู้ครับ
เกิดมายังไม่เคยคิดจะทำอะไรกะมือถือเลย
กระทั่งเปิดเว็บก็ยังไม่เคย

อะโช๊ะ !!! ไปหาอ่านมาแล้วครับ
เห็นว่ามีประโยชน์มากๆ

เพราะต่อไป เผื่อ แพลทฟอรมเล็กๆอย่างพวก โทรศัพท์พกพา จะใช้ edge กันมากขึ้น
คือเปิดอินเตอร์เนทดูจากโทรศัพท์เลย จอมันเล็ก แถมช้า เพราะระบบเฮงซวยของบ้านเรา
เราก็ทำ design css สำหรับ handheld มารองรับ เอาไว้
เอาใจพวกใช้อินเตอร์เนทผ่านโทรศัพท์ น่ะแหล่ะ

มีหลายแบบให้สั่งได้ เช่น

โค้ด:

<link rel="stylesheet" href="css-thaicss/main.css" type="text/css"  media="screen" />
<link rel="stylesheet" href="css_xhtml/thaicss_xhtml_print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css_xhtml/thaicss_xhtml_mobile.css" type="text/css" media="handheld" title="Style for Mobile and Handheld" />

@media all{}
@media screen{} อันนี้ก็หมายถึง จอปรกติ
@media handheld{} โทรศัพท์พกพา (ไม่รู้รวมไปถึงพวก PDA ด้วยหรือปล่าว)
@media print{} เวลาสั่ง print ให้ใช้ css ตัวนี้

ที่มา http://www.thaicss.com/main/css_for_printer.html

+

[DivLand]

แล้วก็เจอเว็บ(บล็อก) CSS ในฝัน

DivLand
Divland.com : CSS gallery, Blog, Archives, Web2.0, Style sheet, สไตล์ชีท, Webdesign, CSS


  (ดูดฟีดโลด)

ไม่คิดไม่ฝันว่าจะเป็นเว็บไทย  !!!!

 

(กระจู๋นี้ได้ใช้ประโยชน์บ่อยจริงๆ ด้วย)


http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
คงเคยเห็นการทำเอฟเฟกต์แบบ LightBox ใช่ไหมครับ
อันนั้นมันต้องอาศัย Javascript ด้วย แต่อันนี้เป็น css เพียว

http://www.blognone.com/node/5489
blognone | Submitted by tr

อันนี้เด็ดมากครับ 

เปิดปุ๊บ Active Virus Shield ฟ้องว่าโทรจันทันทีเลย