jQueryも使用するオープンソースの流動的なhtmlレイアウトに取り組んでいます。過去数時間問題を解決できなかったので、私を夢中にさせている問題が 1 つあります。かなり単純なものが欠けていると確信しています。見つけていただければ幸いです。
問題はmin-height、 div#content-wrapper にand margin-left/を持たせようとしたときmargin-rightです。基本的には、ページを埋め、左右にスペースを空ける必要があります。
cssdeck http://cssdeck.com/labs/fluid-html-templateのワークスペースで表示すると問題ないように見えますが、 http ://cssdeck.com/labs/full/でフルスクリーンで表示すると問題ありません。 fluid-html-template/0、Chromium Developer Tools (F12) で、クラスがの下のスタイル ルールに#content-wrapper一致していないことがわかります。何が原因でしょうか? これをオーバーライドする唯一の方法は、スタイルを属性を持つタグに直接適用することでした。div#content-wrapperMatched CSS Rulesdivstyle
テンプレートは jade-lang で書かれているので、作業を簡単にするために計算された html、JavaScript、および CSS コードをここに示します。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://github.com/WeaponXI/cplog/raw/master/public/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://raw.github.com/WeaponXI/cplog/master/public/javascripts/jquery-ui-1.9.1.custom.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WeaponXI</title>
</head>
<body>
<div class="wrapper">
<div class="top-nav ui-widget-header">Home | Login | Etc</div>
<div class="header">
<div class="logo"></div>
<div class="menu ui-widget-header">
<div id="menu">
<ul>
<li> <a href="/" title="Home"> Home</a>
<ul>
<li> <a href="/users" title="Users"> Users</a>
</li>
<li> <a href="/users2" title="Users"> Users</a>
</li>
</ul>
</li>
<li> <a href="/cplog" title="Captains Logs"> Captains Logs</a>
</li>
<li> <a href="/contact" title="Contact"> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="left-panel"></div>
<div id="content-wrapper" class="ui-widget-content ui-corner-all">
<div id="content">Content</div>
</div>
<div class="right-panel"></div>
<div class="bottom-panel"></div>
</div><!--
<end>wrapper</end>-->
<footer>
<div id="footer"><em>Copyright © 2013 WeaponXI.com</em></div>
</footer>
</body>
</html>
CSS:
body, html {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
}
.top-nav {
z-index:0 !important;
padding:4px;
background-color:#333;
color:white;
font-size:0.8em;
opacity:0.6;
}
.top-nav:hover {
opacity:0.9;
}
.header {
height: 200px;
background: #fff;
overflow: hidden;
display: block;
}
.logo {
/*width: 451px;*/
height:130px;
background-image:url(https://github.com/WeaponXI/cplog/raw/master/public/images/logo.png);
background-position:center center;
background-repeat:no-repeat;
}
.menu {
z-index:0 !important;
position:relative;
text-align: left;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;
width:100%;
height:30px;
font-size : 0.7em;
}
.ui-menu { position: absolute; width: 100px;}
#content-wrapper {
width:auto;
margin-left:20px;
margin-right:20px;
min-height:600px;
margin-bottom:20px;
}
#content {
padding: 20px;
font:1em;
}
footer {
width: auto;
margin-left:20px;
margin-right:20px;
border-top: thin solid #999;
display: block;
}
#footer {
padding:10px;
font-size:0.8em;
}
JavaScript: (これはメニューのみを処理します)
$(function() {
$(document.createElement('div')).attr('id', 'menu-p').appendTo('#menu');
$(document.createElement('div')).attr('id', 'menu-c').appendTo('#menu');
$('#menu > ul').children('li').children('a').each(function(i) {
$(this).attr('id', 'menu-p-' + i).parent().children('ul').attr('id', 'menu-c-' + i).appendTo('#menu-c');
$(this).appendTo('#menu-p').parent().parent().children('ul').remove();
});
var shownmenu;
$('#menu-p').children('a').each(function() {
var n = $(this).attr('id').split('-')[2];
var button = $(this);
if ($('#menu-c-' + n).length) {
button.button({
text: true,
icons: {
secondary: "ui-icon-triangle-1-s"
}
}).hover(function() {
$('#menu-c-' + n).show().position({
my: "left top",
at: "left bottom",
of: this
});
}, function() {
$('#menu-c-' + n).hover(function() {
$('#menu-c-' + n).show();
}, function() {
$('#menu-c-' + n).hide();
});
$('#menu-c-' + n).hide();
});
$('#menu-c-' + n).hide().menu();
}
else {
button.button();
}
});
$('#menu-p').buttonset();
});