ต่อไป »

[เทพบุตรแองเจิ้ล]

ปัญหาที่ 1 ตามรูป: มันเกิดช่องว่างระหว่าง DIV ครับ ไม่ได้เคาะอะไร ในเพจ Design พอแสดงผลจริง กลับ OK ครับ ถ้ามเราอยากให้ใน Design View มันติดๆกันทำอย่างไรเหรอครับ
ปัญหาที่ 2 : ไม่สามารถทำให้ #zleftbg , #zrightbg มีความสูงเป็น 100% ได้ (DIV 2 ตัวนี้ อยู่ใน #bodywrap ครับ)

รบกวนผู้รู้ ช่วยแก้ไขโค้ดที่ผิดให้ด้วยนะครับ ^^ ขอบคุณครับ  
CSS :

โค๊ด:

.idivcenter {
margin: 0 auto;
}
#pagewrapper {
	height:auto;
}
#header-wrap {
float:none;
margin: 0 auto;
width: 960px;
}
#left-header {
	float: left;
	border: 0px;
	width: 89px;
	height: 168px;
	background-image:url("images/idx-xheader_l.png");
}

#right-header {
	float: right;
	border: 0px;
	width: 86px;
	height: 168px;
	background-image:url("images/idx-xheader_r.png");
	
}

#center-header {
	float: left;
	border: 0px;
	width: 785px;
	height: 168px;
	background-image:url("images/idx-xheader.png");
}

#zfooter {
	clear: both;
	background: #A2A2A2;
}
#bodywrap {
	clear:both;
	min-height :300px;
	width: 960px;
	margin: 0 auto;
	height:auto;
	height: 100%;
}
#zleftbg {
	min-height :300px;
	width: 89px;
	height: 100%;
	float:left;
	background-repeat:repeat;
	background-image: url("images/idx-bgl.png");
}
#zrightbg {
	min-height :300px;
	width: 86px;
	height: 100%;
	float:right;
	background-repeat:repeat;
	background-image: url("images/idx_bgr.png");
}
#zcontentwrap {
	width: 785px;
	min-height :300px;
	float:left;
	line-height: 13px;
}
body,td,th {
	font-family: Tahoma;
	font-size: 12px;
}

#adsense-bottomwrap {
	margin: 0 auto;
	width: 960px;
	clear: both;
}

#footer-wrap {
	margin: 0 auto;
	width: 960px;
	margin-top: 0px;
}
#footer-l {
	float: left;
	width: 89px;
	height: 258px;
	background-image:url("images/idx-xfooter_l.png");
}
#footer-r {
	float: right;
	width: 86px;
	height: 258px;
	background-image:url("images/idx-xfooter_r.png");
}
#footer-center {
	float: left;
	width: 785px;
	height: 211px;
	background-image:url("images/idx-xfooter.png");
}
#footer-cpr_l {
	float: left;
	width: 175px;
	height: 47px;
	background-image:url("images/idx-xfooter_cpr-l.png");
}
#footer-cpr_r {
	float: right;
	width: 128px;
	height: 47px;
	background-image:url("images/idx-xfooter_cpr-r.png");
}
#footer-cpr_center {
	float: right;
	width: 482px;
	height: 47px;
	background-image:url("images/idx-xfooter_copyright.png");
}
#adswrap-l {
	float: left;
	min-height :100px;
	width: 89px;
	height: 100%;
	background-repeat:repeat;
	background-image: url("images/idx-bgl.png");
	border: 0px;
}
#adswrap-r {
	float: right;
	min-height :100px;
	width: 86px;
	height: 100%;
	background-repeat:repeat;
	background-image: url("images/idx_bgr.png");
	border: 0px;
}
#zadszone {
	float: left;
	min-height :100px;
	width: 785px;
}
.clear-all{clear:both; line-height:0; height:0;}
#znavileft {
	float: left;
	width: 200px;
}
#zcontent {
	float: right;
	width: 585px;
}
#etcfooter {
	margin: 0 auto;
}

