Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > ถามเกี่ยวกับ ภาพซ้อนทับ CSS ครับ มีรูปมีเว็บให้ดูครับ


ถามเกี่ยวกับ ภาพซ้อนทับ CSS ครับ มีรูปมีเว็บให้ดูครับ

 
Topic : 085690



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์



ผมต้องการอยากให้ลูกศรมันซ้อนอยู่บนภาพของเมนูอะครับ ดูรูปด้านล่างเลยครับ

1

ผมปรับ css ใช้ z-index แล้วมันก็ไม่ซ้อนอะครับ ลูกศรมันอยู่ใต้ภาพเมนูตลอดเลยครับ เข้าไปดูได้ที่
คือหน้า products อะครับ ผมใช้ opencart ทำครับ
ช่วยแนะนำทีครับ ต้องแก้ตรงไหน อย่างไรครับ



Tag : PHP, HTML/CSS


ประวัติการแก้ไข
2012-10-20 17:20:07
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-10-20 13:54:36 By : nakungza View : 9732 Reply : 28
 

 

No. 1



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


มีใครรู้มั่งครับ ช่วยแนะนำทีครับ ผมไปต่อไม่ได้แล้วครับตันจริงๆ คิดไม่ออกเลย ลองแก้มา 2 วันแล้วครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-20 14:31:38 By : nakungza
 

 

No. 2



โพสกระทู้ ( 3,750 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

position:absolute;
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-20 15:20:39 By : Dragons_first
 

 

No. 3



โพสกระทู้ ( 22 )
บทความ ( 0 )



สถานะออฟไลน์


ให้เอา #header_btm ที่อยู่ใน style sheet ออก แล้วกำหนดค่าดังนี้ลองดูนะ

Code
#header .nav {
position: relative;
float: left;
width: 990px;
height: 30px;
top: 56px;
background-color: #1E1E1E;
color: white;
}

#MENU_rub_1 .fl {
position: absolute;
top: -11px;
left: 120px;
z-index: 2000;
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-20 16:13:39 By : aobmi
 

 

No. 4



โพสกระทู้ ( 7 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

Code
#header_btm {
position: absolute;
top: 4px;
right: 0px;
}

.fl {
top: -11px !important;
}



แค่นี้ครับ เอา z-index ที่ #header_btm ออกครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-20 16:42:24 By : nopzsoodsoi
 

 

No. 5



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ได้แล้วครับ


ประวัติการแก้ไข
2012-10-20 17:11:41
2012-10-20 17:15:17
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-20 17:11:08 By : nakungza
 

 

No. 6



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณ คุณ NopZ มากครับ ปัญหาคือ ในไฟล์ stylesheet.css ผมประกาศ #header_btm ไว้ 2 ตัว

อีกอันไม่มี z-index อีกอันมี z-index:1100; อยู่ ผมเข้าไปลบแล้วทำตามที่คุณ Nopz บอกก็ได้เลยครับ

ขอบคุณมากครับ ขอบคุณทุกๆความเห็นที่เข้ามาช่วยเหลือนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-20 17:17:32 By : nakungza
 

 

No. 7



