2016-10-25 6 views
0

私は自分のローカルマシンでどのようにしたいのですか?私はサイトを作っていますが、他のコンピュータで見ると、スライドショーの画像はすべて異なるサイズになります。私のコンピュータではうまくいきますが、私のローカル環境で問題が見えないので、コードのトラブルシューティングに問題があります。あなたのローカルマシンで見ることができないフロントエンドの問題のトラブルシューティング方法についてアドバイスをいただいている人はいますか?私はW3Cバリデーターを通してコードを実行しましたが、圧倒されましたが、出力されます。どんな指導も大歓迎です! (すべてのインラインものについて申し訳ありませんが、私はDreamweaverで働いている友人を助けていますし、このようにそれを残すように頼まれました。)ブーストカットカルーセルの異なるサイズ

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>Full Slider - Start Bootstrap Template</title> 

<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 
    <!-- Bootstrap Core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- Modernizer --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
<!-- Focuspoint --> 
<script type="text/javascript" src="js/jquery.focuspoint.js"></script> 

<link rel="stylesheet" href="css/focuspoint.css"> 
<!-- bx slider --> 
<script src="js/plugins/jquery.fitvids.js"></script> 
<script src="js/jquery.bxslider.js"></script> 
<link href="css/jquery.bxslider.css" rel="stylesheet"> 

<script type="text/javascript"> 
    //<![CDATA[ 

    (function($) { 
     $(document).ready(function() { 

     //Fire plugin 
     $('.focuspoint').focusPoint(); 
     $('.bxslider').bxSlider({ 
      video: true, 
      useCSS: false, 
      controls: true 
     }); 
     }); 
    }(jQuery)); 


    //]]> 
</script> 

<style type="text/css"> 
    .navbar.transparent.navbar-inverse .navbar-inner { 
     background: rgba(0,0,0,0.4); 
     font-color: #000; 
    } 

    .navbar-nav > li{ 
     margin-left:-10px; 
     margin-right:-10px; 

    } 

    .icon-bar { 
     background-color:#FFF !important; 
    } 

    .nav>li>a:focus, .nav>li>a:hover { 
     text-decoration: underline; 
     color: #FFC; 
    } 

    .nav>li>a:focus, .nav>li>a:hover { 
     background-color: transparent; 
    } 

    body 
    { 
     background-image: url(Images/Dust_Background.jpg); 
     background-size: cover; 
     background-repeat: no-repeat; 
     background-color: black; 
     background-attachment: fixed; 
    } 

    .bg 
    { 
     width: 100%; 
     z-index: 0; 
    } 

    a { 
     color: #FFC; 
     text-decoration: none; 
    } 

    a.pull-left { 
     width: 25%; 
     margin-top: 10px; 
    } 

    .navbar-collapse{ 
     border-top:0px !important; 
     box-shadow:none; 
    } 

    body,td,th { 
     font-family: "Tw Cen MT", Helvetica, "MS Reference Sans Serif"; 
     font-size: 16px; 
     color: #FFF; 
    } 
    a:link { 
     text-decoration: none; 
     color: #FFF; 
    } 
    a:visited { 
     text-decoration: none; 
     color: #FFF; 
    } 
    a:hover { 
     text-decoration: none; 
     color: #FFC; 
    } 
    a:active { 
     text-decoration: none; 
    } 

    @media (max-width: @screen-xs) { 
     body{font-size: 10px;} 
    } 

    @media (max-width: @screen-sm) { 
     body{font-size: 14px;} 
    } 

    #style_text { 
     text-align: justify; 
     letter-spacing: .8px; 
     font-weight: 100; 
    } 

    #style_text p { 
     padding: 10px; 
    } 

    .img-responsive { 
     display: block; 
     max-width: 100%; 
     height: auto; 
    } 

    .bx-wrapper .bx-viewport { 
     border: none; 
     -webkit-box-shadow: none; 
     background: transparent; 
    } 

    .bx-wrapper .bx-pager.bx-default-pager a { 
     background: rgba(255, 255, 255, 0.25) 
    } 

    .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { 
     background: rgba(255, 255, 255, 0.65); 
    } 

    .bx-wrapper .bx-loading { 
     background: black; 
    } 

    </style> 

    <body> 

     <!-- Navigation --> 
    <nav class="navbar navbar-transparent navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="test"> 
     <a href="index_vs3.html" class="pull-left"><img src="Images/kairos_logo.png" style=" 
     width: 250%;"></a> 
     </div> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="film_vs7.html">THE FILM</a></li> 
      <li><a href="screenings.html">SCREENINGS</a></li> 
      <li><a href="contact_vs3.html">CONTACT</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

    <ul class="bxslider"> 
    <li> 
     <iframe src="http://player.vimeo.com/video/131032179" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
    </li> 
    <li><img src="Images/EbelKitchen.jpg" /></li> 
    <li><img src="Images/LightningHole.jpg" /></li> 
    <li><img src="Images/CharlesAlex.jpg" /></li> 
    <li><img src="Images/Edna_JoeysRoom.jpg" /></li> 
    <li><img src="Images/neoncross.jpg"/></li> 
    <li><img src="Images/overpass.jpg"/></li> 
    <li><img src="Images/TJRosieTrainWalk.jpg" /></li> 
    </ul> 


    <!-- Page Content --> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-l"> 
     <div id="style_text"> 
      <p> 
      Through a series of collective dreams an other worldly being invades the characters' dream spaces, revealing their carnivorous desires and subconscious underbellies. Relationships intertwine in unusual and fantastical landscapes as television monitors, radio frequencies, orifices and dreams all become portals to access this alternate dimension of carnality and desire.</p> 
      <p> 
      The characters are forced to ask what is self? What is other? What must we give up to become something else?</p> 
     </div> 
     </div> 
    </div> 
    </div> 

    </body> 
</html> 

答えて

0

画像に高さ/幅を追加する必要があるように見えます。そうしないと、それぞれのサイズで表示されます。

関連する問題