็HTML :

โค๊ด:

<div id="pagewrapper" class="idivcenter">
  <div id="header-wrap">
    <div id="left-header"></div>
    <div id="right-header"></div>
    <div id="center-header"></div>    
  </div>
  <div id="bodywrap">
      <div id="zleftbg"></div>
      <div id="zcontentwrap" class="idivcenter">
        <div id="znavileft">
          <p>navigation</p>
        </div>
        <div id="zcontent">
          <p>content</p>
      </div>
        </div>
        <div id="zrightbg"></div>
  </div>
  <div id="adsense-bottomwrap">
  	<div id="adswrap-l"></div>
    <div id="adswrap-r"></div>
    <div id="zadszone"></div>
  </div>
  <div id="footerglobalwrap">
  <div id="footer-wrap" class="clear-all">
  	<div id="footer-l"></div>
        <div id="footer-r"></div>
        <div id="footer-center"></div>
        <div id="footer-cpr_l"></div>
        <div id="footer-cpr_r"></div>
    	<div id="footer-cpr_center">
   </div>
  </div>
   <div id="etcfooter">...</div>
  </div>
 </div>

[9neo]

ถ้าจำไม่ผิด ทำไม่ได้ครับ 

เลิกใช้ ดรีมมาได้ 2 ปีกว่าละ 

[pjgunner]

ถ้าทำแบบ tabless ผมแทบไม่ได้ดูแบบ design view เลยครับ

ลองในบราวเซอร์เอา

[เทพบุตรแองเจิ้ล]

แล้วถ้าตามที่แต่ละท่านดูมา ในส่วนของ CSS , Html แบบไม่ใช้ Design View แล้วต้องปรับที่ไหนบ้างครับ ให้สมบูรณ์และใช้ Height 100% ได้ 

[pjgunner]

ผมก็ไม่ถนัดเรื่อง CSS นะครับ ผมก็เจอปัญหาเรื่อง height:100%; เหมือนกัน

ผมเลยใช้แบบ fix px เอา

[Twenty-One]

div เขียนมือดีกว่าครับ
ลองอ่านอันนี้ให้จบรับรองเขียนได้เทพแน่นอน

โค๊ด:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

[เทพบุตรแองเจิ้ล]

ผมก็ไม่ถนัดเรื่อง CSS นะครับ ผมก็เจอปัญหาเรื่อง height:100%; เหมือนกัน

ผมเลยใช้แบบ fix px เอา

อย่างไรเหรอครับ FIX px    !?

div เขียนมือดีกว่าครับ
ลองอ่านอันนี้ให้จบรับรองเขียนได้เทพแน่นอน

โค๊ด:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

ขอบคุณมากครับ (แทนการ + Thanks ยังทำไม่ได้ ^^)

[pjgunner]

div เขียนมือดีกว่าครับ
ลองอ่านอันนี้ให้จบรับรองเขียนได้เทพแน่นอน

โค๊ด:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

ขอบคุณคับ

เข้าไปดูก็ได้ไอเดีย ที่ลืมไปเลยเรื่อง position คือผมกำลังหัดใช้ css framework อยู่พอดี มันจะมีคลาสที่มีขนาดและตำแหน่งมาให้ ก็อยากใช้ของมันเลย

แต่มีปัญหาว่า ผมใส่แบคกราวให้พื้นหลัง(body) เป็นขอบซ้ายขวา

โค๊ด:

body {
	background: #D2D6D9 url(../image/default-bg.png) center repeat-y;
	font-family: Arial, Helvetica, sans-serif;
}

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

วิธีที่ใช้แก้ปัญหาตอนนั้น ก็ใช้ padding แต่มันทำให้ ด้านขวาสุดผมต้องมากำหนด width เอง(เพราะขนาดคลาสในเฟรมเวิร์ค มันไม่พอดี)

จากลิงค์ที่กำหนดมาผมน่าจะใช้ position: relative; และใช้ left: 10px; จะง่ายกว่า และให้คอลั่มสุดท้าย ใช้ความกว้างที่มีในเฟรมเวิร์คแทน