โพสกระทู้ ( 74,059 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-22 06:10:36 By : mr.win
 

 

No. 8



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


มีมาให้ช่วยอีกแล้วครับ ดูจากรูปด้านล่างครับ

pic

เวลาเราดูสินค้าในตะกร้า เมนู dropdown มันบังอะครับ ทำให้กดชำระเงินไม่ได้ครับ

ผมต้องการให้ดูในรูปนะครับ กรอบสี่เหลี่ยมสีแดง ผมต้องการให้ตรงนั้นเวลากดดูให้มันทับ dropdown เมนูอะครับ

ช่วยแนะนำทีครับไปแก้ไข ตรงไหน ผมก็ลองแก้เองดูแล้วแต่ก็ไม่ได้สักทีครับ

ลองเข้าไปดูที่

Code
http://www.eqthailand.com/products/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-24 12:56:17 By : nakungza
 

 

No. 9



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


เงียบจังเลยครับ ใครรู้ช่วยแนะนำทีครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-24 14:44:13 By : nakungza
 

 

No. 10



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ขอดันหน่อยนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-24 16:16:06 By : nakungza
 

 

No. 11



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ขอดันหน่อยครับ เงียบจังเลย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 11:27:58 By : nakungza
 

 

No. 12



โพสกระทู้ ( 3,750 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

กำหนด z-index:100; หรือน้อยกว่าหากต้องการให้ชิ้นไหนบัง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 11:52:58 By : Dragons_first
 

 

No. 13



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ผมกำหนดใน #header #cart .content

z-index ตั้ง 5000 มันก็ไม่บังนะครับ หรือผมกำหนดผิดที่ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 13:03:32 By : nakungza
 

 

No. 14



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ผมแก้ไขตรง #header #cart .content ทำไมมันไม่ได้อะครับ

หรือแก้ไขไม่ถูกจุดครับ มีใครพอรู้มั่งครับ


ประวัติการแก้ไข
2012-10-25 14:29:26
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 14:29:05 By : nakungza
 

 

No. 15



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ช่วยผมด้วยเถอะครับ ผ่านมา 1 วันแล้ว ผมแก้ไขไปหลายที่ก็เหมือนเดิม ไม่มีอะไรเกิดขึ้น

ผู้รู้ช่วยบอกผมทีครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 15:00:48 By : nakungza
 

 

No. 16



โพสกระทู้ ( 3,750 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

เอา css กรอบ 2 กรอบ มาให้ดูหน่อยครับ ระบุด้วยครับว่ากรอบไหนเป็นอันไหน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 15:08:06 By : Dragons_first
 

 

No. 17



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


อนนี้ของตะกร้าสินค้าครับ
Code
#header #cart .content
{
clear: both;
display: none;
position: relative;
z-index: 5000;
top: 2px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
box-shadow: #cccccc;
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}


อันนี้ของเมนู dropdown ครับ
Code
.inner-dropdown
{
position: relative;
float: right;
width: 750px;
margin-right: 10px;
height: 245px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: #ffffff;
}


หรือไม่ก็เข้าไปดูที่ Code
http://www.eqthailand.com/products/
ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 15:13:26 By : nakungza
 

 

No. 18



โพสกระทู้ ( 3,750 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook 

#header #cart .content
{
clear: both;
display: none;
position: relative;
z-index: 100;
top: 2px;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
box-shadow: #cccccc;
background-color: #ffffff;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}



.inner-dropdown
{
position: relative;
float: right;
width: 750px;
margin-right: 10px;
height: 245px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: #ffffff;
z-index:10;
}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 15:35:53 By : Dragons_first
 

 

No. 19



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ลองปรับเปลี่ยนตามอย่างที่คุณ อ้นคุง บอกแล้วครับ

ไม่ได้ครับ เหมือนเดิมครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 15:55:01 By : nakungza
 

 

No. 20



โพสกระทู้ ( 3,750 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

ผมเกรงว่าที่คุณให้มามันไม่ใช่งานชิ้นเดียวกันน่ะสิครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 16:32:43 By : Dragons_first
 

 

No. 21



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ยังไงหรอครับ ไม่ใช่งานชิ้นเดียวกัน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 16:36:06 By : nakungza
 

 

No. 22



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


คือผมกำลังโม opencart อยู่ครับ แล้วมันใช้ 2 css อะครับ

หมายถึงเรื่องนี้รึเปล่าครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 16:39:03 By : nakungza
 

 

No. 23



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ผมคิดว่าตัว position: relative; ใน .inner-dropdown {} ไปรบกวนส่วนอื่น ลองลบออกไปก่อนดูว่ามีผลอะไรบ้าง
ตัว z-index ก็ไม่จำเป็นต้องใช้ เพราะเว็บไซต์ของผมมีหน้าต่างเลื่อนลงมาเหมือนกัน และไม่ได้ใช้ z-index หน้าต่างก็เลื่อนลงมา้ด้านบนปกติ

ลองสองอย่างนี้ดูก่อน ผลเป็นอย่่างไรค่อยช่วยกันแก้ไขอีกที

ลองดูตัวอย่างที่เว็บไซต์ของผมได้
http://www.mineinc.net/

(กดที่ปุ่ม Info. ด้านบนเหนือเมนู จะมีหน้าต่างเลื่อนลงมา)
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 17:20:05 By : dreamlover
 

 

No. 24



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ลองทำตามที่คุณ jack บอกมาแล้ว ยังไม่ได้ครับ เหมือนเดิมครับ

ยังไงก็ขอบคุณ คุณ jack มากนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 18:00:42 By : nakungza
 

 

No. 25



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


ลองดูอีกสักหน่อยนะครับ

ลองเปลี่ยนเป็น

#header #cart .content {
position: absolute;
top: 2px;
left:400px;
}

เอา position:relative ของ .inner-dropdown ออกเหมือนเดิม
z-index ก็ไม่ต้องใส่ทั้งสองอัน

ถ้าไม่ได้ค่อยเดี๋ยวผมค่อยบอกอีกวิธี
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 18:19:06 By : dreamlover
 

 

No. 26



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ลองแล้วครับ เมนู dropdown ก็ยังบังเหมือนเดิมครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 18:33:24 By : nakungza
 

 

No. 27



โพสกระทู้ ( 210 )
บทความ ( 0 )



สถานะออฟไลน์


คงต้องบังคับที่ตัวสคริปแล้วครับ ตัวเมนูคงถูกตั้งไว้ให้อยู่บนสุดตลอด
คราวนี้ต้องใช้ z-index เข้ามาช่วย เข้าไปที่ตัวสคริปของหน้าต่างที่เลื่อนลง แล้วเพิ่มบรรทัดนี้เข้าไป
$(this).css("z-index","100");

เมื่อเวลาเรากดคลิกจะไปกำหนดให้ z-index ของหน้าต่างนี้เป็นไปตามค่าที่ตั้งไว้ ให้อยู่บนสุด ณ เวลานั้น

ตัวอย่าง:

$("#header #cart .content").click(function () {

$(this).css("z-index","10");
...
...
});


ตัว selector อาจไม่ใช่ตัวนี้ "#header #cart .content" ผมไม่เห็นโค้ดเลยไม่รู้ว่าเป็นตัวไหน

ถ้ายังไม่ได้ผมแนะนำให้พักไว้ก่อน ลองไปทำงานอย่างอื่นดูก่อนแล้วค่อยกลับมาดูใหม่ เดี๋ยวก็ได้เอง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 19:12:49 By : dreamlover
 

 

No. 28



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์


ได้แล้วครับ ผมลองไปเพิ่ม z-index ที่ #header ครับ ได้เลยครับ

แต่เปิดใน firefox ได้นะครับ พอไปเปิดใน IE ไม่ได้ครับ เดี๋ยวผมจะลองแก้ดูอีกที


ประวัติการแก้ไข
2012-10-25 20:00:56
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-10-25 19:58:56 By : nakungza
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ถามเกี่ยวกับ ภาพซ้อนทับ CSS ครับ มีรูปมีเว็บให้ดูครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่