ต่อไป »

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

ปัญหา...โลโก้เเหว่ง จะเเก้css ยังไงดีคับ?


ตามตัวอย่างรูปภาพ เป็นเลย์เอ้าของเว็บที่ที่กําหนดนะคับ
สีสัม เป็น container
สีนํ้าเงิน head
สีขาว  logo
เเบบว่าจะให้โลโก้ (สีขาว) มันอยู่ตําเเหน่งที่ต้องการ
แต่ว่ามันจะต้องไปทับระหว่างดิฟ ในที่นี้คือกล่อง container (สีส้ม)
แต่พอจัดตามตําเเหน่งที่ต้องการเเล้ว มันจะโดน container ตัดขาดเเหว่งไป (รอยปุสีเเดง)
ไม่ทราบจะจัด css ยังไงดี โดยไม่ใช้  margin หรือ padding

โค็ดปัจจุบันคับ

#header .logo {
   width: 300px;
   position: absolute;
   top: 22px;
   left: 20px;
   z-index: 100;
}
#container {
   background-image: url(../img/bg-body.jpg);
   background-repeat: repeat-y;
   width: 960px;
   position: relative;
   float: left;
}


 

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

ลืมบอกคับ มันมีปัญหาใน
ie6
ie7

[Affiliatetorich]

top : 22px น่าจะลองลดลงดูหน่อยนะครับ เป็น 10px น่า่จะโอเค

[doopro]

อยากจะเห็น css + html เดี๋ยวช่วยแก้ให้ครับ

ไม่ก็ลอง bottom:0 ดูนะครับ

[icez]

#header { overflow: visible; }



ถ้าไม่ได้ ยังไงก็ต้องใช้ margin ครับ


#header .logo {
   width: 300px;
   float: left;
   margin: 22px 0 0 20px;
   z-index: 100;
}

[suphot.s]

ลองกำหนด height ดูครับ

[deadclosed]

ถ้าเรามีปัญหาเฉพาะ IE 6 7 แล้ว ขอแนะนำให้ให้ ใช้ คำสั่ง Hack IE ครับ

ปกติเค้าจะแยกไฟล์ไปเฉพาะบราวเซอร์ แต่ในกรณ๊นี้แก้เฉพาะคำสั่งเดี่ยว
เลยไม่ต้องไปยุ่งยากให้Hack ตามบราวเซอร์นั้นๆ

ได้แก่

#header .logo {
   width: 300px;
   float: left;
   margin: 22px 0 0 20px!important; /* hack ie6 */
   z-index: 100;
}
html>header .logo{
  margin: 22px 0 0 20px;/* hack ie 7 */
}

ข้อมูลแก้ไขขออ้างอิ้งของคนข้างบนแล้วกัน
ถ้าไม่ได้อีกก็สงสัยต้องแยก CSS แล้วครับ

[Kobsoft]

z-index ต้องใช้ร่วมกับการประกาศ position ด้วยคับไม่ว่าจะเป็น relative หรือ absolute ก็ได้ ส่วนมากการใช้ position:absolute; โดดๆ มักจะมีปัญหากับ IE ตระกูล 7- ในเรื่องการที่มันสรรหา margin จากไหนไม่รู้มาให้เรา ในขณะที่บางบราวเซอร์ตระกูลเพื่อน Mozilla สามารถรันได้ปกติ บางคนอาจถนัดใช้ IE Hack เข้ามาช่วย แต่จริงๆ การประกาศค่า position ให้พร้อมเพรียงกัน จะพบว่าสามารถทำให้ทุกบราวเซอร์รัน CSS เหมือนกันได้โดยไม่จำเป็นต้องใช้ IE Hack คับ เนื่องจากบราวเซอร์ต่างๆ นี้มันจะมีค่า default margin ให้ต่างกันกรณีที่เราไม่ระบุ position หรือ margin ให้กับมันคับ