伊莉討論區

標題: 表格放圖為何會白白的? [打印本頁]
作者: apia543    時間: 2018-4-16 12:03 AM     標題: 表格放圖為何會白白的?

請教各位大大..
我在dw裡用表格3*3..放入圖片..
正中央空白部份是我另外在放東西上去
在dw裡看都OK[attach]123015301[/attach]
為何用網頁瀏覽..中間會有白白的????
[attach]123015305[/attach]
這是我的程式碼..是哪裡弄錯了呢??謝謝
[attach]123015306[/attach]
[attach]123015308[/attach]
作者: 我愛小笨蛋    時間: 2018-4-16 05:09 PM

你沒有把Table的間距設成0吧
試試看CSS對Table設定

border-spacing: 0px;

應該就可以了
作者: apia543    時間: 2018-4-16 09:32 PM

我愛小笨蛋 發表於 2018-4-16 05:09 PM
你沒有把Table的間距設成0吧
試試看CSS對Table設定

間距那些我都有設成0..但還是不知道為何會這樣..
作者: 我愛小笨蛋    時間: 2018-4-17 02:28 PM

能提供原始碼檔案嗎?
這樣有點不好看

補充內容 (2018-4-17 02:31 PM):
或是你將你bg_01_04.jpg的高度設小一點
看看是不是因為內距或是外距造成的
作者: ren1244    時間: 2018-4-18 03:11 PM

試試看23行的table加上
style="border-collapse:collapse;"

或是在CSS裡面加上
table{
    border-collapse:collapse;
}
作者: apia543    時間: 2018-4-18 10:09 PM

本帖最後由 apia543 於 2018-4-18 10:15 PM 編輯
我愛小笨蛋 發表於 2018-4-17 02:28 PM
能提供原始碼檔案嗎?
這樣有點不好看

不好意思..有點冗長再麻煩了..
我把網頁跟圖片全放在壓縮檔裡了
作者: apia543    時間: 2018-4-18 10:10 PM

本帖最後由 apia543 於 2018-4-18 10:19 PM 編輯
ren1244 發表於 2018-4-18 03:11 PM
試試看23行的table加上
style="border-collapse:collapse;"

謝謝您..我試了..間距有變小了..但一樣開開的..不知道為什麼..
作者: ren1244    時間: 2018-4-19 12:56 AM

剛剛看你給的檔案
原因不在表格
而是img元素以基線對齊

可以在CSS裡面加上下面內容就不會有那個東西了
td img{
        vertical-align:middle;
}
作者: ren1244    時間: 2018-4-19 02:33 AM

本帖最後由 ren1244 於 2018-4-19 02:56 AM 編輯

這邊提供另一個作法

由於你的大小都固定了
所以實際上不需要用拼圖的方式
直接把form放到圖片上面就好
下面是我整理過的：
(直接打html跟css，不依賴dw)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>~歡迎光臨~</title>
  6. <style type="text/css">
  7. body{
  8.         margin:0px;
  9.         padding:0px;
  10. }
  11. #form1-container{
  12.         display:inline-block;
  13.         position:relative;
  14. }
  15. #form1{
  16.         width:100%;
  17.         position:absolute;
  18.         top:107px;
  19.         text-align:center;
  20. }
  21. #form1 .label{
  22.         font-family:'標楷體';
  23.         font-weight:bold;
  24.         font-size: 18px;
  25.         color: #9D2CFF;
  26. }
  27. </style>
  28. </head>

  30. <body>
  31. <div style="text-align:center;">
  32.         <p>&nbsp;</p>
  33.         <div id="form1-container">
  34.                 <img src="images/bg_all.jpg"><br>
  35.                 <!-- bg_all.jpg 為完整9張拼起來的圖片 -->
  36.                 <form method="POST" name="form1" id="form1">
  37.                         <p>&nbsp;</p>
  38.                         <p>
  39.                                 <span class="label">使用者帳號</span>
  40.                                 <input name="userid" type="text" id="userid" autocomplete="off" size="20">
  41.                         </p>
  42.                         <p>
  43.                                 <span class="label">使用者密碼</span>
  44.                                 <input type="password" id="userpw" name="userpw" size="20">
  45.                         </p>
  46.                         <p><input type="submit" name="submit" id="submit" value="登入"></p>
  47.                         <p><a href="applyid.php">申請帳號</a></p>
  48.                         <p><a href="applypw.php">忘記密碼</a></p>
  49.                 </form>
  50.         </div>
  51. </div>
  52. </body>
  53. </html>
複製代碼
作者: apia543    時間: 2018-4-19 04:20 AM

ren1244 發表於 2018-4-19 02:33 AM
這邊提供另一個作法

由於你的大小都固定了

哇!!真是太謝謝你們二位了..
不然在這邊卡關到一個不行..
原來還可以這樣做..直接把東西放在圖上面
又學了一招...感謝您願意幫我^^
作者: 我愛小笨蛋    時間: 2018-4-19 01:05 PM

apia543 發表於 2018-4-19 04:20 AM
哇!!真是太謝謝你們二位了..
不然在這邊卡關到一個不行..
原來還可以這樣做..直接把東西放在圖上面

還是建議妳多了解CSS 做版面
盡量減少用Table做版面 會對以後發展比較有利
如果有要靠這個技能過生活的話 如果沒有就沒什麼差別






歡迎光臨 伊莉討論區 (http://ww956w.eyny.com/) Powered by Discuz!