อย่างไรเหรอครับ FIX px   wanwan011 !?

height: 120px; ประมาณนี้ครับ

[moneyofyou]

ค่าบวก รวมกันต้องได้ 100 พอดีค่ะ ถึงจะแสดงผลได้พอดีคะ   คำพูดนี้เอามาจากคุณ  mink4leo ค่ะ   

[vii]

การออกแบบ ดูการแสดงผลจาก web browser เป็นหลักจะดีกว่าครับ อย่าไปพึ่งพาการแสดงผลจากโปรแกรมประเภท wysiwyg มากนัก เพราะมันไม่เป๊ะจริงๆหรอกครับ ทำใจน่ะ

[drphuket]

แนะนำใช้ FireFox แล้วลง Plugin Firebug (ใช้สำหรับแก้ไข css ได้เลย) แล้วก็ลง FireDiff (สำหรับ save css ที่แก้ไขครับ)

[deadclosed]

แนะนำใช้ FireFox แล้วลง Plugin Firebug (ใช้สำหรับแก้ไข css ได้เลย) แล้วก็ลง FireDiff (สำหรับ save css ที่แก้ไขครับ)

แนะนำนี่เช่นกัน
ปกติผมก็เขียนโค๊ตทีล่ะตัวเหมือนกัน แบบบริษัทเป็นโอเพ่นซอร์ส
เลยใช้ทุกอย่างฟรีหมด ลองFF ใช้ปลั๊กอิน css แล้วมันจะบอกหมดว่าเส้นไหนและต่ำแหน่งไหน
มีปัญหาเรื่องต่ำแหน่งอย่าลืม position และ float น่ะครับ สู้ๆ

[blueclub]

height 100% ไม่น่าจะได้นะครับ เพราะมันจะยืดหดตามข้อความที่เราใส่

[KanMai]

 

[moophong]

แนะนำใช้ FireFox แล้วลง Plugin Firebug (ใช้สำหรับแก้ไข css ได้เลย) แล้วก็ลง FireDiff (สำหรับ save css ที่แก้ไขครับ)

แนะนำนี่เช่นกัน
ปกติผมก็เขียนโค๊ตทีล่ะตัวเหมือนกัน แบบบริษัทเป็นโอเพ่นซอร์ส
เลยใช้ทุกอย่างฟรีหมด ลองFF ใช้ปลั๊กอิน css แล้วมันจะบอกหมดว่าเส้นไหนและต่ำแหน่งไหน
มีปัญหาเรื่องต่ำแหน่งอย่าลืม position และ float น่ะครับ สู้ๆ

ผมก็เช้าเจ้าเต่าน้อยนี่เหมือนกัน แก้ไขง่ายลองดูครับสำหรับมือใหม่

[Ks]

คือพี่ครับ ผมมีปันหาอีกอย่างนึงด้วยอ่าครับ คือ div เวลาวาดมันขึ้นใน design view พอไปดูในโค้ด
มัน
position:absolute;
left:
top:
หมดเรยอะคับ

[Kobsoft]

ความแตกต่างระหว่างบราวเซอร์แต่ละตัวมีค่า default height ของหน้าจอแตกต่างกันคับ บางบราวเซอร์สามารถระบุ position และกำหนดค่า height ได้เลย แต่บางบราวเซอร์ต้องสร้าง div ครอบไว้นอกสุดก่อนแล้วใช้ float กำหนดค่า height ด้านใน 100% มันจะมีค่าเท่าักับขนาดความสูงของ div ชั้นนอกที่ fix เอาไว้

  ลองๆ ศึกษา CSS ดูดีๆ คับ ถ้าเริ่มลอง CSS เขียนมือ แล้วค่อยผันไปใช้ดรีมออกแบบจะดีมากเลย จะได้รู้จุดบอดของ css แต่ละคำสั่ง ต่อบราวเซอร์แต่ละตัว