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

หัวข้อ: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 22 พฤษภาคม 2009, 23:13:57

(http://img20.imageshack.us/img20/4286/layoutpfo.jpg)

ต้องการสร้างเลเอาย์ 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;
}

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: Normaderm ที่ 22 พฤษภาคม 2009, 23:43:32

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

แซวเล่นเน้อ ;D

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: g-ji ที่ 23 พฤษภาคม 2009, 00:48:26

อ้างจาก: biar ที่ 22 พฤษภาคม 2009, 23:13:57

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

โค๊ด:

* { padding: 0; margin: 0; }

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

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


}

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 23 พฤษภาคม 2009, 06:49:01

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

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 23 พฤษภาคม 2009, 07:37:33

พอสร้างของเยอะๆ ตรง 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>

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: newie ที่ 23 พฤษภาคม 2009, 08:41:39

โค๊ด:

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

เอา#ออก

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 23 พฤษภาคม 2009, 08:53:01

อ้างจาก: newie ที่ 23 พฤษภาคม 2009, 08:41:39

เอา#ออก

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

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: newie ที่ 23 พฤษภาคม 2009, 08:56:12

โค๊ด:

* { 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 เอาไว้แยกสีดูแต่ละส่วน
อย่าลืมเอาออกนะครับ ::)

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 23 พฤษภาคม 2009, 09:47:03

อ้างจาก: newie ที่ 23 พฤษภาคม 2009, 08:56:12

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

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

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: gotdwata ที่ 23 พฤษภาคม 2009, 11:36:29

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

โค๊ด:

<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 ที่ลอยตรงกลาง

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

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: Rx78 ที่ 23 พฤษภาคม 2009, 11:51:17

Thank you Krub

หัวข้อ: Re: CSS:: เเนะนําวิธีเลเอาย์เเบบนี้หน่อยครับ (ภาพประกอบสีสี่)
เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 23 พฤษภาคม 2009, 14:56:36

เพิ่มเติมครับผม
ตอนนี้ ผมทํางงานอยู่ที่ความละเอียด
หน้าจอ 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 มันรับปรับเปลี่ยนไปตาม
ความละเอียดของจอผู้ใช้ของเเต่ละคนครับ

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: เป็นติ่งไรเนี่ย ที่ 22 พฤษภาคม 2009, 23:13:57