2017-06-14 5 views
0

私のウェブサイトをスタイルすることはできません...例えば、<pre>タグ。カントスタイルブートストラップと通常の要素

私は何もしません。私はwhoisの結果をスタイルしようとしています。私はdivでそれをラップしようとしました。そして、プレタグだけをスタイリングし、すべてをスタイリングしました。私はそれを働かせるように見えない。私は何か愚かなことを逃していると思っています。あなたは、私が(ちょうど電気ショック療法前を持つそれらすべてを削除しようとした)

ナビゲーションバー多数の組み合わせを試してみましたが、CSSから見ることができます: -

<?php 
## Includes nav bar 
include('navbar.php'); 
include('phpfiles/domainclass.php'); 

if (isset($_GET['userInput'])) 
{ 
    $domainName = $_GET['userInput']; 
} 

?> 

<!---- The input form ----> 
<form class="form"> 
<div class="domainquery"> 
    <div class="input-group"> 
     <input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn btn-primary btn-md">Query Domain</button> 
     </div> 
    </div> 
</div> 
</form> 
<!---- End of input form ---> 

<!---- start of content ---> 
<div class ="container-fluid"> 

<!----- Check of the variable has been set before showing ---> 
    <?php 
    ##checks if the variable name $domainName is set, before loading everything below 
    if (isset($domainName)): 
    ?> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12"> 

    <h3>DNS Records </h3> 
      <div class="dnscontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".dnscontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "<?php echo $domainName ?>", 
           q: 'dns' 
         }); 
        </script> 

      </div> 

    <h3>SSL Result</h3> 


    <h3>NMAP Result</h3> 
      <div class="nmapcontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".nmapcontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "<?php echo $domainName ?>", 
           q: 'nmap' 
         }); 
        </script> 
      </div> 
    <h3>PING Result</h3> 
        <div class="pingcontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".pingcontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "<?php echo $domainName ?>", 
           q: 'ping' 
         }); 
        </script> 
        </div> 
<!--- Closing div tag for left column -->   
</div> 

<!--- starting right column --> 
    <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12"> 
     <h3>WHOIS Result</h3> 
      <div class="whoiscontain"> 
        <script> 
          // Loads the return vaue of the call into the "whoiscontain" div. 
          $(".whoiscontain").load("ajaxhandler.php", 
          { // ajax call to pass variable to ajax handler, which then decides what to do with it  
           d: "<?php echo $domainName ?>", 
           q: 'whois' 
          }); 
        </script> 
      <!--Whoiscontain div end -->   
      </div> 
<!--- right column div end -->   
    </div> 

<!--- closing div tag for 1st row ---> 
</div> 
</div> 
<!---- ends the check on if the variable is set -->   
<?php 
###End the "IF" check 
endif 
?> 

<!---- Closing div tag for container-fluid ---> 
</div> 


</body> 
</html> 

Ajaxの戻りページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="javascript.js"></script> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title>CWCS Domain Checker Tool</title> 
</head> 
<body> 
<!--- This Keeps the navbar from staying right near top --> 
<div class="header"> 
</div> 

<!---- Nav bar, Using bootstrap -----> 
<nav class="navbar navbar"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <div class="nav-bar-logo"> 
     <a href="index.php" class="navbar-left"><img src="images/cwcs-logo.png"></a> 
     </div> 
     </div> 
    <div class="nav-list-container"> 
     <ul class="nav navbar-nav"> 
     <li><a href="domaindiagnostics.php">Domain Diagnostics</a></li> 
     <li><a id="sd" href="#">Server Diagnostics</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a id="dc" href="#">Daily Checklist</a></li> 
      <li><a id="bt" href="#">Backup Tracker</a></li> 
      <li><a id="tl" href="#">Task List</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    </div> 
</nav> 
<!------- End of nav bar ----> 

メインページを -

<?php 
include 'domainclass.php'; 

$result = domain::getWhois($domainName); 
?> 

<pre class="whois"> <?php echo $result ?> </pre>; 

スタイルシート

.header 
{ 
    margin:1%; 
} 


.domainquery 
{ 
    margin-bottom:3%; 
    padding:40px 50px; 
} 

.nav-bar-logo 
{ 
    margin-right:20px; 
    padding-right:20px; 
} 

.table 
{ 
    font-size:5px; 
} 
pre .whois 
{ 
white-space:pre-wrap; 
background-color:black; 
color:white; 
word-wrap: break-word; 
} 

.whoiscontain 
{ 
white-space:pre-wrap; 
background-color:black; 
width:100%; 
color:white; 
word-wrap: break-word; 
} 

pre 
{ 
white-space:pre-wrap; 
background-color:black; 
color:white; 
word-wrap: break-word; 

} 

