ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programming[CSS] ทำให้ความกว้างขยายตามขนาดหน้าจอได้หรือเปล่าครับ
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: [CSS] ทำให้ความกว้างขยายตามขนาดหน้าจอได้หรือเปล่าครับ  (อ่าน 7360 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
tamiyalagu
คนรักเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 191



ดูรายละเอียด
« เมื่อ: 30 เมษายน 2010, 09:31:24 »
ปกติทำแต่เว็บแบบกำหนดขนาด หรือถ้าจะให้ขยายตามจอก็กำหนดเป็น % ใหหมด
แต่คราวนี้จะให้ เมนูด้านซ้ายกว้างขนาด 200px พอดี ส่วนที่เหลือด้านขวาเป็นเนื้องหาที่ขยายตามความกว้างหน้าจอ
นั่งทำตั้งนาน มันทำไม่ได้แฮะ ใครพอแนะนำได้มั่งครับ มันใช้ div ทำได้หรือเปล่า  Huh?
« แก้ไขครั้งสุดท้าย: 30 เมษายน 2010, 09:37:11 โดย tamiyalagu » บันทึกการเข้า
Condothai
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 56
ออฟไลน์ ออฟไลน์

กระทู้: 1,025



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 30 เมษายน 2010, 09:42:33 »
ก็ใส่ wrapper ให้เป็น 100% ส่วน left column ก็ fix ไว้ที่ 200px เนื้อหาก็จะย่อขยายอัตโนมัตเองครับ   Tongue
บันทึกการเข้า
จำหน่ายสินค้าไอที
tamiyalagu
คนรักเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 191



ดูรายละเอียด
« ตอบ #2 เมื่อ: 30 เมษายน 2010, 10:00:03 »
อ้างจาก: Condothai ที่ 30 เมษายน 2010, 09:42:33
ก็ใส่ wrapper ให้เป็น 100% ส่วน left column ก็ fix ไว้ที่ 200px เนื้อหาก็จะย่อขยายอัตโนมัตเองครับ   Tongue

ทำแบบนั้น แล้วเนื้อหามันไม่ไปอยู่ใต้เมนูเหรอครับ ถ้าเนื้อหามันเยอะกว่าหนะ
หรือผมเข้าใจอะไรผิด มีตัวอย่างโค้ดมั๊ยครับ
บันทึกการเข้า
GillBate
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 160
ออฟไลน์ ออฟไลน์

กระทู้: 1,236



ดูรายละเอียด
« ตอบ #3 เมื่อ: 30 เมษายน 2010, 10:19:56 »
 Tongue div อันนึงเป็นเมนู div อีกอันเเป้น content แล้วกำหนดตำแหน่งให้มันครับ เด๋วมันขึ้นไปเอง
บันทึกการเข้า
gignlight
ก๊วนเสียว
*

พลังน้ำใจ: 42
ออฟไลน์ ออฟไลน์

กระทู้: 441



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 30 เมษายน 2010, 10:27:12 »
ลองประมาณนี้นะ

<div (อันนี้ กว้าง 100% หรือกี่ % ก็ว่าไป>
   <div float left 200 px></div>
   <div float right 100%></div>
</div>  
  
บันทึกการเข้า
3D LED HDTV DLP HDTV Best Baby toys Store US Shipping Shop DLP HDTV Prices
tamiyalagu
คนรักเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 191



ดูรายละเอียด
« ตอบ #5 เมื่อ: 30 เมษายน 2010, 10:36:43 »
อ้างจาก: gignlight ที่ 30 เมษายน 2010, 10:27:12
ลองประมาณนี้นะ

<div (อันนี้ กว้าง 100% หรือกี่ % ก็ว่าไป>
   <div float left 200 px></div>
   <div float right 100%></div>
</div>  
  

แบบนั้นตัว ขวามันจะลงมาอยู่ข้างใต้ครับ
ลองอยู่นานละ ผมว่ามันคงทำไม่ได้ น่าจะเป็นข้อจำกัดของ css
ไม่น่าเชื่อว่าเรื่องง่ายๆแบบนี้มันทำไม่ได้ ต้องกลับไปใช้ table หรือนี่    -"-

พอจะเจอลู่ทางแล้ว ต้องใช้ table-layout: fixed
เดี๋ยวถ้าทำได้จะมาบอก เผื่อคนอื่นอยากรู้
แต่ถ้าใครรู้แล้ว มาช่วยบอกผมทีจะได้ไม่ต้องเสียเวลางม
« แก้ไขครั้งสุดท้าย: 30 เมษายน 2010, 10:52:00 โดย tamiyalagu » บันทึกการเข้า
whitecross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 129
ออฟไลน์ ออฟไลน์

กระทู้: 2,063



ดูรายละเอียด
« ตอบ #6 เมื่อ: 30 เมษายน 2010, 10:50:24 »
Tag Div ปกติมันจะ 100% อยู่แล้วครับ ส่วนข้อมูลอื่นๆทั้งหมดใน CSS ก็กำหนดเป็น % เพื่อที่มันจะได้ขยายตามความกว้างนั่นเอง

แต่ส่วนตัวแล้วแนะนำให้ Fix ไว้ก็ดีนะครับ เพราะถ้าไม่ชำนาญ อาจจะทำให้ข้อมูลส่วนอื่นๆ ห่างกันจนไม่สวยก็เป็นได้
บันทึกการเข้า
บริการออกแบบเว็บไซต์ / PSD 2 HTML / Tableless Generation / W3C Validation / Graphic Design
ติดต่อสอบถามข้อมูลต่างๆทางอีเมล์ได้เลยครับผม...
deadclosed
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 133
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 30 เมษายน 2010, 11:09:19 »
ถ้าDiv ซ้าย fix เป็น 200 px
แล้วก็สั่งให้มัน float : left; ไป

ส่วนด้านขวา ก็สั่งให้มันกว้างเหลือแค่ 100%-200px
เหลือเท่าไหรนั่นก็เดา เอา
แล้วสั่งให้มัน float:right;

ถ้าไม่ได้อีก
ก็สั่งให้ ทั้งซ้ายแล้วขวา
เป็น position: absolube;
ซ้าย 200px;

ขวา 100%
แล้วก็ padding-left: 200px; ไปเลย Tongue
บันทึกการเข้า
tamiyalagu
คนรักเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 191



ดูรายละเอียด
« ตอบ #8 เมื่อ: 30 เมษายน 2010, 11:26:37 »
ถ้าตั้งไว้ 100% แล้ว padding ไป 200 มันก็จะเกินขอบจอไป 200px ครับ
บันทึกการเข้า
deadclosed
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 133
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 30 เมษายน 2010, 11:29:29 »
อ้างจาก: tamiyalagu ที่ 30 เมษายน 2010, 11:26:37
ถ้าตั้งไว้ 100% แล้ว padding ไป 200 มันก็จะเกินขอบจอไป 200px ครับ

จริงด้วยครับ
ผมแค่คิดว่าทำได้ แต่อย่าทำเลยครับ ผิดหลักโครงสร้างของ cssหมด Cry
บันทึกการเข้า
gignlight
ก๊วนเสียว
*

พลังน้ำใจ: 42
ออฟไลน์ ออฟไลน์

กระทู้: 441



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 30 เมษายน 2010, 11:50:41 »
แล้วถ้า
<div 100%>
<div floatleft 200px></div>
<div margin-left 200px></div> // อันนี้ไม่ต้อง float right
</div>
« แก้ไขครั้งสุดท้าย: 30 เมษายน 2010, 11:56:38 โดย gignlight » บันทึกการเข้า
3D LED HDTV DLP HDTV Best Baby toys Store US Shipping Shop DLP HDTV Prices
GillBate
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 160
ออฟไลน์ ออฟไลน์

กระทู้: 1,236



ดูรายละเอียด
« ตอบ #11 เมื่อ: 30 เมษายน 2010, 11:57:52 »
 Tongue จะกำหนด CSS ใน div ต้องใส่แบบนี้ครับ <div style="width:100%; top:50px;"> ประมาณนี้ ถ้าไม่ใส่ style มันไม่ทำงานครับ
บันทึกการเข้า
gignlight
ก๊วนเสียว
*

พลังน้ำใจ: 42
ออฟไลน์ ออฟไลน์

กระทู้: 441



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 30 เมษายน 2010, 12:12:15 »
<html>
<head>
<style type="text/css">
#a
{
width:100%;
margin:0 0;
padding:15px;
}
.b
{
float:left;
width:120px;
margin:0 0;
padding:15px;
border:1px solid black;
}
.c
{
margin-left: 152px;
padding:15px;
border:1px solid black;
}
</style>
</head>

<body>
<div id="a"
<div class="b">
<img src="logocss.gif" width="95" height="84" /><br />
CSS is fun!
</div>
<div class="c">
<img src="logocss.gif" width="95" height="84" /><br />
This is some text. This is some text. This is some text.
ทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษรทดสอบตัวอักษร
</div>
</div>

</body>

</html>

ลองดูนะครับ
บันทึกการเข้า
3D LED HDTV DLP HDTV Best Baby toys Store US Shipping Shop DLP HDTV Prices
tamiyalagu
คนรักเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 191



ดูรายละเอียด
« ตอบ #13 เมื่อ: 30 เมษายน 2010, 12:16:46 »
อ้างจาก: gignlight ที่ 30 เมษายน 2010, 11:50:41
แล้วถ้า
<div 100%>
<div floatleft 200px></div>
<div margin-left 200px></div> // อันนี้ไม่ต้อง float right
</div>

 Shocked เย้ยยย วิธี ง่ายๆแบบนี้ได้ผลด้วยอ่ะ ไม่อยากจะเชื่อ

ผมนั่งทำอยู่เป็นชั่วโมงๆ ทำไมตอนนั้นมันไม่ได้

พยายามไปงมเรื่อง position: display: มาใช้ก็ยังไม่ได้

ขอบคุณมากเลยครับ เยี่ยมจริงๆ
บันทึกการเข้า
therichestseo
คนรักเสียว
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 109



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 27 กันยายน 2017, 07:23:09 »
 wanwan017 wanwan017 wanwan017
บันทึกการเข้า
Sozity Shop
Masterpiece & Unlimited System
SME@UBU
Digital Business & Technology
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: