Comments on: การจัดการกับความสูง http://www.divland.com/blog/2007/07/31/css-about-height/ The miracle land of inspiration Mon, 06 Oct 2008 22:40:07 +0000 http://wordpress.org/?v=2.6 By: SexZero http://www.divland.com/blog/2007/07/31/css-about-height/#comment-317 SexZero Sun, 11 Nov 2007 16:13:28 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-317 เวรกำ ผมเขียนโค๊ดไปแล้วดันหายไปกะตา คิดว่ามันประมวลผลให้เสียอีก ไม่พิมพ์ใหม่แล้วนะคับ ขี้เกียจและ ลองค้นหาในกูเกิ้ลกันดูนะครับ รับรองมีแน่นอนคับ เวรกำ ผมเขียนโค๊ดไปแล้วดันหายไปกะตา คิดว่ามันประมวลผลให้เสียอีก ไม่พิมพ์ใหม่แล้วนะคับ ขี้เกียจและ ลองค้นหาในกูเกิ้ลกันดูนะครับ รับรองมีแน่นอนคับ

]]> By: SexZero http://www.divland.com/blog/2007/07/31/css-about-height/#comment-316 SexZero Sun, 11 Nov 2007 16:09:40 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-316 จากตัวอย่างนี้ .aa{width:300px; background:#CCCC00;height:7px; font-size:1px} ถ้าเราใช้ขนาดฟอนด์ 1 พิเซลบางทีมันอาจจะมีปัญหาเรื่องการแสดงฟอนด์โดยเราไม่รู้ตัวได้คับ เพราะมันจะไปทำงานกับไฟล์ html แล้วถ้าเกิดเราเผลอลืมไปใช้ฟอนด์ตัวนั้นหรือจะจัดระบบของ css ในอนาคตลำบากคับ ผมมีเทคนิคคิดว่าน่าจะใช้ได้แทนการใช้ font-size:1px ได้นะครับ คือให้เราเขียนใน html โดยใช้ คำสั่ง div แล้วเว้นวรรคมันซะ   ยกตัวอย่างเช่น ©2007-2009 Divland.com all right reserved   ลองทำดูนะคับ ผิดถูกยังไงบอกด้วยคับ จากตัวอย่างนี้

.aa{width:300px; background:#CCCC00;height:7px; font-size:1px}

ถ้าเราใช้ขนาดฟอนด์ 1 พิเซลบางทีมันอาจจะมีปัญหาเรื่องการแสดงฟอนด์โดยเราไม่รู้ตัวได้คับ เพราะมันจะไปทำงานกับไฟล์ html แล้วถ้าเกิดเราเผลอลืมไปใช้ฟอนด์ตัวนั้นหรือจะจัดระบบของ css ในอนาคตลำบากคับ
ผมมีเทคนิคคิดว่าน่าจะใช้ได้แทนการใช้ font-size:1px ได้นะครับ

คือให้เราเขียนใน html โดยใช้ คำสั่ง div แล้วเว้นวรรคมันซะ

 

ยกตัวอย่างเช่น

©2007-2009 Divland.com all right reserved

 

ลองทำดูนะคับ ผิดถูกยังไงบอกด้วยคับ

]]> By: SexZero http://www.divland.com/blog/2007/07/31/css-about-height/#comment-315 SexZero Sun, 11 Nov 2007 15:56:34 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-315 ปีโป้ said, August 17, 2007 @ 7:19 pm ขอถามหน่อยค่า แล้วถ้าหากเรามีกล่อง 1 กล่องใหญ่ แล้ว มีกล่องเล็ก ข้างใน 2 กล่อง กล่องซ้าย มีข้อมูลเพียบ แต่กล่องขวา มีข้อมูลน้อยนิด ความสูงของกล่องขวา มันไม่ยืดตามกล่องซ้าย ทำไงดีอ่ะ มีวิธีป่าว ถ้าอยากให้ความสูงของกล่องขวายืดตามกล่องซ้ายอ่ะ ตอบ ให้ลองทำแบบนี้นะครับ 1. ให้เราสร้างกล่องใบใหญ่ขึ้นมาใบนึงใน css สมมุตยกตัวอย่างชื่อ #content-container-three-column โดยกำหนดให้ค่าของมันคลุมทั้งหมด 2. แล้วให้เราสร้างกล่องเล็กๆ ขึ้นมา 2 ใบ สมมุตตั้งชื่อว่า #content-left-three-column และ #content-right-three-column แล้วกำหนดให้อยู่แค่ ซ้าย กับ ขวา 3. แล้วให้ประกาศใน html ไปว่ากล่องเล็กๆ 2 ใบนี้เป็นลูกของกล่องใบใหญ่อีกทีนึง ตัวอย่าง css Code : #content-container-two-column { margin-top:3px; margin-left:auto; margin-right:auto; padding:15px; width:600px; border:1px solid #818181; position:relative; } #content-right-two-column, #content-left-two-column { width:160px; } #content-right-two-column { float:right; } #content-left-two-column { float:left; } หลังจากนั้นก็ให้เขียนโค้ดใน html ดังนี้ ลองทำดูนะคับ ผมไม่แน่ใจเท่าไหร่ พอดีไม่ได้ลองคับคิดได้ก็เขียนเลย ผิดถูกยังไงบอกด้วยคับ ปีโป้ said,
August 17, 2007 @ 7:19 pm

