伊莉討論區

標題: 網頁設計問題求助 [打印本頁]
作者: ken801227    時間: 2013-7-17 06:18 PM     標題: 網頁設計問題求助

本帖最後由 ken801227 於 2013-7-17 06:24 PM 編輯

請問各位大大

我想設計

當點各大標題按鈕時

即立刻在下方顯示相關網頁

(是利用連結 開啟另一個html檔 顯示在其下方)

小弟在Dreamweaver測試的時候是正常(如圖 有用紅色框框)

但在瀏覽器測試時 結果不行(如圖)

想請問大大們 這到底是什麼問題呢?




作者: kwj    時間: 2013-7-19 10:14 AM

那要去看 DreamWeaver 產生的程式碼是怎麼寫的
有些語法有瀏覽器相容性的問題，不同瀏覽器跑出來效果可能不同。
作者: PANCHINGHSUEN    時間: 2013-7-19 11:15 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: ken801227    時間: 2013-7-20 11:48 AM

kwj 發表於 2013-7-19 10:14 AM
那要去看 DreamWeaver 產生的程式碼是怎麼寫的
有些語法有瀏覽器相容性的問題，不同瀏覽器跑出來效果可能不 ...

有聽說Dreamweaver不管怎樣寫
即時監看設計的時候都是OK的
但在瀏覽器就不正常了
我是有配合JQuery寫
想請問大大
我用了兩個方法如下：
1.
<div id="tab2">
<a style="text-decoration: none" href="organization/organization.html">
</a>
</div>
2.
<li>
<a href="news/news.html">
<font face='標楷體'>最新消息</font>
</a>
</li>
想請問大大這樣寫是否正確?
作者: ken801227    時間: 2013-7-20 11:49 AM

PANCHINGHSUEN 發表於 2013-7-19 11:15 PM
建議你去下載Expression Studio 4可以看到在各瀏覽器下面的顯示狀態，或是用ie按F12，可以檢視程式碼，工具 ...

有聽說Dreamweaver不管怎樣寫
即時監看設計的時候都是OK的
但在瀏覽器就不正常了
而我是有配合JQuery寫
想請問大大知道怎樣寫才正確?
作者: nmt80123    時間: 2013-7-21 04:34 PM

用這套軟體可以輕鬆寫出來你要的效果：Portable_Sothink_DHTML_Menu_9.80.945_TW

此外，你的網頁除了以上幾位大大敘述的問題可能性

建議你修改一下它們(Div)的堆疊順序試試看
作者: ken801227    時間: 2013-7-23 11:40 AM

本帖最後由 ken801227 於 2013-7-23 12:10 PM 編輯
kwj 發表於 2013-7-19 10:14 AM
那要去看 DreamWeaver 產生的程式碼是怎麼寫的
有些語法有瀏覽器相容性的問題，不同瀏覽器跑出來效果可能不 ...

謝謝大大解答
我現在遇到一個瓶頸了
就是我頁面都寫好了
我用%來設計想說隨視窗調整大小
結果發現在chrome/firefox一開始正常
但還是沒辦法照視窗大小縮放
在IE甚至是整個版面跑掉
請問大大這怎樣解決呢?

作者: ken801227    時間: 2013-7-23 11:43 AM

本帖最後由 ken801227 於 2013-7-23 12:11 PM 編輯
nmt80123 發表於 2013-7-21 04:34 PM
用這套軟體可以輕鬆寫出來你要的效果：Portable_Sothink_DHTML_Menu_9.80.945_TW

此外，你的網頁除了以上 ...

謝謝大大解答
我現在遇到一個瓶頸了
就是我頁面都寫好了
我用%來設計想說隨視窗調整大小
結果發現在chrome/firefox一打開是正常我設計的版面
但還是沒辦法照視窗大小縮放
在IE甚至是整個版面跑掉
請問大大這怎樣解決呢?

作者: nmt80123    時間: 2013-7-23 01:52 PM

ken801227 發表於 2013-7-23 11:43 AM
謝謝大大解答
我現在遇到一個瓶頸了
就是我頁面都寫好了

試著以CSS 針對body建立規則   寫入方寬設定中 寬:100%    自形設定亦是
作者: ken801227    時間: 2013-7-23 09:46 PM

本帖最後由 ken801227 於 2013-7-23 09:47 PM 編輯
nmt80123 發表於 2013-7-23 01:52 PM
試著以CSS 針對body建立規則   寫入方寬設定中 寬:100%    自形設定亦是

我是網頁頁面是用表格處理的
我試著用<table width="XXX%"....> </table>
這樣寫 但還是不能
請問大大這樣寫有錯嗎?
請問大大提供的這種方式有範例嗎?
作者: farland7    時間: 2013-7-24 08:40 PM

有使用JQUERY 可以將JS程式碼部分也貼出來嗎
因為很多問題有時是因為JS語法沒寫好  甚至寫錯字
或者換個JQ的插件來跑跑看

這類功能已經很普遍了

加油

或者IFRAME解決他
作者: 吳大有    時間: 2013-7-24 10:20 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: 吳大有    時間: 2013-7-25 08:25 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: ken801227    時間: 2013-7-29 06:36 PM

