0
나는 CSS 탭 디자인 페이지 일하고
이이처럼 보이는 방법입니다 : 이것은이다페이지 보여주는 불필요한 공간
코드입니다 (test2.php) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/ajaxtabs.css" />
<script type="text/javascript" src="js/ajaxtabs.js">
</script>
</head>
<body>
<?php
$page = isset($_GET['test2']) ? $_GET['test2'] : "" ;
?>
<ul id="countrytabs" class="shadetabs" style="clear:both">
<!--<li><a href="#" rel="#default" class="selected">Tab 1</a></li>-->
<li><a href="admin/add-client.php" rel="countrycontainer">Client</a></li>
<li><a href="admin/add-vendor.php" rel="countrycontainer">Vendor</a></li>
<!--<li><a href="admin/add-client.php" rel="#iframe">Tab 4</a></li>-->
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:100%; height:100%; margin-bottom: 1em; padding: 10px; clear:both;">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<hr />
</body>
</html>
그러나 일단이 코드를 호출하는 다른 코드의 <div> 안에 넣으면 불필요한 공간이 표시됩니다. 나는 index.php가 test2.php의 탭과 같이 할
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ISYS</title>
<link href="../css/main-style.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.tools.min.js"></script>
<script src="../js/addfunction.js"></script>
<script src="../js/editfunction.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
</script>
<script>
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
</script>
</head>
<body>
<?php
require("../dbconnect.php");
$page = isset($_GET['page']) ? $_GET['page'] : "test2" ;
?>
<div class="container">
<div class="header"><img src="../images/CTILOGO.jpg" width="20%" height="90" style="background-color: #8090AB; display:inline;" />
<a href="../logout.php"><img src="../images/logout.png" class="headermenu" style=" display:inline;" /></a>
<a href="#home"><img src="../images/home.png" class="headermenu" style=" display:inline;" /></a>
<a href="javascript:changePassword()" title="Change Password"><img src="../images/user.png" class="headermenu" style=" display:inline;" /></a>
<!-- end .header --></div>
<div class="sidebar1" id="link_ul">
<ul class="nav">
<li><a href="index.php?page=client">Client</a></li>
<li><a href="index.php?page=vendor">Vendor</a></li>
<li><a href="index.php?page=product">Product</a></li>
<li><a href="index.php?page=user">Users</a></li>
<li><a href="index.php?page=test2">test</a></li>
</ul>
<script>
/*for active link*/
(function(){
$('#link_ul a').bind('click', function(e){
var me=$(this);
var as = $('#link').find('a');
as.removeClass('current');
me.addClass('current');
});
}());
</script>
<!-- end .sidebar1 --></div>
<div class="content">
<?php
include(''.$page.'.php');
?>
<!-- end .content --></div>
<div class="footer">
<p></p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
:
는 여기에 내 코드 (index.php를)입니다. 나는 CSS 부분에서 아무 것도 바뀌지 않았고 디스플레이를 제외하고는 모든 것이 잘 작동한다. 코드의 어디에 잘못되었는지 확신 할 수 없습니다. 나는 어떤 도움을 주셔서 감사하겠습니다.
의 상단에이 코드를 넣어 대부분의 경우 기본-있는 style.css 해당 요소의 모든 인스턴스에 영향을 미치는 요소, 아마 리, 또는 A, 패딩을 적용한다는 것입니다. 브라우저에서 검사기 도구를 사용하는 것에 익숙하십니까? – Alex
죄송합니다. 불필요한 공간은 무엇입니까? 글꼴을 제외하고는 화면 사이에 차이점이 없습니다. –