CSS เด็ดๆ

IM · 02 ก.ย. 2009, 15:05 น.

สงสัยอย่างแรก

มันเขียนว่าอะไรบ้าง

JÎ›NÎ£ · 02 ก.ย. 2009, 16:12 น.

ใช้ CSS กำหนดสีเวลาปาดตัวหนังสือได้ครับ

Before

After

iannnnn · 02 ก.ย. 2009, 17:08 น.

อันนี้เมพมาก

กันย์ · 02 ก.ย. 2009, 18:07 น.

เมพทากๆ

Bellbells · 02 ก.ย. 2009, 18:29 น.

โอ้ววไๆๆๆๆๆ

iannnnn · 02 ก.ย. 2009, 20:23 น.

เมพแค่ไหนก็ไม่รอดเมื่อเจอไออี

กันย์ · 02 ก.ย. 2009, 21:05 น.

Backgrounds In CSS: Everything You Need To Know
http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/

Bellbells · 02 ก.ย. 2009, 21:12 น.

เจ๋ง

NooKSTYLE · 03 ก.ย. 2009, 04:57 น.

อ้างคำพูดจาก: กันย์ เมื่อ 02 ก.ย. 2009, 21:05 น.
Backgrounds In CSS: Everything You Need To Know
http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/

maintenance

IM · 03 ก.ย. 2009, 08:37 น.

อ้างคำพูดจาก: นุ้กสไตล์ เมื่อ 03 ก.ย. 2009, 04:57 น.

maintenance

เจ๋ง

เดอะบุ๋ม · 03 ก.ย. 2009, 16:11 น.

พี่แอนกับพี่เจนเจ๋งมาก

ขอบคุณค่า

Layiji · 03 ก.ย. 2009, 23:03 น.

ช่วยด้วยครับ

ผมอยากได้แบบนี้ครับ แต่ในภาพนี้ตรง entry ผมต้องเคาะ enter จนสุดหน้า

ถ้าไม่มี enter จะทับกันแบบนี้ครับ

เหมือนว่าตรง entry มันไม่สูงตามไปด้วย ทำยังไงดีครับ

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#pic {
	margin: 0px 20px 0 0;
	border: 1px solid #999;
	position: relative;
	padding: 10px;
	float: left;
	display:block;
	clear:both;
	height:auto;
}
.post {

}



.post .title {

	margin: 0;

	border-bottom: 1px dashed #D6C9BF;

      margin-top: 15px;

      font: 20px tahoma;

      color: #737373;

}



.post h2.title {

	height: 40px;

      font-size: 2.4em;

	padding: 0px 0px 5px 0px;   

      margin: 20px 50px 0px 10px;

}



.post p {

	 font: 12px tahoma;

       color: #737373;

       padding-left: 0px;

       padding-right: 20px;

}










.entry {
	height:auto;
	font:tahoma;
	font-size:12px;
	margin: 0px;
	padding: 10px 10px;
	clear:both

}



.meta {

	height: 35px;

	padding: 15px 0 0 30px; 


      background: url(images/post_icon.gif) no-repeat left;

      background-position: 10px;
	  position:relative;

}



#wrap
{
	width: 500px;
	position:relative;
	float:left;
	
	}
-->
</style>
</head>

<body>
<div id="wrap">
     
     <div class="post">

      <h2 class="title">หัวข้อข่าว</h2>

      <div class="entry">			

      <div id="pic"><img src="http://www.varasarn.net/wp-content/uploads/2009/09/rn.jpg" alt="rn" width="150" height="150" /></div> 
      <p>หลังจากที่มีน้องๆให้ความสนใจกันมากมาย นับในบอร์ดได้ 2 คนถ้วน
        ค่ายรังนกครั้งที่ 3 ก็ได้เริ่มเปิดรับสมัครแล้ว      </p>
      </div>
      <div class="meta">Filed under: หมวด | Posted on 12-12-2009  by layiji | เม้น 20 </div>

		</div>
        
         <div class="post">

      <h2 class="title">หัวข้อข่าว</h2>
	</div>
</div>
</body>
</html>

Rabbitinblack · 03 ก.ย. 2009, 23:09 น.

พี่เลย์กำหนด height ให้กับ class entry ได้นิครับ

ผมลองกำหนดให้ class entry มี height: 200px;

ก็ได้ตามที่พี่เลย์ต้องการนะครับ

iannnnn · 03 ก.ย. 2009, 23:21 น.

จริงๆ จะทำยังงั้นก็ได้
แต่ถ้าแบบนั้นมันจะติดปัญหาอื่นๆ ที่ตามมาอีก
(อาทิ เวลาย่อขยายหน้า หรือผู้ใช้กำหนดขนาดฟอนต์อื่นๆ หรือดูในสื่ออื่นๆ ที่ไม่ใช่พีซี ฯลฯ)

ดังนั้นวิธีแก้คือเวลาพี่เลย์เขียนไอ้พวกนี้ ลองจัดย่อหน้าให้มันสวยๆ
จะได้อ่านง่ายขึ้น และเช็กง่ายขึ้นครับ

อ้ะ ตูแก้มาตามนี้

1. ย้าย .meta ออกมาจาก .post
2. ใส่ css เพิ่มลงไปที่ .post ว่า overflow:hidden;

เท่านี้แหละจ้ะ
อ้อ ในไฟล์แนบนี่มีเน้นสีนิดนึงนะครับ จะได้รู้ว่ามันหลุดลงไปข้างล่างแล้ว

ป.ล.ทั้งคู่เลย วันเรียน css ไม่ยอมมมากัน

icez · 03 ก.ย. 2009, 23:25 น.

.meta {

height: 35px;

padding: 15px 0 0 30px;

background: url(images/post_icon.gif) no-repeat left;

ใส่ clear:both; เพิ่มเข้าไปเลยครับ