CSS เด็ดๆ

จักรี · 04 มิ.ย. 2007, 02:11 น.

อะไรอยู่ใต้น้ำตรงคีย์บอร์ดเหรอครับ

iannnnn · 04 มิ.ย. 2007, 05:39 น.

http://www.hotdesign.com/seybold/everything.html
ทำไม Table Layout ถึง Stupid
(ไม่มีอะไรหรอก ไม่ต้องอ่านก็ได้ เห็นว่าฝรั่งท่านเขียน คนไทยก็ควรเชื่อตามท่านนะ)

ดูอันนี้ดีกว่า

http://blog.html.it/layoutgala/
รวมเลย์เอาต์ CSS แบบต่างๆ ที่ฮิตๆ
เอาไว้ให้โหลดแบบไม่ต้องมานั่งงมเอง {หมีโหด}

i-poon · 04 มิ.ย. 2007, 13:17 น.

ดูอันนี้ดีกว่า

http://blog.html.it/layoutgala/
รวมเลย์เอาต์ CSS แบบต่างๆ ที่ฮิตๆ
เอาไว้ให้โหลดแบบไม่ต้องมานั่งงมเอง {หมีโหด}

อ้างอิง

งมมาหมดแล้วพี่
เหลือตัวเดียว คือทำให้ div ลอยอยู่ตรงกลางจอ (กลางทั้งแนวตั้ง แนวนอน)
ที่เลิกใช้ div+css จัดหน้าเพราะอันนี้อันเดียวเลยจริงๆ

Layiji · 04 มิ.ย. 2007, 13:20 น.

http://www.intensivstation.ch/files/en_templates/temp11.html
กลางจอนี่ไงจ๊ะ

อ้างอิง#content {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}

แต่ช่วยอธิบายทีนะครับว่ามันเป็น iframe ตรงบรรทัดไหน

i-poon · 04 มิ.ย. 2007, 13:44 น.

อันนั้นเค้า Fix ขนาดเอาไว้ครับ เค้าเลยกำหนดให้ overflow: auto;
คือพอเนื้อหาข้างในมันล้นมันก็จะเติม scroll เข้าไปเอง ซึ่งถ้าเราเอาออก ผลก็จะเป็นแบบนี้ครับ

ป.ล. เทคนิคนี้น่าจะเอาไปทำอะไรเจ๋งๆ ได้เยอะแฮะ ขอบคุณป๋าเลย์ครับ

Layiji · 04 มิ.ย. 2007, 13:58 น.

margin:-100px 0px 0px -200px;

แสดงว่า
มันกลางที่บรรทัดนี้ใช่เปล่าครับ แล้ว - 100 กับ -200 แต่ทำไมมันยังอยู่กลาง อันนี้ผมงงจริงๆ
พอรู้ว่า -200 น่าจะเกี่ยวกับความสูง แต่ -100 นี่สิ

iannnnn · 04 มิ.ย. 2007, 14:08 น.

โน โน

มันกลางที่บรรทัดนี้ครับ

position:absolute; อันนี้แปลว่า ตูจะบอกพิกัดแบบ Pixel แล้วนะต่อไปนี้ (สำคัญ)
top: 50%; แล้วตำแหน่งเริ่มต้นของกล่องนี้คือ 50% ของความสูงของหน้า
left: 50%; และ 50% ของทางซ้าย

height:200px; ความสูงของกล่อง
width:400px; ความกว้างของกล่อง

ผลที่ได้คือมันจะเบี้ยวออกทางขวาล่างหน่อยนึงเพราะกล่องมันจะใหญ่ใช่ไหมครับ
ก็เลยต้องเอาไอ้นี่มาแก้

margin:-100px 0px 0px -200px;

การกำหนดระยะของ css เวลาเรียงกันสี่ตัวมันคือ บน ขวา ล่าง ซ้าย ครับ
-100 คือบอกให้ขึ้นบน 100 นะ
ส่วน -200 คือบอกให้ไปซ้าย 200 นะ
ซึ่งระยะดังกล่าวนี่คือครึ่งหนึ่งของความกว้างความสูงของกล่องพอดี

{หมีโหด}

ยุนเอ · 04 มิ.ย. 2007, 14:12 น.

โอเค ซึ้ง

นายโอ้เอ้ · 04 มิ.ย. 2007, 14:13 น.

