2009-06-18 5 views
1
は、ここではHTML、CSSだ

、とJavaScriptを組み合わせ:CSSを使用したJquery UIダイアログ内のテーマ要素...どのように?古いバージョンが明らかにあまりにも難しい人には理解したので

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
     <title>test title</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#test').dialog({ autoOpen: false, modal: true }); 
       $("#test-link").click(function() { 
        $('#test').dialog('open'); 
       }); 
      }); 
     </script> 
     <style type="text/css"> 
      div#main div#test label { 
       display: block; 
      } 
      div#main div#test input { 
       padding-left: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <p><a href="#" id="test-link">test</a><p> 
      <div id="test" title="Submit Bug or Feature Request"> 
       <form> 
        <label for="test_desc">Short Description:</label> 
        <input type="text" name="test_desc" id="test_desc" value="" /> 
        <input type="submit" name="" value="Submit" /> 
       </form> 
      </div> 

     </div> 
    </body> 
</html> 

ダイアログが正常に動作しますが、CSSはしていません。なぜどんなアイデア?

答えて

1

JQueryはダイアログのDIVをDOMツリー内で移動し、それを他のものにラップします。したがって、CSSセレクタは動作しません。上記の例を使用すると、次のようなことをする必要があります。

div.ui-dialog div#test label { 
    display: block; 
} 
div.ui-dialog div#test input { 
    padding-left: 100px; 
} 
0

CSSが機能するはずです。 cssがどのようにカスケードするかには問題があるかもしれません。 "#dialog div#test label"のようなルールを適用するより具体的なセレクタがありますか?残りのhtml/cssがなければ、詳細を指摘することは不可能です。火かき棒を入手し、それらの要素にどのようなルールが適用されているかを確認します。

+0

ここで私が投票した理由はわかりません。元の質問には不完全な情報がありました。それは元の情報に基づいて良い推測でした – tom

関連する問題