ขอถามหน่อยค่า แล้วถ้าหากเรามีกล่อง 1 กล่องใหญ่ แล้ว มีกล่องเล็ก ข้างใน 2 กล่อง กล่องซ้าย มีข้อมูลเพียบ แต่กล่องขวา มีข้อมูลน้อยนิด

ความสูงของกล่องขวา มันไม่ยืดตามกล่องซ้าย ทำไงดีอ่ะ มีวิธีป่าว ถ้าอยากให้ความสูงของกล่องขวายืดตามกล่องซ้ายอ่ะ

ตอบ
ให้ลองทำแบบนี้นะครับ
1. ให้เราสร้างกล่องใบใหญ่ขึ้นมาใบนึงใน css สมมุตยกตัวอย่างชื่อ #content-container-three-column โดยกำหนดให้ค่าของมันคลุมทั้งหมด
2. แล้วให้เราสร้างกล่องเล็กๆ ขึ้นมา 2 ใบ สมมุตตั้งชื่อว่า #content-left-three-column และ #content-right-three-column แล้วกำหนดให้อยู่แค่ ซ้าย กับ ขวา
3. แล้วให้ประกาศใน html ไปว่ากล่องเล็กๆ 2 ใบนี้เป็นลูกของกล่องใบใหญ่อีกทีนึง

ตัวอย่าง css Code :

#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:15px;
width:600px;
border:1px solid #818181;
position:relative;
}
#content-right-two-column,
#content-left-two-column {
width:160px;
}
#content-right-two-column {
float:right;
}
#content-left-two-column {
float:left;
}

หลังจากนั้นก็ให้เขียนโค้ดใน html ดังนี้

ลองทำดูนะคับ ผมไม่แน่ใจเท่าไหร่ พอดีไม่ได้ลองคับคิดได้ก็เขียนเลย ผิดถูกยังไงบอกด้วยคับ

]]> By: sangsood7 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-253 sangsood7 Mon, 03 Sep 2007 08:57:02 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-253 ขอบคุณมากครับ ขอบคุณมากครับ

]]> By: likhi1 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-247 likhi1 Thu, 30 Aug 2007 17:42:37 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-247 "แปลเป็น ภาษามนุษย์ก็คือ กล่องนี้จะสูง auto ตามเนื้อหา แต่สูงอย่างน้อย 150px ส่วน IE6 ก็กล่องนี้ สูง 150 px" ขอบคุณท่านพี่ที่แปลเป็นภาษามนุษย์ให้ครับ .... 5555:d:d:d:d “แปลเป็น ภาษามนุษย์ก็คือ กล่องนี้จะสูง auto ตามเนื้อหา แต่สูงอย่างน้อย 150px ส่วน IE6 ก็กล่องนี้ สูง 150 px”

