CSS เด็ดๆ

[ej_sing]

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

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

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

[ej_sing]

ทำได้แล้วครับ ขอบคุณครับ
แค่เพิ่ม 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%;
}

[iannnnn]

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

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

[Maggot]

เมื่อวานทำ 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 นะ

[iannnnn]

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

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

<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 ครับ

[Maggot]

  +

ขอบคุณครับ

[iannnnn]

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

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


(ดูดฟีดโลด)

[ej_sing]

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

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

[iannnnn]

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

[ej_sing]

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

เพราะต่อไป เผื่อ แพลทฟอรมเล็กๆอย่างพวก โทรศัพท์พกพา จะใช้ 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

[iannnnn]

+

[i-poon]

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

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


(ดูดฟีดโลด)

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

[Layiji]

 

[iannnnn]

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


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

[蓝月 (lán yuè)]

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

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

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