:P ครับ พอดีเอารูปขึ้น แล้วจะเอา div ที่ใส่ text ไปไว้ข้างบน แต่มันกลับไปอยู่หลังภาพอ่ะครับ พอจะทำภาพเป็น background ภาพก็หายไปเฉยเลย
ทำแบบนี้สิครับ
<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>
ใช้ z-index ก็ได้ครับ ถ้าจะทำเป็น div ซ้อน div อะไรนั้น
อ้างถึงจาก: Twenty-One ใน 28 มีนาคม 2010, 21:02:22
ทำแบบนี้สิครับ
<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>
ใช้ z-index ก็ได้ครับ ถ้าจะทำเป็น div ซ้อน div อะไรนั้น
:P ภาพจาก div ข้างล่างมันไหนขึ้นมาซอนอ่ะครับ
<div id="secondaryContent">
<div style="position:relative; left:-14px; top:-20px;"><img src='images/statusside.png' /></div>
<div style="position:relative; left:-14px; top:-20px;"><img src='images/menuhead.png' alt="w" /></div>
<div style="position:relative; left:-14px; top:-25px; background:url(images/menubody.png) repeat; white-space:normal;"><span style="position:relative; padding:0 0 0 19; left:50px;">
<li><a href="news.php">Anouncement</a></li>
<li><a href="profile.php">Player's profile</a></li>
<li><a href="mail.php">Mail(0)</a></li>
<li><a href="battle.php">Battle field</a></li>
<li><a href="tournament.php">Tournament</a></li>
<li><a href="team.php">Team fighting</a></li>
<li><a href="guild.php">My guild</a></li>
<li><a href="explore.php">Explore planet</a></li>
<li><a href="blacksmith.php">Blacksmith</a></li>
<li><a href="market.php">Market</a></li>
<li><a href="preference.php">Preference</a></li>
<li><a href="donation.php">Donation</a></li>
<li><a href="betainfo.php">Beta status</a></li>
</span></div>
<div style="position:relative; left:-14px; top:-25px;"><img src='images/menubottom.png' alt="w" /></div>
</div>statusside.png อันนี้อ่ะครับ อยากให้ตัวหนังสือขึ้นไปทับ
<div style="position:relative; left:-14px; top:-20px;">
<div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
<div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>
ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที
อ้างถึงจาก: kitazawa1st ใน 28 มีนาคม 2010, 21:33:52
<div style="position:relative; left:-14px; top:-20px;">
<div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
<div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>
ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที
:wanwan003: เยี่ยมเลยครับ วางไว้บนตัวหนังสือได่จริงๆ
:P แต่ว่า div ข้างล่างมันไหลเข้าไปซ่อนด้านหลังภาพ statusside.png อ่ะครับ แก้ยังไงต่อ
ใช้โปรแกรมตัดแต่งภาพ เขียนตัวหนังสือทับเลยครับ อิอิ ง่ายดี :wanwan004: :P
อ้างถึงจาก: GillBate ใน 29 มีนาคม 2010, 06:42:40
อ้างถึงจาก: kitazawa1st ใน 28 มีนาคม 2010, 21:33:52
<div style="position:relative; left:-14px; top:-20px;">
<div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
<div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>
ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที
:wanwan003: เยี่ยมเลยครับ วางไว้บนตัวหนังสือได่จริงๆ
:P แต่ว่า div ข้างล่างมันไหลเข้าไปซ่อนด้านหลังภาพ statusside.png อ่ะครับ แก้ยังไงต่อ
ทำแบบนี้เดี่ยวพอไปเทสก่ะพวกต่างบราวเซอร์มีปัญหาอีก
นับหนุน
<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>
แบบนี้มากกว่า
หรือทำแบบนี้
<div class="nameclass">
text text
</div>
ไฟล์ cssแยกออกมาต่างหาก
.nameclass{
margin:0;
padding:0;
background:url('background.jpg') no-repeat left top #fff;
width: ....px;
height:....px;
}
อ้างถึงจาก: เทพบุตรแองเจิ้ล ใน 29 มีนาคม 2010, 17:49:55
ใช้โปรแกรมตัดแต่งภาพ เขียนตัวหนังสือทับเลยครับ อิอิ ง่ายดี :wanwan004: :P
ไม่ได้หรอกครับ เพราะตัวหนังสือมันต้องเปลี่ยนตลอด
อ้างถึงจาก: deadclosed ใน 29 มีนาคม 2010, 18:24:19
อ้างถึงจาก: GillBate ใน 29 มีนาคม 2010, 06:42:40
อ้างถึงจาก: kitazawa1st ใน 28 มีนาคม 2010, 21:33:52
<div style="position:relative; left:-14px; top:-20px;">
<div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
<div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>
ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที
:wanwan003: เยี่ยมเลยครับ วางไว้บนตัวหนังสือได่จริงๆ
:P แต่ว่า div ข้างล่างมันไหลเข้าไปซ่อนด้านหลังภาพ statusside.png อ่ะครับ แก้ยังไงต่อ
ทำแบบนี้เดี่ยวพอไปเทสก่ะพวกต่างบราวเซอร์มีปัญหาอีก
นับหนุน
<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>
แบบนี้มากกว่า
หรือทำแบบนี้
<div class="nameclass">
text text
</div>
ไฟล์ cssแยกออกมาต่างหาก
.nameclass{
margin:0;
padding:0;
background:url('background.jpg') no-repeat left top #fff;
width: ....px;
height:....px;
}
อันนี้ดูดีแฮะ ขอเก็บไปใช้