|
หัวข้อ: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 05 กรกฎาคม 2010, 11:22:28 ปัญหา...โลโก้เเหว่ง จะเเก้css ยังไงดีคับ?
(http://img541.imageshack.us/img541/5396/38511870.jpg) ตามตัวอย่างรูปภาพ เป็นเลย์เอ้าของเว็บที่ที่กําหนดนะคับ สีสัม เป็น 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; } :wanwan011: :wanwan011: :-X :-X หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: เป็นติ่งไรเนี่ย ที่ 05 กรกฎาคม 2010, 11:28:51 ลืมบอกคับ มันมีปัญหาใน
ie6 ie7 หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: Affiliatetorich ที่ 05 กรกฎาคม 2010, 11:41:18 top : 22px น่าจะลองลดลงดูหน่อยนะครับ เป็น 10px น่า่จะโอเค
หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: doopro ที่ 05 กรกฎาคม 2010, 11:59:00 อยากจะเห็น css + html เดี๋ยวช่วยแก้ให้ครับ
ไม่ก็ลอง bottom:0 ดูนะครับ หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรง& เริ่มหัวข้อโดย: icez ที่ 05 กรกฎาคม 2010, 12:10:46 #header { overflow: visible; }
ถ้าไม่ได้ ยังไงก็ต้องใช้ margin ครับ #header .logo { width: 300px; float: left; margin: 22px 0 0 20px; z-index: 100; } หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: suphot.s ที่ 05 กรกฎาคม 2010, 13:02:47 ลองกำหนด height ดูครับ
หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: deadclosed ที่ 05 กรกฎาคม 2010, 13:09:19 ถ้าเรามีปัญหาเฉพาะ 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 แล้วครับ :wanwan020: หัวข้อ: Re: CSS .. ปัญหาตําเเหน่ง position: ยังเเก้ไม่ได้ ขอเเรงทุกคน.. |||||||| เริ่มหัวข้อโดย: Kobsoft ที่ 05 กรกฎาคม 2010, 13:21:11 z-index ต้องใช้ร่วมกับการประกาศ position ด้วยคับไม่ว่าจะเป็น relative หรือ absolute ก็ได้ ส่วนมากการใช้ position:absolute; โดดๆ มักจะมีปัญหากับ IE ตระกูล 7- ในเรื่องการที่มันสรรหา margin จากไหนไม่รู้มาให้เรา ในขณะที่บางบราวเซอร์ตระกูลเพื่อน Mozilla สามารถรันได้ปกติ บางคนอาจถนัดใช้ IE Hack เข้ามาช่วย แต่จริงๆ การประกาศค่า position ให้พร้อมเพรียงกัน จะพบว่าสามารถทำให้ทุกบราวเซอร์รัน CSS เหมือนกันได้โดยไม่จำเป็นต้องใช้ IE Hack คับ เนื่องจากบราวเซอร์ต่างๆ นี้มันจะมีค่า default margin ให้ต่างกันกรณีที่เราไม่ระบุ position หรือ margin ให้กับมันคับ
|