|
 |
| |
เขียน css เป็นกรอบสี่เหลี่ยมมีข้อความอยู่ข้างในจะทำยังไงให้มันยาวลงมาเองอัตโนมัติ |
| |
 |
|
|
 |
 |
|
ก็ไม่ต้องกำหนดความสูงสิครับ
แบบนี้มันก็ดันลงมาให้อัตโนมัติอยู่แล้วครับ
<div>test</div>
|
ประวัติการแก้ไข
2011-12-15 14:13:27
 |
 |
 |
 |
| Date :
2011-12-15 14:12:13 |
By :
Dragons_first |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : Dragons_first เมื่อวันที่ 2011-12-15 14:12:13
รายละเอียดของการตอบ ::
แหม คุณอ้นคุงอีกแว้ววันนี้ อิอิอิอิ ขอบคุณครับ
ถ้าเป็น code ผม ก็ไม่ต้องกำหนด height ใช่ไหมครับ
.wrap{
margin:0px auto;
position:relative;
margin-top:1px;
border: 0px solid #000;
text-align: center;
width: 980px;
height:100em; //------------------------------เอาออกใช่ไหมครับผม
-webkit-border-radius: 3px;
-moz-border-radius: 8px;
border-radius: 0px;
-webkit-box-shadow: #fff 0px 2px 3px;
-moz-box-shadow: #fff 0px 2px 3px;
box-shadow:0 7px 10px #fff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#FFCC66));
-pie-background: linear-gradient(#FFF, #FFCC66);
behavior: url(PIE.htc);
}
|
| |
|
|
| |
| Date :
2011-12-15 14:19:35 |
By :
auikung |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไม่ work ครับ สำหรับ internet explorer อยากรู้วิธีเหมือนกัน ให้ยาวลงทุก web browserครับ โดยที่ไม่ใช้ height 100% มีใครรู้ไหมครับ
|
ประวัติการแก้ไข
2011-12-15 14:24:59
| |
|
|
| |
| Date :
2011-12-15 14:24:21 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าผมจำไม่ผิดถ้าจะใช้ height 100%ใน div ต้องกำหนดให้ html{height: 100%} ด้วย แต่ผมเคยทำแล้วมันยุ่งยากมาก เพราะถ้าคุณจะทำ padding หรือ margin ใน content มันจะส่งผลให้ทุกอย่างใน หน้าคุณดูผิดเพี้ยนไปหมดเลย ประสบการณ์ผมนะ ผมเลยอยากรู้วิธีอื่นอยู่เหมือนกันให้ ยาวลงมาและ work กับทุก browser
|
| |
|
|
| |
| Date :
2011-12-15 14:45:42 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โทษทีครับ จำผิดไม่ใช่ html แต่เป้น body แต่จะเห็นใช่ไหมครับ ถ้าใส่ Border ลงไป page จะยาวเกิด 100% คือ(100%+2px) ทำให้หน้า มี scrollbar ถ้ามำ margin หรือ padding top ก็จะทำให้ยาวกว่า 100% มากขึ้นไปอีก ปัญหามันอยู่ตรงนี้แหละครับเวลาใช้ height 100%
Code (PHP)
<!DOCTYPE html >
<html>
<head>
<style type="text/css" media="screen">
*{
padding:0;
margin:0;
}
body {
height:100%;
}
#left {
position:absolute;
width:200px;
height:100%;
background:#eaeaea;
border:1px solid black;
}
</style>
</head>
<body>
<div id="left">
</div>
</body>
</html>
|
ประวัติการแก้ไข
2011-12-15 14:59:23
2011-12-15 15:03:20
2011-12-15 15:05:45
| |
|
|
| |
| Date :
2011-12-15 14:55:54 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
<div style="display:block; border:#000 solid 1px;">
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
</div>
แบบนี้ หรือป่าวอ่ะ
|
| |
|
|
| |
| Date :
2011-12-15 14:57:36 |
By :
kasilot |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
กำหนด position:relative; นะครับ มันจะได้ดันลงมา
|
| |
|
|
| |
| Date :
2011-12-15 15:21:03 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอบความคิดเห็นที่ : 11 เขียนโดย : Dragons_first เมื่อวันที่ 2011-12-15 15:23:45
รายละเอียดของการตอบ ::
ผมว่า เราเลิกพูดถึง internet exploror กันดีกว่าครับ เพราะว่ามันด้อยพัฒนาไปแล้วครับ " โคตรหล่อเลย อิอิอิ "
คือ ยังงี่ครับ ผมใช้ div .wrapเป็นกรอบใหญ่คลุมกรอกทั้งหมด ที่นี่มันจะมีกล่องข้อความอยู่ 1 อันล่างสุด ผมจะใส่ code คอมเม้น facebook ลงไป ถ้ามีคนมาเม้นเนี่ยก็อยากให้ .wrapper เนี่ย ยาวตามด้วยมันพอจะทำได้ป่าวครับ
.wrap{
margin:0px auto;
position:relative;
margin-top:1px;
border: 0px solid #000;
text-align: center;
width: 980px;
height:100em;
-webkit-border-radius: 3px;
-moz-border-radius: 8px;
border-radius: 0px;
-webkit-box-shadow: #fff 0px 2px 3px;
-moz-box-shadow: #fff 0px 2px 3px;
box-shadow:0 7px 10px #fff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#FFCC66));
-pie-background: linear-gradient(#FFF, #FFCC66);
behavior: url(PIE.htc);
}
|
| |
|
|
| |
| Date :
2011-12-15 15:31:24 |
By :
auikung |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอบความคิดเห็นที่ : 13 เขียนโดย : Dragons_first เมื่อวันที่ 2011-12-15 15:54:06
รายละเอียดของการตอบ ::
ตัวนี้ครับ
.rowtitle2{
float:left;
width:470px;
height: 300px;
margin-top: 0px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 0px;
behavior: url(PIE.htc);
}
ถ้าผมเดาไม่ผิดความเป็นไปได้คงไม่มีเพราะถ้า .rowtitle2 มันยาวลงมา แต่ .wrap ที่คลุม .rowtitle2 เท่าเดิมก็มีค่าเท่ากันใช่ไหมครับมันก็จะล้นเหมือนเดิม
|
| |
|
|
| |
| Date :
2011-12-15 16:06:20 |
By :
auikung |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
วิธีแก้ปัญหาแบบง่ายๆเลยนะครับในแท็ก
<div class="rowtitle2">ข้อความ</div
ให้เปลี่ยนเป็นแบบนี้
<div class="rowtitle2">
<teble><tr>
<td>ข้อความ</td>
</tr>
</table>
</div>
และ height: 300px; ก็ไม่ต้องไปใส่ครับ
ลองดูแบบนี้สิครับ
|
ประวัติการแก้ไข
2011-12-15 16:11:51
| |
|
|
| |
| Date :
2011-12-15 16:10:27 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าไม่กำหนดมันก็จะมีขนาดเท่ากับ rowtitle2 หรือรูปภาพด้านใน ที่มีขนาดสูงที่สุด
|
| |
|
|
| |
| Date :
2011-12-15 16:32:24 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอบความคิดเห็นที่ : 11 เขียนโดย : Dragons_first เมื่อวันที่ 2011-12-15 15:23:45
รายละเอียดของการตอบ ::
คุณครับ ไม่รู้เรื่องเลยเหรอครับ
ว่าคนทัั้งโลก ใช้ IE มากกว่า firefox นะครับ
ที่ใช้ firefoxกันเยอะก็เห็นได้แค่ใน สถิติ จาก w3schools ที่ทำการ นับคนที่เข้าชมเว็ป w3school ว่าใช้ browser อะไรบ้าง ซึ่งส่วนใหญ่แล้วคนที่เข้าชมเว็ปนี้ก็ มีความรู้เรื่องคอมทั้งนั้น แน่นอนว่าคนกลุ่มนี้จะเลือกใช้ firefox มากกว่า
http://www.w3schools.com/browsers/browsers_stats.asp
แต่ถ้าดูแบบสากลของคนทุกระดับ ทุกอายุทั่วโลกแล้ว IE มาเป็นที่ 1 ครับ
หลักฐานครับ
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
ie 32%
firefox 23%
http://www.w3counter.com/globalstats.php
ie 33%
firefox 26%
คุณพูดมาคิดไปเองทั้งนั้นอะ
ไม่รู้เรื่องเลย
เพราะหลักฐานมันก็โจ่งแจ้งอย่างงั้น ศึกษาบ้างครับ
|
ประวัติการแก้ไข
2011-12-15 20:16:00
2011-12-15 20:18:03
2011-12-15 20:21:07
| |
|
|
| |
| Date :
2011-12-15 20:15:12 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
min-height:100em 
http://reference.sitepoint.com/css/min-height
ถ้าอยากให้ใช้ได้กับ ie6 ก็ใช้ ie7.js 
http://ie7-js.googlecode.com/svn/test/index.html
|
| |
|
|
| |
| Date :
2011-12-15 20:43:19 |
By :
num |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แต่ถ้าทำเว็ปแล้ว ไม่คำนึงถึง ทุก ie นี่ ไม่ได้เลยนะครับ เพราะถ้าไมทำ เว็ปคุณจะกลายเป็นสองมาตราฐาน อาจจะดูแดแต่ใน firefox แต่ถึงขั้นห่วยเลยก็ว่าได้ใน ie ทำให้ลูกค้าหรือผู้เข้าชมตำหนิเอาได้ แล้วพอถึงตอนนั้นจะมาแก้ตัวว่า ie มันด้อยพัฒนาไม่ได้นะครับ เพียงแต่โครงสร้าง browser มันไม่เหมือนกัน
ถ้าจะทำให้ดูดีในทุก browser ก็ทำได้อยู่แล้วแต่ขึ้นอยู่กับความตั้งใจของเรา webprogrammer เองต่างหากครับ
|
| |
|
|
| |
| Date :
2011-12-15 20:46:14 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมเคยคิดเล่นๆนะ น่าจะมีสักคนทำโปรแกรมที่สามารถอ่าน css หนึ่งไฟล์ได้และสร้าง css ขึ้นมาหลายๆไฟล์ให้เข้ากับทุก browser
โดยที่ถ้าสมมุติคุณ พัฒนาเว็ปคุณอยู่ด้วย firefox พอเสร์จงาน คุณแค่ run ไอโปรแกรมตัวนี้ พอ run เสร็จมันจะสร้าง css ให้คุณเพิ่มอีก 4ตัวเลยทีเดียว สำหรับ IE, opera, chrome, safari
ตัดความยุ่งยากทุกสิ่งทุกอย่าง สบายเลย
ถ้ามีใครทำได้นะ ผมว่าขายได้เงินเยอะเลย
|
| |
|
|
| |
| Date :
2011-12-16 16:03:59 |
By :
thaicloud |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อื้ม 
|
| |
|
|
| |
| Date :
2011-12-16 17:30:49 |
By :
kalamell |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เข้ามาดู......................เทพคุยกัน.......คุยอะไรไม่เห็นจะรู้เรื่องเลย 
|
| |
|
|
| |
| Date :
2011-12-16 17:35:34 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถึงไหนแล้วครับ แซวเล่นนะครับ :)
ถึงคุณ auikung ไม่รู้ผมเข้าใจคำถามของคุณถูกหรือเปล่านะ ไม่แน่ใจ ว่าต้องการให้ กรอบยืดหด แปรผันตามเนื้อหา หรือว่า ให้ยาวเท่ากันหมดแบบตรึง
code ด้านล่าง แบบแปรผันตามเนื้อหานะครับ
ผมทดสอบกับ IE8(เท่าที่มีในเครื่อง), Firefox 8.0.1, Chrome 15.กว่าๆ(เลขหลายตัวจำไม่ได้)
Code (PHP)
<!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>peterXP</title>
<style type="text/css">
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea, p,blockquote,th,td{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;border-style:none;margin:0;padding:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0}
li{list-style:none}
caption,th{text-align:left}
a img{border:none}
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1% }
.clearfix {display:block;}
.clear{clear:left}
.hide{display:none}
/* end reset */
#main{
margin:0px auto;
padding:0px;
width:100%;
}
#content_left{
width:300px;
position:relative;
margin:0px;
padding:5px 10px;
float:left;
border:solid 1px #f00;
}
#content_right{
width:300px;
position:relative;
margin:0px 0px 0px 20px;
padding:5px 10px;
float:left;
border:solid 1px #00f;
}
</style>
</head>
<body>
<div id="main">
<div id="content_left">
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16
</div>
<div id="content_right">
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16<br/></br>
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16<br/></br>
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16<br/></br>
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16<br/></br>
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16<br/></br>
เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16<br/></br>
</div>
</div>
</body>
</html>
|
ประวัติการแก้ไข
2011-12-16 22:33:31
| |
|
|
| |
| Date :
2011-12-16 22:16:55 |
By :
peterxp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อีกแบบ
Code (PHP)
<!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></title>
<style type="text/css">
div#mylayout_1{
display:block;
width:100px;
border:1px solid #09C;
background-color:#FCC;
}
div#mylayout_2{
display:block;
width:100px;
border:1px solid #09C;
background-color:#CFC;
word-wrap:break-word;
}
</style>
</head>
<body>
<div id="mylayout_1">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>
<br />
<br />
<div id="mylayout_2">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-09-26 09:55:46 |
By :
okboou |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
http://www.w3counter.com/globalstats.php
ลองดูใหม่ อดีตที่เคยพูดถึงอนาคต อนาคตคือปัจจุบันนี้
ie ก็ ie ต่อแล้วกัน
|
| |
|
|
| |
| Date :
2015-11-06 09:10:16 |
By :
kokun |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
