CSS เด็ดๆ

ณัฏฐ์ · 13 ก.พ. 2009, 00:18 น.

ก็สงสัยแบบว่า

display : none
กับ
visible : hidden
มันก็หายไปเหมือนกัน แล้วมันต่างกันยังไง

เอ้อแล้วถ้าไม่อยากให้มันโหลดส่วนนั้นๆ เลยล่ะมีวิธีไหม(ในกรณี hi5 ที่แก้โค้ดไม่ได้)
display : none มันแค่ซ่อน แต่ความอืดในการโหลดก็ยังมีอยู่ดี

ขอบคุณครับ

iannnnn · 13 ก.พ. 2009, 00:24 น.

ไม่มีครับ วิธีที่ซ่อนแบบไม่โหลดเลยน่ะ
เพราะ css มันเป็นส่วนออกแบบเฉยๆ
ไม่ได้ไปยุ่งกะโค้ดที่เกี่ยวกับการโหลดข้อมูลมาในเครื่องเรา

poloh · 13 ก.พ. 2009, 14:58 น.

เรื่อง display:none กับ visible:hidden
เท่าที่ผมเคยใช้นะ(ถ้าผิดพลาดไปขออภัยด้วยครับ)

visible:hidden มันจะซ่อนตัวไม่แสดงผลออกมา แต่ความกว้างกับความสูงของมันยังอยู่
แต่ถ้าเป็น display:none มันจะไม่มีอะไรเลย

JÎ›NÎ£ · 13 ก.พ. 2009, 15:56 น.

โอ้ว ขอบคุณครับ

กำลังสงสัยอยู่เหมือนกันเลย

ณัฏฐ์ · 13 ก.พ. 2009, 21:20 น.

ขอบคุณครับ

ej_sing · 03 เม.ย. 2009, 23:56 น.

สามารถทำให้ สูง 100% ทั้ง #leftColumn & #rightColumn ได้ไหมครับ
หากใช้แค่

โค้ด เลือกทั้งหมด


<body>
  <div id="warp-center">
      <div id="leftColumn"></div>
      <div id="rightColumn"></div>
  </div>
</body>

รบกวนชี้แนะด้วยนะครับ ขอบคุณครับ

// อันนี้ใช้วิธีหลอกด้วย background แทน แต่ div ตรงด้านขวา ไม่ยืดตาม

http://www.code-sucks.com/css%20layouts/faux-css-layouts/2-column-css-layouts/faux-7-2-col/

iannnnn · 04 เม.ย. 2009, 00:32 น.

ถ้าโจทย์ับังคับแค่ให้ใช้ html แค่นั้นแล้วแต่งด้วย css ล้วนๆ ละก็
หาวิธีไม่จอครับ

ตอนนี้ทำได้แค่กำหนดความสูงของมัน (หมายถึงช่องซ้ายกะขวา)
แต่พอเปลี่ยนเป็น 100% ปั๊บ พ่อหายเรียบเลย

โค้ด เลือกทั้งหมด

#warp-center {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background:#9C0;
	overflow:hidden;
}
#leftColumn, #rightColumn{
	width:500px;
	float:left;
	margin:5px;
	min-height: 800px;
	height: auto !important;
	height: 800px;
	background:#FFF;
}

ตอนนี้ทำแบบนี้อยู่ แต่หาวิธีให้มัน 100% ไม่ได้อ้ะ

นายโอ้เอ้ · 04 เม.ย. 2009, 01:14 น.

กำหนด height ให้ body มันน่าจะได้นะครับ
ผมลองแบบนี้มันก็เต็ม แต่ไม่รู้ว่าใช่ที่ต้องการรึเปล่า

โค้ด เลือกทั้งหมด


body {
height: 100%;
}
#warp-center {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background:#9C0;
	overflow:hidden;
}
#leftColumn, #rightColumn{
	width:500px;
	float:left;
	margin:5px;
	height: 100%;
	background:#FFF;
}

ej_sing · 04 เม.ย. 2009, 11:56 น.

อนุญาตให้ครอบ div เพิ่มได้ตามสมควรนะครับ

+

ของคุณโอ้เอ้ ใช้ได้กับ IE เลยนะครับ

+
แต่ opera กะ firefox ยังไม่ยืด

iannnnn · 04 เม.ย. 2009, 13:13 น.

ลองอันนี้ใช้ได้แล้วมั้ง

โค้ด เลือกทั้งหมด


<html>
<head>
	<style>
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#warp-center {
		margin: 0 auto;
		width: 1000px;
		height: 100%;
		background: #0cf;
		border:5px solid #F36;
	}
	#leftColumn, #rightColumn{
		float:left;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		display:inline;
	}
	#leftColumn{
		width:200px;
		background:#fc0;
	}
	#rightColumn{
		width:500px;
		background:#cf0;
	}
	</style>
</head>
<body>
	<div id="warp-center">
		<div id="leftColumn">left</div>
		<div id="rightColumn">right</div>
	</div>
</body>
</html>

แต่ยังไม่ได้แก้บั๊กกับ IE

นะครับ
ไอ้พวก Double Margin เนี่ย

ej_sing · 05 เม.ย. 2009, 12:55 น.

+

ใช้ดีกะ IE มากๆครับ แอนนนนน IE Friendly จริงๆ

แต่พอข้อมูลยาว firefox มันยืดแต่คอลั่มนั้นๆครับ
ลองปรับมั่วไป มั่วมา ปรากฏว่า .....

เละ ครับ

ยังตามล่าต่อไป .......

หนุ่ม · 06 เม.ย. 2009, 16:48 น.

ลองดูที่นี่ครับ
http://www.divland.com/blog/2007/09/10/css-layout-equal-height/

น่าจะใช้ได้นะ

iannnnn · 11 เม.ย. 2009, 16:46 น.

Selectable Image
http://dttvb.com/selectableimage.html

เลือกตัวอักษรจากรูปภาพได้ครับ

icez · 11 เม.ย. 2009, 23:50 น.

เจ้าไทมันจะเทพไปถึงไหน

iannnnn · 20 มิ.ย. 2009, 00:12 น.

ไปเจอมาจ้ะ

โค้ด เลือกทั้งหมด

.post img {
    max-width: 500px;
    height: auto;
}

จำกัดความกว้างของภาพ(ที่แปะในหน้าบล็อก) ไม่ให้กว้างเกินที่กำหนดไว้
กันหลุดขอบไง