ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: เทพบุตรแองเจิ้ล ที่ 11 มีนาคม 2010, 14:00:27



หัวข้อ: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: เทพบุตรแองเจิ้ล ที่ 11 มีนาคม 2010, 14:00:27
(http://upic.me/i/36/layoutemm.png)

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

รบกวนผู้รู้ ช่วยแก้ไขโค้ดที่ผิดให้ด้วยนะครับ ^^ ขอบคุณครับ  :wanwan020:
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>


หัวข้อ: Re: ปัญหาปสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: 9neo ที่ 11 มีนาคม 2010, 14:02:06
ถ้าจำไม่ผิด ทำไม่ได้ครับ  :wanwan019:

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


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: pjgunner ที่ 11 มีนาคม 2010, 14:10:59
ถ้าทำแบบ tabless ผมแทบไม่ได้ดูแบบ design view เลยครับ

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


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: เทพบุตรแองเจิ้ล ที่ 11 มีนาคม 2010, 14:12:49
แล้วถ้าตามที่แต่ละท่านดูมา ในส่วนของ CSS , Html แบบไม่ใช้ Design View แล้วต้องปรับที่ไหนบ้างครับ ให้สมบูรณ์และใช้ Height 100% ได้  :wanwan012:


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: pjgunner ที่ 11 มีนาคม 2010, 14:20:57
ผมก็ไม่ถนัดเรื่อง CSS นะครับ ผมก็เจอปัญหาเรื่อง height:100%; เหมือนกัน

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


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: Twenty-One ที่ 11 มีนาคม 2010, 14:23:51
div เขียนมือดีกว่าครับ
ลองอ่านอันนี้ให้จบรับรองเขียนได้เทพแน่นอน
โค๊ด:
http://www.barelyfitz.com/screencast/html-training/css/positioning/


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: เทพบุตรแองเจิ้ล ที่ 11 มีนาคม 2010, 14:39:43
ผมก็ไม่ถนัดเรื่อง CSS นะครับ ผมก็เจอปัญหาเรื่อง height:100%; เหมือนกัน

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



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



div เขียนมือดีกว่าครับ
ลองอ่านอันนี้ให้จบรับรองเขียนได้เทพแน่นอน
โค๊ด:
[url]http://www.barelyfitz.com/screencast/html-training/css/positioning/[/url]



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


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: pjgunner ที่ 11 มีนาคม 2010, 14:45:47
div เขียนมือดีกว่าครับ
ลองอ่านอันนี้ให้จบรับรองเขียนได้เทพแน่นอน
โค๊ด:
[url]http://www.barelyfitz.com/screencast/html-training/css/positioning/[/url]

ขอบคุณคับ

เข้าไปดูก็ได้ไอเดีย ที่ลืมไปเลยเรื่อง 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; ประมาณนี้ครับ


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: moneyofyou ที่ 11 มีนาคม 2010, 15:16:03
ค่าบวก รวมกันต้องได้ 100 พอดีค่ะ ถึงจะแสดงผลได้พอดีคะ   คำพูดนี้เอามาจากคุณ  mink4leo ค่ะ   :-[


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: vii ที่ 11 มีนาคม 2010, 16:36:56
การออกแบบ ดูการแสดงผลจาก web browser เป็นหลักจะดีกว่าครับ อย่าไปพึ่งพาการแสดงผลจากโปรแกรมประเภท wysiwyg มากนัก เพราะมันไม่เป๊ะจริงๆหรอกครับ ทำใจน่ะ


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: drphuket ที่ 11 มีนาคม 2010, 16:47:29
:D แนะนำใช้ FireFox แล้วลง Plugin Firebug (ใช้สำหรับแก้ไข css ได้เลย) แล้วก็ลง FireDiff (สำหรับ save css ที่แก้ไขครับ)


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: deadclosed ที่ 11 มีนาคม 2010, 17:03:41
:D แนะนำใช้ FireFox แล้วลง Plugin Firebug (ใช้สำหรับแก้ไข css ได้เลย) แล้วก็ลง FireDiff (สำหรับ save css ที่แก้ไขครับ)
แนะนำนี่เช่นกัน
ปกติผมก็เขียนโค๊ตทีล่ะตัวเหมือนกัน แบบบริษัทเป็นโอเพ่นซอร์ส
เลยใช้ทุกอย่างฟรีหมด :wanwan031: ลองFF ใช้ปลั๊กอิน css แล้วมันจะบอกหมดว่าเส้นไหนและต่ำแหน่งไหน
มีปัญหาเรื่องต่ำแหน่งอย่าลืม position และ float น่ะครับ สู้ๆ :wanwan003:


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: blueclub ที่ 12 มีนาคม 2010, 11:02:59
height 100% ไม่น่าจะได้นะครับ เพราะมันจะยืดหดตามข้อความที่เราใส่


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: KanMai ที่ 23 สิงหาคม 2010, 16:53:29
 :wanwan017:


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: moophong ที่ 23 สิงหาคม 2010, 17:14:14
:D แนะนำใช้ FireFox แล้วลง Plugin Firebug (ใช้สำหรับแก้ไข css ได้เลย) แล้วก็ลง FireDiff (สำหรับ save css ที่แก้ไขครับ)
แนะนำนี่เช่นกัน
ปกติผมก็เขียนโค๊ตทีล่ะตัวเหมือนกัน แบบบริษัทเป็นโอเพ่นซอร์ส
เลยใช้ทุกอย่างฟรีหมด :wanwan031: ลองFF ใช้ปลั๊กอิน css แล้วมันจะบอกหมดว่าเส้นไหนและต่ำแหน่งไหน
มีปัญหาเรื่องต่ำแหน่งอย่าลืม position และ float น่ะครับ สู้ๆ :wanwan003:


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


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: Ks ที่ 24 สิงหาคม 2010, 06:55:57
คือพี่ครับ ผมมีปันหาอีกอย่างนึงด้วยอ่าครับ คือ div เวลาวาดมันขึ้นใน design view พอไปดูในโค้ด
มัน
position:absolute;
left:
top:
หมดเรยอะคับ


หัวข้อ: Re: ปัญหาแสดง DIV ใน Dreamweaver Design
เริ่มหัวข้อโดย: Kobsoft ที่ 24 สิงหาคม 2010, 07:40:17
ความแตกต่างระหว่างบราวเซอร์แต่ละตัวมีค่า default height ของหน้าจอแตกต่างกันคับ บางบราวเซอร์สามารถระบุ position และกำหนดค่า height ได้เลย แต่บางบราวเซอร์ต้องสร้าง div ครอบไว้นอกสุดก่อนแล้วใช้ float กำหนดค่า height ด้านใน 100% มันจะมีค่าเท่าักับขนาดความสูงของ div ชั้นนอกที่ fix เอาไว้

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