0
にコードを修正しないであろう資産/ Styles.cssをとしてナビゲーションバーには、ページの最上部
<?php
session_start();
require_once 'class.user.php';
$user_home = new USER();
$_SESSION['userSession'] = '';
/*if(!$user_home->is_logged_in())
{
$user_home->redirect('index.php');
}*/
$stmt = $user_home->runQuery("SELECT * FROM tbl_users WHERE userID=:uid");
$stmt->execute(array(":uid"=>$_SESSION['userSession']));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html class="no-js">
<head>
<title><?php echo $row['userEmail']; ?></title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Member Home</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i>
<?php echo $row['userEmail']; ?> <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="logout.php">Logout</a>
</li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="active">
<a href="#">NavBar Link #1</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Let's try some dropdown links<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="menu1">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
<li><a href="#">Link #5</a></li>
</ul>
</li>
<li>
<a href="#">One last NavBar link</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<span style="display: inline-block;"><h1>Refer to the alerts below</h1></span><span style="display: inline-block;"><h5> (Issued against the items' Reference Status)</h5></span>
<h2>Inventory Table</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>PartNo</th>
<th>MfrPartNo</th>
<th>MfrNo</th>
<th>PartDescription</th>
<th>PrimePart</th>
<th>PMA</th>
<th>KeyWord</th>
<th>PartType</th>
<th>PlanningType</th>
<th>ReferenceStatus</th>
</tr>
</thead>
<?php
$dbh = new PDO("mysql:host=localhost;dbname=dbtest", 'root', 'root');
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$sth = $dbh->prepare("SELECT `No`, `PartNo`, `MfrPartNo`, `MfrNo`, `PartDescription`, `PrimePart`, `PMA`, `KeyWord`, `PartType`, `PlanningType`, `ReferenceStatus` FROM part_no");
$sth->execute();
?>
<?php foreach($sth->fetchAll() as $row) : if(($row["ReferenceStatus"]<2)&&($row["ReferenceStatus"]!="Active")){?>
<tr>
<td><?php echo $row["No"]; ?></td>
<td><?php echo $row["PartNo"]; ?></td>
<td><?php echo $row["MfrPartNo"]; ?></td>
<td><?php echo $row["MfrNo"]; ?></td>
<td><?php echo $row["PartDescription"]; ?></td>
<td><?php echo $row["PrimePart"]; ?></td>
<td><?php echo $row["PMA"]; ?></td>
<td><?php echo $row["KeyWord"]; ?></td>
<td><?php echo $row["PartType"]; ?></td>
<td><?php echo $row["PlanningType"]; ?></td>
<td><?php echo $row["ReferenceStatus"]; ?></td>
</tr>
<?php }endforeach;?>
</table>
</div>
<!--/.fluid-container-->
<script src="bootstrap/js/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="assets/scripts.js"></script>
</body>
</html>
カスタムスタイルがここ
/** Home Page **/
body {
padding-top: 60px;
padding-bottom: 40px;
background-color: #F5F5F5;
}
/** Login Page **/
#login {
padding-top: 40px;
padding-bottom: 40px;
}
footer
{
text-align: center;
font-family: monospace;
}
footer a
{
text-decoration: none;
}
footer a:hover
{
text-decoration: underline;
}
#love_footer_image
{
display: inline-block;
width: 1.1em;
height: 0.9em;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Love_Heart_SVG.svg);
background-size: cover;
}
#logo
{
width: 77vmin;
height: 23vmin;
background-image: url(https://upload.wikimedia.org/wikipedia/hi/e/e3/Air_India_Logo.svg);
background-size: cover;
margin: 0 auto;
}
#login .form-signin {
min-width: 77vmin;
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
overflow-y: hidden;
background-color: #FDFCFC;
border: 0.3em solid #C4082E;
border-bottom: 0.3em solid #C4082E;
border-right: 0.3em solid #C4082E;
border-radius: 1em;
/*background-color: #FDFCFC;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);*/
}
#login .form-signin .form-signin-heading,
#login .form-signin .checkbox {
margin-bottom: 10px;
}
#login .form-signin input[type="text"],
#login .form-signin input[type="password"],
#login .form-signin input[type="email"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
/** 2 level sub menu **/
.dropdown-menu-with-subs .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu-with-subs li:hover .sub-menu {
visibility: visible;
display: block;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
/** Global **/
#content {
margin-left:0px;
}
.hide-sidebar, .show-sidebar {
cursor: pointer;
}
.padd-bottom {
margin-bottom: 5px;
}
.breadcrumb {
margin: 0 0 0px;
padding: 10px 0px;
background-color: transparent;
}
.block {
border: 1px solid #ccc;
background: white;
margin: 1em 0em;
border-top: none;
}
.block-content {
margin: 1em;
min-height: .25em;
}
.block-header {
margin-bottom: 0px;
border-right: none;
border-left: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.block-header div {
padding-top: 10px;
}
.chart-bottom-heading {
margin-top: 5px;
text-align: center;
}
/** Side Bar **/
.bs-docs-sidenav {
max-width: 228px;
margin: 30px 0 0;
padding: 0;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
display: block;
width: 190px \9;
margin: 0 0 -1px;
padding: 8px 14px;
border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
position: relative;
z-index: 2;
padding: 9px 15px;
border: 0;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
opacity: 1;
}
.bs-docs-sidenav.affix {
top: 40px;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
/* Icons
------------------------- */
.the-icons {
margin-left: 0;
list-style: none;
}
.the-icons li {
float: left;
width: 25%;
line-height: 25px;
}
.the-icons i:hover {
background-color: rgba(255,0,0,.25);
}
あり、ここでの問題は、ナビゲーションバーを見たときということですモバイル解像度では、上部に固定されません。ここではスクリーンショットが取り付けられており、上部の余分な空きスペースがマークされて双頭矢印で
は、誰も私がこの問題を解決する助けてくださいもらえますか？
あなたのCSSを 'assets/styles.css'から見ずに知るのは難しいですか...。 –
ここでそれを編集しました。私はjsfiddleが今どこにいるのかブロックされていると思う。私が確認したようにCodepenも。 –
あなたの体の詰め物とは関係があるかもしれません。 –