ถูกต้องนะครับ ไปดูมาเพิ่งเก็ต แอนมาตอบก่อน

iannnnn · 04 มิ.ย. 2007, 14:16 น.

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
เอาไอ้นี่พรินต์มาแปะไว้หน้าคอมเลยครับ
ตอนที่ตูหัด css มึนๆ ก็เอาไอ้นี่แหละเสียบไว้ในกระจก มันบอกครบดี
เอาไว้กันงงได้นะ

today · 04 มิ.ย. 2007, 14:19 น.

Very nice and useful CSS sheet! Thanks!

Layiji · 06 มิ.ย. 2007, 11:38 น.

ลอง CSS ประสบปัญหากับ IE เช่นเคย
ไม่รู้แก้ยังไงครับ

ในff

ใน ie

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


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

#headerarea
{
	background-color: white;
	border-bottom: 1px solid gray;
}

#wrapper {
	min-height:100%;
	height:100%; !important;
	padding-left: 10px;
	padding-right: 10px;	
	width:932px;
	margin: 0 auto;	
	background-color: #CC0000;
	text-align:left;
	vertical-align:top;
	position:relative;
	z-index:800;
}
#mainmenu {
	float: left;
	position: relative;
	width: 630px;
	height: 24px; !important;
}
#searchmenu {
	float: right;
	height: 24px; !important;
	width: 250px;
	position: relative;
	text-align: right;
	right: 10px;
	vertical-align: middle;
}


#wrapperMenu {
	height: 24px; !important;
	width: 932px;
	position: relative;
	vertical-align: middle;
	background-image: url(../images/BGdash2.gif);
	background-repeat: repeat-x;
	float:left;
}
.searchInput {
	font-family: tahoma;
	font-size: 12px;
	color: #666666;
	background-color: #eaeaea;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.searchButton {
	font-family: tahoma;
	font-size: 12px;
	color: #666666;
}

#banner{
	width:932px;
	height:auto;
	margin:0;
	position:relative;
	float:left;
}
#headerarea{
	width:932px;
	padding:0;
	margin:0;
	position:relative;
	float:left;
	background-color:#FFFFFF;

	}
.smalltext {
	font-family: tahoma;
	font-size: 12px;
	color: #999999;
}

ตอนใช้

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

<body>
<div id="wrapper">
<div id="headerarea">
      <div id="banner"> <img src="รูป" >
      </div><br>

<div id="wrapperMenu">
	<div id="mainmenu"> ปุ่ม Link </div>					
	<form action="xxx" style="margin: 0pt;">
            <div id="searchmenu"> 
                <input name="search" value="" class="searchInput" size="20" type="text">
		<input name="submit" value="ค้นหา" class="searchButton" type="submit">
		<a href="xxx" class="smalltext">ขั้นสูง</a>
	        <input name="advanced" value="0" type="hidden">


				  
	</div></form>
				  
</div>
		
		
</div>	
		
    
</div>

</body>

ช่วยด้วยครับ
ไฟล์อยู่ด้านล่าง

i-poon · 06 มิ.ย. 2007, 15:50 น.

อ้างอิง#wrapperMenu {
   height: 24px; !important;
   width: 932px;
   position: relative;
   vertical-align: baseline;
   background-image: url(../images/BGdash2.gif);
   background-repeat: repeat-x;
   float:left;
}

#banner{
   width:932px;
   height:auto;
   margin:0;
   position:relative;
   float:left;
   vertical-align: baseline;
}

ลองดูครับป๋า

Layiji · 06 มิ.ย. 2007, 18:38 น.

โอ้ว ได้ล่ะครับ ปรับ top 2 อันก็ไม่ได้หรือนี่ต้อง Baseline เท่านั้น

Layiji · 06 มิ.ย. 2007, 19:45 น.

ขอเบิ้ลด้วยปัญหา IE อีกเช่นเคย

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

#wrapperAvatar {
	float: left;
	height: auto;
	width: 100%;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
#avatarArea {
	background-color: #CCCCCC;
	float: left;
	width: 450px;
	margin: 10px 0px 20px 20px;
	min-height: 100px;
!important;
	height:auto;
	padding: 5px;
}

ตอนใช้นี่ผม
ห่อใหญ่ แล้ว เอาซองเล็กยัดอีกที

CSS เด็ดๆ

today