ขอบคุณท่านพี่ที่แปลเป็นภาษามนุษย์ให้ครับ …. 5555:d:d:d:d

]]> By: admin http://www.divland.com/blog/2007/07/31/css-about-height/#comment-238 admin Sat, 18 Aug 2007 17:03:56 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-238 เดิมที ปัญหานี้ จะมี javascript ตัวหนึ่ง เอาไว้แก้โดยเฉพาะ ซึ่งที่ทำงานผมใช้กันอยู่ แต่จากที่ผมลองใช้ css เพียงอย่างเดียว และค้นคว้าจากเว็บต่างๆ คิดว่าทำได้ครับ แต่ก็ต้องใช้ property expression คือ ฝัง จาวาสคริปลงไปใน css แล้วจะเขียนเป็น tutorail อธิบายอีกทีละกันครับ คงจะยาวมาก ขอบคุณ ปีโป้ ที่จุดประกายความคิด ครับ :x เดิมที ปัญหานี้ จะมี javascript ตัวหนึ่ง เอาไว้แก้โดยเฉพาะ ซึ่งที่ทำงานผมใช้กันอยู่ แต่จากที่ผมลองใช้ css เพียงอย่างเดียว และค้นคว้าจากเว็บต่างๆ คิดว่าทำได้ครับ แต่ก็ต้องใช้ property expression คือ ฝัง จาวาสคริปลงไปใน css แล้วจะเขียนเป็น tutorail อธิบายอีกทีละกันครับ คงจะยาวมาก ขอบคุณ ปีโป้ ที่จุดประกายความคิด ครับ :x

]]> By: utt http://www.divland.com/blog/2007/07/31/css-about-height/#comment-237 utt Fri, 17 Aug 2007 20:14:17 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-237 ทำไม่ได้ด้วย CSS ครับ กรณีนี้ต้องใช้ javascript ช่วยครับ คือคำนวณความสูงของกล่องที่สูงสุดแล้วใช้ innerhtml เขียนเข้าไปใน กล่องอีกอัน :)>- ทำไม่ได้ด้วย CSS ครับ กรณีนี้ต้องใช้ javascript ช่วยครับ คือคำนวณความสูงของกล่องที่สูงสุดแล้วใช้ innerhtml เขียนเข้าไปใน กล่องอีกอัน :)>-

]]> By: ปีโป้ http://www.divland.com/blog/2007/07/31/css-about-height/#comment-236 ปีโป้ Fri, 17 Aug 2007 12:19:08 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-236 ขอถามหน่อยค่า แล้วถ้าหากเรามีกล่อง 1 กล่องใหญ่ แล้ว มีกล่องเล็ก ข้างใน 2 กล่อง กล่องซ้าย มีข้อมูลเพียบ แต่กล่องขวา มีข้อมูลน้อยนิด ความสูงของกล่องขวา มันไม่ยืดตามกล่องซ้าย ทำไงดีอ่ะ มีวิธีป่าว ถ้าอยากให้ความสูงของกล่องขวายืดตามกล่องซ้ายอ่ะ:-w ขอถามหน่อยค่า แล้วถ้าหากเรามีกล่อง 1 กล่องใหญ่ แล้ว มีกล่องเล็ก ข้างใน 2 กล่อง กล่องซ้าย มีข้อมูลเพียบ แต่กล่องขวา มีข้อมูลน้อยนิด

ความสูงของกล่องขวา มันไม่ยืดตามกล่องซ้าย ทำไงดีอ่ะ มีวิธีป่าว ถ้าอยากให้ความสูงของกล่องขวายืดตามกล่องซ้ายอ่ะ:-w

]]> By: เมโกะ http://www.divland.com/blog/2007/07/31/css-about-height/#comment-227 เมโกะ Sat, 11 Aug 2007 13:37:08 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-227 วันนี้พาแขกมาเยี่ยมเว็ปพี่คนนึงค่ะ พี่มารน้อยอาจารย์สอนโอเทลโลของนู๋เอง เค้าเคยเล่นกับพี่ด้วย เขาบอกว่าหาเว็ปแบบนี้มานานแล้ว เขาอยากรู้จักพี่ค่ะ บอกว่าอยากรู้จักคนเก่งๆ ขอชื่นชมๆ วันนี้พาแขกมาเยี่ยมเว็ปพี่คนนึงค่ะ พี่มารน้อยอาจารย์สอนโอเทลโลของนู๋เอง เค้าเคยเล่นกับพี่ด้วย เขาบอกว่าหาเว็ปแบบนี้มานานแล้ว เขาอยากรู้จักพี่ค่ะ บอกว่าอยากรู้จักคนเก่งๆ ขอชื่นชมๆ

]]> By: เมโกะ http://www.divland.com/blog/2007/07/31/css-about-height/#comment-226 เมโกะ Sat, 11 Aug 2007 13:30:11 +0000 http://www.divland.com/blog/2007/07/31/css-about-height/#comment-226 พยามโพสต์หลายครั้งแต่ไม่เข้า ดูไปดูมาอ๋อเราโง่นี่เอง อิอิ ทึ่งมากกับฝีมือของพี่ สีสวยและมากด้วยสาระ อ่านสนุก ขอเป้ฯกำลังใจให้ค่ะ พยามโพสต์หลายครั้งแต่ไม่เข้า ดูไปดูมาอ๋อเราโง่นี่เอง อิอิ ทึ่งมากกับฝีมือของพี่ สีสวยและมากด้วยสาระ อ่านสนุก ขอเป้ฯกำลังใจให้ค่ะ

]]>