ต่อไป »

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

CSS ปัญหาโลโก้โดนเมนูทับขาด


มีรูปประกอบคับ
 เมนูสีเขียวอ่อน ภายในกล่องleftcolum ทับโลโก้
ด้านล่างขาดไป ใน ie6 และ ie7 (ดูรูป)
ไม่ทราบเเก้งัยดีคับ..?
โดยยังคงให้ โลโก้ใช้  position: absolute

โค๊ดปัจจุบันที่ใช้
#header .logo {
   width: 300px;
   position: absolute;
   top: 22px;
   left: 20px;
   z-index: 100;
}

#leftcolumn {
   color: #333;
   margin: 0px;
   padding: 10px;
   width: 300px;
   float: left;
}
#leftcolumn .menu {
   padding-left: 15px;
   padding-bottom: 10px;
   z-index: 1;
   clear: both;
   float: left;
}

[9neo]

#leftcolumn {
   color: #333;
   margin: 0px;
   padding: 80px 10px 10px 10px;
   width: 300px;
   float: left;
}

ขาดเกินยังงัยลองเพิ่มลดดูนะครับ 

[g-ji]

IE 6 7 มันคำนวน padding กับ margin เพี้ยนนะ ลองเขียน CSS เฉพาะ IE สิ

/* lte IE8 */
#leftcolumn {
padding-top:xxpx;
}

เอาไว้ใต้ CSS ปกตินะ

แบบเนี่ย (IE มันจะอ่าน อันล่างอย่างเดียว)
#leftcolumn {
padding-top:xxpx;
}
/* lte IE8 */
#leftcolumn {
padding-top:xxpx;
}

xx ตรงนั้นมีค่าเท่ากับ ค่ามาตรฐาน*2 (หรือ 1.5)

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

ขออภัยเพื่อนๆ ทุกคน ผมดูผิดไป..จริงๆ
ตัวที่มันตัดโลโก้ให้เเหว่งไปคือ container คับ
มันจะเรียงเเบบนี้
1. head เเท็กนี้ก็จะมี โลโก้ อยู่ซ้ายมือ โดยกําหนดใช้ position: absolute เพื่อเคาะตําเเหน่งลงมาทับระหว่าง div (จุดประสงค์เพื่อความงาม)
2. container (เมื่อโลโก้ เคลื่อนลงมาทับดิฟนี้ มันจึงตัดโลโก้ขาดไป )
3. leftcolum


#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;
   z-index: 1;
}
#leftcolumn {
   color: #333;
   margin: 0px;
   padding: 10px;
   width: 300px;
   float: left;
}
#leftcolumn .menu {
   padding-left: 15px;
   padding-bottom: 10px;
   z-index: 1;
   clear: both;
   float: left;
}

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

ตี5 แล้ว ยังเเก้ไม่ได้เลย


 

[nungnever]

ตี5 แล้ว ยังเเก้ไม่ได้เลย


 

#leftcolumn .menu {
   padding-left: 15px;
   padding-bottom: 10px;
   z-index: 1;
   clear: both;
   float: left;
}


ลองใช่  top เข้าไป ติดครับ ไม่ทับแน่นอนครับ

[bomie]

    เช็ค code อีกที ยังไม่ได้ลอง

ลองแก้  #leftcolumn  เป็น
margin-top: 50px; <--- ใส่ความสูง เอาให้ไม่ทับ
margin-left: 0px;
margin-right: 0px;
margin-buttom: 0px;



หรือเขียนใหม่

#container {
   width: 960px;
}
#header {
   width: 100%;
   float: left;
}
#logo {
   width: 300px;
   position: absolute;
   margin-top: 22px;
   margin-left: 20px;
}
#leftcolumn {
   color: #333;
   margin: 0px;
   padding: 10px;
   width: 300px;
   float: left;
}
#menu {
   padding-left: 15px;
   padding-bottom: 10px;
}
#under {
  clear: both;
}

<div id="container" >
   <div id="header" >
      <div id="logo" ></div>
   </div>
   <div id="leftcolum" >
      <div id="menu" ></div>
      <div id="under" ></div>
   </div>
</div>

[bomie]

 

#header {
   width: 100%;
   float: left;
}

ถ้าคุณไม่มีข้อมูลอะไรนอกจาก โลโก้  ให้ใส่ความสูงด้วยนะ  เพราะ logo คุณลอยอยู่