ต่อไป »

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

อยากทราบว่า.. ทํางัยให้เเบดกราน์ที่เป็นภาพรายละเอียดต่างกัน มันยืดหดตามขนาดค่าความละเอียดของจอคอมแต่ละคน (เช่นบางคนจอ wide บางคนธรรมดา)

รายละเอียดภาพตัวอย่าง ..(ภาพซ้ายสุด กับ ขาวสุด สีจะเข้มกว่าตรงกลาง จึงตัดออกมา ดังนี้คับ)
หมายเลข1 เป็น head-a
หมายเลข2 เป็น head-b
หมายเลข3 เป้น head-c

ไม่ทราบต้องจัด css งัยคับ..ให้ภาพซ้ายมือมันโชว์ และให้ส่วน head มันรองรับยืดหดตามขนาดจอ wide ได้
โค็ดที่ลองทําดังนี้
 โค๊ด
 html
<div id="header">
         <div id="head-a"></div>
         <div id="head-b"></div>
         <div id="head-c"></div>
       </div>

โค๊ด css
#header {
   width: 100%;
   height: 123px;
   min-width:990px;
}

#head-a  {
   background-image: url(01.gif);
   background-repeat: no-repeat;
   height: 123px;
   width: 25px;
   position: absolute;
}
#head-b {
   background-image: url(02.gif);
   background-repeat: repeat-x;
   height: 123px;
   width: 100%;
   float: left;
   
}
#head-c {
   background-image: url(04.gif);
   background-repeat: no-repeat;
   height: 123px;
   width: 25px;
   position: absolute;
   right: 0px;
   background-position: right top;
}

ผมจัด css ตามข้างบน ดูในจอไวน์ 22 นิ้ว และ 17 นิ้ว มันก็ยืดหดนะคับ แต่
แล้วภาพที่ตัดไว้ทางซ้ายมือมันหายไม่ยอมขึ้นอ่าคับ

ดูภาพ

[ball6847]

สงสัยลืม z-index อ่ะคับ ให้ #head-a มี z-index มากกว่าตัวอื่น

แล้วก็ตัด #head-b ออกไป แล้วเอา background-image ไปใส่กับ #header แทน

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

สงสัยลืม z-index อ่ะคับ ให้ #head-a มี z-index มากกว่าตัวอื่น

แล้วก็ตัด #head-b ออกไป แล้วเอา background-image ไปใส่กับ #header แทน

+1 คับ เเต่ว่าทดลองตามที่เเนะนํา ภาพซ้ายมือก็ยังไม่ขึ้นคับ

โค็ด css ล่าสุด

#header {
   color: #333;
   width: 100%;
   height: 123px;
   background-image: url(02.gif);
   background-repeat: repeat-x;
}
}
#head-a  {
   background-image: url(01.gif);
   background-repeat: no-repeat;
   height: 123px;
   width: 25px;
   position: absolute;
   z-index: 1000;
}
#head-c {
   background-image: url(04.gif);
   background-repeat: no-repeat;
   height: 123px;
   width: 25px;
   position: absolute;
   right: 0px;
   background-position: right top;
   z-index: 1;
}

[ball6847]

<div id="header">
   <div id="head-a"></div>
   <div id="head-c"></div>
</div>


#header {
   color: #333;
   width: 100%;
   height: 123px;
   background-image: url(02.gif);
   background-repeat: repeat-x;
}
}
#head-a  {
   background-image: url(01.gif);
   background-repeat: no-repeat;
   height: 123px;
   width: 25px;
   float: left;
}
#head-c {
   background-image: url(04.gif);
   background-repeat: no-repeat;
   height: 123px;
   width: 25px;
   float: right;
}


แบบนี้ได้ป่ะคับ ต้องได้สิ