ここでレスポンシブ メニューを自分の Web サイトに統合しようとしていますが、カラーボックス スクリプトも実行しています。問題は、レスポンシブ メニューの css (ここで取得したもの) がカラーボックスの css を台無しにしていることです。css は次のとおりです。
カラーボックスCSS:
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;
overflow:hidden; }
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
レスポンシブ メニューの CSS は次のとおりです。
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
text-align: right;
/* overflow: hidden; */
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover , nav li a.current{
background: #222;
}
nav li a:visited {
color:#FFF;
}
nav li:last-child a {
border: none;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
...more responsive css STUFF ( unimportant)
問題を特定しました。私はそれを修正する助けが必要です. カラーボックスの写真を開くと、ボックス自体がポップアップの残りの部分よりも小さくなっています。だから、私はFireFox 18.0.1でテストしていますが、Chromeバージョン24.0.1312.56 mを使用していて、Chromeで動作する場合(すべてが表示されます)
問題は、メニュー css の次の行にあります。
-moz-box-sizing: border-box;
私はそれが何をしているのかを知るにはあまり慣れていませんが、それを取り出すと、私のレスポンシブデザインメニューは適切に機能しませんが、カラーボックスは機能します. cssの「*」の部分を抜いて別の場所に追加しようと考えているのですが、どうすればよいでしょうか？divなどにハードコードできますか? ここに私のhtmlがあります:
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/menu-css.css">
<link rel="stylesheet" href="colorboxjs/colorbox/colorbox1.css" />
<script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="colorboxjs/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".gallery3").colorbox({rel:'gallery3', transition:"none", width:"75%", height:"75%"});
});
</script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
</div><!-- container -->
<div class="container" style="background:lightgray; padding: 15px">
<h3> 5 menu right </h3>
<nav>
<ul>
<li><a class="current" href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
</ul>
</nav>
</div>
<div class="container" style="background:lightgray; padding: 15px">
<P>THIRD TYPE - No Transition + fixed width and height (75% of screen size)</P>
<a class='gallery3' href='images/slider-1.jpg'>Pic 1</a>
<a class='gallery3' href='images/slider-2.jpg'>Pic 2</a>
<a class='gallery3' href='images/slider-3.jpg'>Pic 3</a>
</div>
<br/><br/>
<!-- End Document
================================================== -->
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>
高度なすべてのヘルプに感謝します。〜マイ