0
Seite Bar, Navigationsleiste und Fußzeile arrangieren
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
overflow-x: hidden;
}
/*footer*/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/*navbar*/
.navbar{
\t background-color:black;
\t
\t font-family: sans-serif;
\t font-size: 20px;
}
.navbar-brand{
\t font-size: 20px;
\t
}
.logo1{
\t height: 50px;
\t width: 75px;
\t opacity: 0.1px;
\t left: 0px;
\t top: 0px;
\t position: absolute;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: whites; /*Change active text color here*/
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* side bar*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
\t z-index: 1;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.btn>.btn-default{
}
@media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
\t <link rel="stylesheet" type="text/css" href="style1.css" />
\t <link href="bootstrap.min1.css" rel="stylesheet">
</head>
<body>
<!--top bar-->
<nav class="navbar navbar-inverse navbar-static-top">
\t <div class="container">
\t \t <div class="navbar-header">
\t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
\t \t \t \t <span class="sr-only">Toggle navigation</span>
\t \t \t \t <span class="icon-bar"></span>
\t \t \t \t <span class="icon-bar"></span>
\t \t \t \t <span class="icon-bar"></span>
\t \t \t </button>
\t \t \t <img class="logo1" src="images/capture.png" alt=" logo">
\t \t \t <a class="navbar-brand" href="#">Web Portax</a>
\t \t </div>
\t \t <form class="navbar-form navbar-left" role="search">
\t \t <div class="form-group">
\t \t <input type="text" class="form-control" placeholder="Search">
\t \t </div>
\t \t <button type="submit" class="btn btn-default">Submit</button>
\t \t </form>
\t \t <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
\t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t <li><a href="#">Account Setting</a></li>
\t \t \t \t <li><a href="#">Message</a></li>
\t \t \t \t <li class="dropdown">
\t \t \t \t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
\t \t \t \t \t <ul class="dropdown-menu">
\t \t \t \t \t \t <li><a href="#">Log Out</a></li>
\t \t \t \t \t \t <li><a href="#">Edit Profile</a></li>
\t \t \t \t \t \t <li><a href="#">Manage prefrences</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li> \t
\t \t \t </ul>
\t \t </div>
\t </div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"></a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="jquery1.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap.min1.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- body-->
<!-- Footer -->
<div class="container">
<div class="page-header">
<h1>Content</h1>
</div>
</div>
<footer class="footer">
<div class="container">
\t <div class="row">
<p class="text-muted"> All rights reserved. </p>
\t \t </div>
</div>
</footer>
\t
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Hey Jungs kann mir jemand helfen, wie meine aktuelle Seite sieht wie folgt aus [enter image description here]
Wenn i Klicken Sie auf die Schaltfläche, um die Seitenleiste zu vergrößern, die so aussieht. enter image description here
Wie kann ich die Leerräume zwischen der Kopfzeile und der Seitenleiste beheben? Wie kann ich das kleine graue Ding verschieben, um die Seitenleiste zur linken Ecke zu schalten? Und schließlich, wie kann ich "Web Portax" von der oberen Navigationsleiste leicht nach rechts verschieben, also, wenn ich es minimiere das Logo und der Text nicht zerknittern zusammen?
Ich bin neu zu HTML-Sache so leid für die Amateur-Frage. Vielen Dank!
Okay, ich habe es geschafft, die margin-top einzustellen: -20px; \t Rand links: -20px ;. Allerdings, wenn ich die Sidebar toggle bedecke es immer die Fußzeile und der Inhalt Teil gibt es keine Möglichkeit, dass ich es beheben kann? –
hat das das Problem behoben? –
hast du den Rand der Fußzeile und den Inhalt angepasst? –