本帖最後由 ken801227 於 2013-9-4 07:44 PM 編輯
farland7 發表於 2013-7-24 08:40 PM
有使用JQUERY 可以將JS程式碼部分也貼出來嗎
因為很多問題有時是因為JS語法沒寫好  甚至寫錯字
或者換個JQ ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3.custom/css/redmond/jquery-ui-1.10.3.custom.css"/>
<!--CSS樣式   下載網址     http://jqueryui.com/download/    -->
<script>
$(document).ready(function (){
        $("#tabs").tabs();
});
</script>

<title>   </title>
</head>

<body>
<table width="100%" border="1">
  <tr>
    <th width="10.5%" height="100" rowspan="2" align="left" valign="top" scope="col">   </th>
    <th width="87.5%" height="60" colspan="2" scope="col">   </th>
  </tr>
  <tr>
    <td width="87.5%" height="40" colspan="2" align="center" valign="middle">
       <marquee direction="up" height="40" bgcolor="#FFFF00" scrollamount="1">   </marquee>      
    </td>
  </tr>
  <tr>
    <th width="88.5%" height="580" colspan="2" align="center" valign="top" scope="row">
       <div id="tabs"> <!--  列表連結  位置須與下面id內容相同 -->
       <ul>
          <li><a href="#tab1">   </a></li>
          <li><a href="#tab2">   </a></li>
          <li><a href="#tab3">   </a></li>
          <li><a href="#tab4">   </a></li>
          <li><a href="#tab5">   </a></li>
          <li><a href="#tab6">   </a></li>
          <li><a href="#tab7">   </a></li>
          <li><a href="#tab8">   </a></li>
          <li><a href="#tab9">   </a></li>                 
       </ul>
               
       <div id="tab1" style="overflow: scroll; width:1190px ; height: 495px;">
       <table width="1180" border="1" align="center">
           <tr>
             <th width="160" scope="row">公告日期</th>
             <td width="680" align="center">消息內容</td>
             <td width="160" align="center">公告組別</td>
             <td width="180" align="center">備註</td>
           </tr>         
       </table>        
       </div>
   
       <div id="tab2" style="overflow: scroll; width:1190px ; height: 495px;">
        <table width="840" border="1" align="center">
           <tr>  
             <th width="70" align="center" scope="row">行政組</th>
             <td width="70" align="center">照相組</td>
             <td width="70" align="center">錄影組</td>
             <td width="70" align="center">文字記者組</td>
             <td width="70" align="center">競賽組</td>
             <td width="70" align="center">總務組</td>
             <td width="70" align="center">裁判組</td>
             <td width="70" align="center">教練組</td>
             <td width="70" align="center">場地組</td>
             <td width="70" align="center">記錄組</td>
             <td width="70" align="center">計時組</td>
             <td width="70" align="center">公關組</td>
           </tr>
         
        <table width="840" border="1" align="center">
           <tr>
             <th width="160" scope="row">開會日期</th>
             <td width="520" align="center">會議記錄</td>
             <td width="160" align="center">備註</td>
           </tr>
                </table>
       </div>
   
       <div id="tab3" style="overflow: scroll; width:1190px ; height: 495px;">
       <table width="840" border="1" align="center">
           <tr>
             <th width="140" scope="row">公告日期</th>
             <td width="455" align="center">公告內容</td>
             <td width="105" align="center">公告組別</td>
             <td width="140" align="center">備註</td>
           </tr>
      </div>
   
       <div id="tab4" style="overflow: scroll; width:1190px ; height: 495px;">
      
       </div>
   
       <div id="tab5" style="overflow: scroll; width:1190px ; height: 495px;">
      
       </div>
   
       <div id="tab6" style="overflow: scroll; width:1190px ; height: 495px;">
       <table width="660" border="0">
         
       </table>
       </div>
   
       <div id="tab7" style="overflow: scroll; width:1190px ; height: 495px;">
      
       </div>
   
       <div id="tab8" style="overflow: scroll; width:1190px ; height: 495px;">
        
       </div>
   
       <div id="tab9" style="overflow: scroll; width:1190px ; height: 495px;">
      
       </div>
    </th>
   
    <td width="9.5%" rowspan="2" align="center" valign="top">
       <table width="150" border="0">
      
      </table>
    </td>
  </tr>
  <tr>
    <th width="89.3%" height="60" colspan="2" align="center" valign="middle" scope="row">
       <table width="880" border="0">
         
    </table>
    </th>
  </tr>
</table>
</body>
</html>
用%來設計想說隨視窗調整大小
結果發現在chrome/firefox一開始正常
但還是始終沒辦法照視窗大小縮放
在IE甚至是整個版面跑掉
請問這怎樣解決呢?

作者: farland7    時間: 2013-11-15 10:13 PM

$(window).resize(function(){
  var topPos = ($(window).height() - $('#modal').outerHeight())/2;

  $('#modal').css({
    left: ($(window).width() - $('#modal').outerWidth())/2,
    top: topPos > 0 ? topPos : 0
  });
});

版面跑掉是 DIV或CSS的語法不相容(例如寬度 高度 透明度 這三類的參數在三個瀏覽器與版本是有差異的哦!)
上面提供的這個JQuery與法是自動偵測視窗大小的語法  只需要設定好相對應的ID  該區塊就會自動調整囉^^

希望對你有幫助



歡迎光臨 伊莉討論區 (http://a401.file-static.com/) Powered by Discuz!