要求されたページのHTML出力(スタイルシートがブートストラップスタイルシートの上にあるのを無視して、何かを試していました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="javascript.js"></script> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title>CWCS Domain Checker Tool</title> 
</head> 
<body> 
<!--- This Keeps the navbar from staying right near top --> 
<div class="header"> 
</div> 

<!---- Nav bar, Using bootstrap -----> 
<nav class="navbar navbar"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <div class="nav-bar-logo"> 
     <a href="index.php" class="navbar-left"><img src="images/cwcs-logo.png"></a> 
     </div> 
     </div> 
    <div class="nav-list-container"> 
     <ul class="nav navbar-nav"> 
     <li><a href="domaindiagnostics.php">Domain Diagnostics</a></li> 
     <li><a id="sd" href="#">Server Diagnostics</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a id="dc" href="#">Daily Checklist</a></li> 
      <li><a id="bt" href="#">Backup Tracker</a></li> 
      <li><a id="tl" href="#">Task List</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    </div> 
</nav> 
<!------- End of nav bar ----> 

<!---- The input form ----> 
<form class="form"> 
<div class="domainquery"> 
    <div class="input-group"> 
     <input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn btn-primary btn-md">Query Domain</button> 
     </div> 
    </div> 
</div> 
</form> 
<!---- End of input form ---> 

<!---- start of content ---> 
<div class ="container-fluid"> 

<!----- Check of the variable has been set before showing ---> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12"> 

    <h3>DNS Records </h3> 
      <div class="dnscontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".dnscontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "lomcn.org", 
           q: 'dns' 
         }); 
        </script> 

      </div> 

    <h3>SSL Result</h3> 


    <h3>NMAP Result</h3> 
      <div class="nmapcontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".nmapcontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "lomcn.org", 
           q: 'nmap' 
         }); 
        </script> 
      </div> 
    <h3>PING Result</h3> 
        <div class="pingcontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".pingcontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "lomcn.org", 
           q: 'ping' 
         }); 
        </script> 
        </div> 

    <h3>Tracert Result</h3> 
        <div class="tracecontain"> 
        <script> 
         // Loads the return vaue of the call into the "dnscontain" div. 
         $(".tracecontain").load("ajaxhandler.php", 
         { // ajax call to pass variable to ajax handler, which then decides what to do with it   
           d: "lomcn.org", 
           q: 'trace' 
         }); 
        </script> 
        </div> 
<!--- Closing div tag for left column -->   
</div> 

<!--- starting right column --> 
    <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12"> 
     <h3>WHOIS Result</h3> 
      <div class="whoiscontain"> 
        <script> 
          // Loads the return vaue of the call into the "whoiscontain" div. 
          $(".whoiscontain").load("ajaxhandler.php", 
          { // ajax call to pass variable to ajax handler, which then decides what to do with it  
           d: "lomcn.org", 
           q: 'whois' 
          }); 
        </script> 
      <!--Whoiscontain div end -->   
      </div> 
<!--- right column div end -->   
    </div> 

<!--- closing div tag for 1st row ---> 
</div> 
</div> 
<!---- ends the check on if the variable is set -->   

<!---- Closing div tag for container-fluid ---> 
</div> 


</body> 
</html> 
+0

変更 '' pre.whois'に.whois'を事前にしてtilz0Rの答え@あたりのあなたの 'link'タグを修正する{ これらのスタイルは 存続すべきです} –

+0

"<"タグがコピー&ペーストエラーでした。私はすべての "前置き"のスタイルを同じtbfにしたいが、ちょうど前のcssセレクタでさえも効果がないように思える。奇妙なことはCSSのいくつかが動作しているようですheader/navbarロゴがうまく動作します – TheOne745665

+1

PHPとAjaxレスポンスを表示するのではなく、ここのページのブラウザにレンダリングされたHTMLを置いて、あなたはCSSの問題を見るためにそれらの部分を一緒に置く必要がありますか? –

答えて

0

ブートストラップのスタイルを設定するには、ブートストラップスタイルを使用したり、独自の新しいスタイルを作成したりできます。

ブートストラップの更新がデザインを変更することはないので、ブートストラップ.CSSを直接​​編集しないことをお勧めします。

あなたは自分のスタイルシートコールをブートストラップコールの下に置いて、自分のスタイルシートを上書きします。

あなたのスタイルが乗り越えても、!importantタグを持つブートストラップルールを乗り越えることができない場合があります。あなたのスタイルシート内のブートストラップ・クラスやIDを使用して、独自のを使用して、新しいルールを作る重要な必要に応じてそれらを通じ強制するために、またはあなたのスタイルのための追加クラスを追加することができ、次のいずれか!

a bit of code

was `<div class="col-md-12">` 

    make `<div class="col-md-12 myCol">` 

をし、その後、

.myColのために、あなたのスタイルシートにルールを作る

関連する問題