CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)

[เป็นติ่งไรเนี่ย]

ต้องการสร้างเลเอาย์ css เเบบภาพข้างบน จากรูปนะครับ คือต้องการสร้าง
1.   head ให้ width ขยายอัตโนมัติ 100%
2.   body  ให้มันอยู่กลางจอ ความกว้าง 990 px
3.   footer ให้ความกว้างเหมือนกันกับเเฮด

ผมลองทําเเบบโค๊ดข้างล่าง มันมั่วและหลุด  ขอทราบ
ของเเท้มันต้องเขียนยังไงคับ  จากผู้น้อย

* { padding: 0; margin: 0; }

#header {
   width: 100%;
}
#contianer {
   width: 990px;
   margin-right: auto;
   margin-left: auto;
}

#footer {
   width: 100%px;
}

[Normaderm]

นับยังไงก็ สองสี อะครับ

แซวเล่นเน้อ 

[g-ji]

ต้องการสร้างเลเอาย์ css เเบบภาพข้างบน จากรูปนะครับ คือต้องการสร้าง
1.   head ให้ width ขยายอัตโนมัติ 100%
2.   body  ให้มันอยู่กลางจอ ความกว้าง 990 px
3.   footer ให้ความกว้างเหมือนกันกับเเฮด

ผมลองทําเเบบโค๊ดข้างล่าง มันมั่วและหลุด  ขอทราบ
ของเเท้มันต้องเขียนยังไงคับ  จากผู้น้อย

* { padding: 0; margin: 0; }

#header {
   width: 100%;
}
#contianer {
   width: 990px;
   margin-right: auto;
   margin-left: auto;
}

#footer {
   width: 100%px;
}

มันหลุดยัีงไงหว่า

โค้ด เลือก ขยาย


* { padding: 0; margin: 0; }

#header,#footer {
width: 100%;
margin:0 auto;

}
#contianer {
width: 990px;
margin:0 auto;
}


}

[เป็นติ่งไรเนี่ย]

คือทดสอบดูบนจอ 22inch ความละเอียดไกล้ๆสองพัน
หรือ2000 ขึ้น  มันไม่ขยายร้อยเปอร์เซ็นต์สุดขอบจอสองด้าน
คับผม

[เป็นติ่งไรเนี่ย]

พอสร้างของเยอะๆ ตรง body สร้าง class .here กับ .navi
คุมบอดี้ทั้งหมดด้วย #container  แล้ว
มันไม่มากลางจอ
เเบบโค๊คข้างล่างมันชิดซ้าย ไม่ทราบต้องทําไงครับ

โค้ด เลือก ขยาย

* { padding: 0; margin: 0; }
body {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
}
#head {
width: 100%;
height: 55px;
}
#container {
margin-right: auto;
margin-left: auto;
}
.here {
height: 66px;
width: 990px;
}
.navi {
height: 66px;
width: 990px;
}
#content {
height: 444px;
width: 990px;
}
#.left {
height: 444px;
width: 655px;
float: left;
}
#.light {
height: 444px;
width: 335px;
float: left;
}
#footer {
width: 100%;
float: left;
background-color: #9CF;
height: 55px;
clear: both;
}

html

โค้ด เลือก ขยาย

<div id="head"></div>
<div id="container">
 <div class="here"></div>
 <div class="navi"></div>
 <div id="content">
    <div class="left"></div>
    <div class="light"></div>
 </div>
</div>
<div id="footer"></div>

[newie]

โค้ด เลือก ขยาย


#.left {
height: 444px;
width: 655px;
float: left;
}
#.light {
height: 444px;
width: 335px;
float: left;
}



เอา#ออก

[เป็นติ่งไรเนี่ย]

เอา#ออก

ฮ่า ใส่ผิด ขออาภัยรีบไปหน่อย
เอาออกเเล้ว ก็ยังไม่มาครับ

[newie]

โค้ด เลือก ขยาย


* { padding: 0; margin: 0; }
body {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
}
#head {
width: 100%;
height: 55px;
background-color:#333333;
}
#container {
margin-right: auto;
margin-left: auto;
background-color:#999999;
height:auto;
}
.here, .navi  {
height: 66px;
width: 990px;
margin:0 auto;
background-color:#0099FF;
}
.navi  {
background-color:#00FFCC;

}
#content {
height: 444px;
width: 990px;
margin:0 auto;
}
.left {
height: 444px;
width: 655px;
float: left;
background-color:#FF6600
}
.light {
height: 444px;
width: 335px;
float: left;
background-color:#99CC99
}
#footer {
width: 100%;
background-color: #9CF;
height: 55px;
}



ใส่ background-color เอาไว้แยกสีดูแต่ละส่วน  
อย่าลืมเอาออกนะครับ  :

[เป็นติ่งไรเนี่ย]

ใส่ background-color เอาไว้แยกสีดูแต่ละส่วน  
อย่าลืมเอาออกนะครับ  :

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

[gotdwata]

ลองแบบนี้ดูครับ

โค้ด เลือก ขยาย


<div id="head"></div>

<div id="wrap"><div id="container">
     ...
     ...
     ...

</div></div>

<div id="foot"></div>


โค้ด เลือก ขยาย


body { margin:0; padding:0; }

#head { clear:both; width:100%; min-width:990px; }

#wrap { clear:both; margin:0 auto; width:990px; }
     #container { float:left; width:990px; }
          ...
          ...
          ...

#footer { clear:both; width:100%; min-width:990px; }


ตรง min-width น่าจะไม่ต้องใส่ก็ได้ ผมไม่แน่ใจพอดีเขียนไว้นานแล้วลืมไปแล้ว

อันนี้ตัวอย่างเว็บ

โค้ด เลือก ขยาย

http://www.mp3-player-store.com


เพิ่มเติม
วิธีแก้ float แล้วมันชิดซ้าย
ให้เพิ่ม <div id="wrap"> หุ้ม container ไว้
จัด wrap ให้ลอยตรงกลาง
ให้ container float:left มันจะลอยชิดซ้ายติดอยู่ใน wrap ที่ลอยตรงกลาง

พอเห็นภาพมั้ยครับ 

[Rx78]

Thank you Krub

[เป็นติ่งไรเนี่ย]

เพิ่มเติมครับผม
ตอนนี้ ผมทํางงานอยู่ที่ความละเอียด
หน้าจอ 1280x800 ทุกอย่างมันก็ปกติดีคับผม
ตอนที่เราใส่ tag เพิ่มเติมลงในส่วนของ head
div class:logo
div class:search 
div class:logout

.logo {
   height: 59px;
   width: 142px;
   float: left;
}

.search {
   height: 59px;
           width: 650px;
   float: left;
}
.logout {
   height: 59px;
           width: 222px;
   float: left;
}

จากโค๊ดข้างบนนะครับ มันก็จะได้ตําเเหน่งตามที่เราต้องการ
ในหน้าจอ 1280x800
เเต่พอเราปรับความละเอียดหน้าจอมาที่ 1024x768
tag ที่ใส่เขามา มันก็หาย กลับกันคือหากเราปรับให้ได้ตําเเหน่ง
ที่เราต้องการในความละเอียด 1024x768 ดีเเล้ว และหากเปิดด้วย
สกรีนที่สูงกว่ามันก็เพี้ยนไป

คือต้องเขียนไงครับใน head ให้ tag มันรับปรับเปลี่ยนไปตาม
ความละเอียดของจอผู้ใช้ของเเต่ละคนครับ