Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
HTML navigations bar nach oben bewegen in Bootstrap
- Ersteller evian1
- Erstellt am
failormooNN
Lt. Commander
- Registriert
- März 2013
- Beiträge
- 1.276
Mir würde direkt position:fixed; in den Sinn kommen, aber anhand des
HTML-Schnippsels kann man nur raten.
Kannst Du einmal den Link zur Seite reinstellen?
HTML-Schnippsels kann man nur raten.
Kannst Du einmal den Link zur Seite reinstellen?
Für html und body 100% Breite und Höhe sowie Margin und Padding auf 0 setzen.
Wenn dann nix mehr drumherum ist, müsste der ganz oben anschlagen.
Ansonsten mit den F12 Tools in den Browsern gucken woher der Abstand kommt.
Wenn dann nix mehr drumherum ist, müsste der ganz oben anschlagen.
Ansonsten mit den F12 Tools in den Browsern gucken woher der Abstand kommt.
die Seite ist nicht Online bzw. nur auf meinem Localhost.
fixed on Top hätte ich auch gedacht in dem Quellcode steht es auch nur muss vielliecht in der css Datei etwas noch stehen?
es ist noch nicht ganz fertig arbeite noch an anderen Dingen gleichzeitig
fixed on Top hätte ich auch gedacht in dem Quellcode steht es auch nur muss vielliecht in der css Datei etwas noch stehen?
es ist noch nicht ganz fertig arbeite noch an anderen Dingen gleichzeitig
HTML:
<!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">
<meta name="description" content="Bootstrap 3 Tutorial from BootstrapBay.com">
<meta name="author" content="BootstrapBay.com">
<title>BioArchiev Science V1.0</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ></a>
</div>
</button>
<a class="navbar-brand" href="#">Logout</a>
</div>
<div class="navbar-collapse collapse"> <!-- Portal -->
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portal <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Calander</a></li>
<li><a href="#">File Storage</a></li>
</ul>
</li>
<li class="dropdown"> <!-- Patienten -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Patienten <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Calander</a></li>
<li><a href="#">File Storage</a></li>
</ul>
</li>
<li class="dropdown"> <!-- Klinische Daten -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Klinische Daten <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Calander</a></li>
<li><a href="#">File Storage</a></li>
</ul>
</li>
<li class="dropdown"> <!-- Proben -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Proben <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Calander</a></li>
<li><a href="#">File Storage</a></li>
</ul>
</li>
<li class="dropdown"> <!-- Administration -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Calander</a></li>
<li><a href="#">File Storage</a></li>
</ul>
</li>
<li class="active"><a href="#">Hilfe</a></li> <!-- Hilfe -->
<li><a href="#contact" data-toggle="modal">Kontakt</a></li> <!-- Kontakt -->
</ul>
</div> <!--/.nav-collapse -->
</div>
</div>
<div class="container"> <!--/.Input Field -->
<div class="patientenDatenEingabeListe">
<div class="Patientenheader">
<input class="input-xs" placeholder="Vorname" type="text"><br/>
</div>
</div
</div
</div
</div)
<div class="container">
<div class="patientenDatenEingabeListe1">
<ul class="Datenliste">
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">Subjekt</a>
</div>
<li class="list-group-item">ID</li>
<li class="list-group-item">Projekt </li>
<li class="list-group-item">Typ </li>
<li class="list-group-item">Geburtsdatum/Generation </li>
<li class="list-group-item">Alter</li>
<li class="list-group-item">Charakteristiken </li>
</ul>
</div
</div>
</div>
</div)
<input type="text" class="form-control" placeholder="Patienten Suchliste">
<div class="container">
<div class="patientenDatenEingabeListe2">
<ul class="Eingabefelddatenliste">
<input type="text" class="form-control" placeholder="ID">
<input type="text" class="form-control" placeholder="Patienten Suchliste">
<input type="text" class="form-control" placeholder="Patienten Suchliste">
<input type="text" class="form-control" placeholder="Patienten Suchliste">
<input type="text" class="form-control" placeholder="Patienten Suchliste">
<input type="text" class="form-control" placeholder="Patienten Suchliste">
</ul>
</div
</div>
</div)
<div class="container">
<div class="Headerpatient">
<h4> Patienten </h4>
</div>
<div class="container">
<div class="Datenpatient">
<h4> Daten </h4>
</div>
<div class="container">
<div class="junmbotron">
<br>
</br>
<div class="container">
<div class="filtersearch-group">
<span class="filter-group-btn">
<button class="btn btn-default" type="button">Suche</button>
</span>
<input type="text" class="form-control" placeholder="Patienten Suchliste">
</div>
</div>
<div class="sidebody">
<br>
</br>
<div class="patlist-group"> <!-- Hier gibst du ein Namen der dadrauf zugreift -->
<table class="table table-bordered table-striped">
<tbody>
<tr>
<tr class="success">
<td>ID</td>
<td>Vorname</td>
<td>Nachname</td>
</tr>
<tr>
<td>00001</td>
<td>Bernd</td>
<td>Musterman</td>
</tr>
<tr>
<td>00002</td>
<td>Uwe</td>
<td>Mayer</td>
</tr>
<tr>
<td>00003</td>
<td>Uwe</td>
<td>Mayer</td>
</tr>
<tr>
<td>00004</td>
<td>Uwe</td>
<td>Mayer</td>
</tr>
<tr>
<td>00005</td>
<td>Uwe</td>
<td>Mayer</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="media"> <!-- Logo! -->
<div class="media-left">
<a href="#">
<img class="media-object" src="img/logo_medeora_156x40.png" alt="medeora">
</a>
</div>
<!-- Fixed footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <!-- Facebook und andere Zeichen -->
<div class="container">
<div class="navbar-text pull-left">
<p>BioARCHIVE Science Version 2.0.0.</p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form">
<div class="modal-header">
<h5>Condtact<h5>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="contact-name" placeholder="Vor und Nachname">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact-email" placeholder="example@domain.com">
</div>
</div>
<div class="form-group">
<label for="contact-message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>]
HTML:
.navbar-text > a {
color: inherit;
text-decoration: none;
}
.sidebody{ /* Sidebar */
background:#151718;
width:200px;
height:100%;
display:block;
position:absolute;
left:0px;
top:0px;
transition:left 0.3s linear;
}
tr{
margin:0px;
padding:0px;
}
tr li{
list-style:none;
}
tr li a{
background:#1C1E1F;
color:#ccc;
border-bottom:1px solid #111;
dsiplay:block;
width:180px;
padding:10px;
}
body {
padding-top: 70px;
padding-bottom: 100px;
}
p {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
}
.navbar-default { /* Navigation oberhalb */
background-color: #87CeFa ;
border-color: #FFFFFF;
color: #FFFFFF;
left: 0px; top: 50px; z-index: 3;
}
.navbar-default .navbar-brand { /*Logout Schrift*/
position: fixed;
right: 0px; top: 50px; z-index: 3;
border: none
}
.input-xs{ /* Eingabe liste Patient */
position: fixed;
right: 380px; top: 200px; z-index: 5;
border: none
color: #FFFFFF;
background: #F2F2F2;
}
.input-xs1{
position: fixed;
right: 380px; top: 230px; z-index: 5;
width: 50%;
height: 200px;
border: none
color: #FFFFFF;
background: #F2F2F2;
}
.Headerpatient{
position: fixed;
left: 20px; top: 100px; y-index: 6;
border: none
}
.Datenpatient{
position: fixed;
right: 1200px; top: 100px; y-index: 6;
border: none
}
.Datenliste{ /*Patientliste*/
position: fixed;
right: 1000px; top: 190px; z-index: 5;
width: 15%;
height: 100px;
border: none
float: left;
}
.Eingabefelddatenliste{
position: fixed;
right: 600px; top: 280px; z-index: 5;
width: 20%;
height: 100px;
border: none
color: #FFFFFF;
}
.patlist-group{ /* Patientenliste Vorschau */
position: absolute;
left: 10px; top: 190px; z-index: 3;
border: none
float: right;
}
.filter-group-btn{ /* Filter Search */
position: absolute;
left: -60px; top: 0px; z-index: 4;
border: none
float: left;
}
.filtersearch-group{ /* Filter nearby Search */
position: absolute;
left: 80px; top: 150px; z-index: 3;
border: none
float: left;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #18BC9C;
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #696969 ;
}
.navbar-default .navbar-nav > li > a:hover, /* Hintergrund Farbgegbung der Schriften beim drüber gehen */
.navbar-default .navbar-nav > li > a:focus {
color: #696969 ;
background-color: transparent;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #1A242F;
color: #FFFFFF;
}
.btn-primary {
background-color: #2C3E50;
border-color: #2C3E50;
color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #FFFFFF;
background-color: #1E2A36;
border-color: #161F29;
}
.btn-success {
background-color: #18BC9C;
border-color: #18BC9C;
color: #FFFFFF;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #FFFFFF;
background-color: #13987E;
border-color: #13987E;
}
.btn-default {
background-color: #95A5A6;
border-color: #95A5A6;
color: #FFFFFF;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-success { /* Hintergrund Farbgegbung der Schriften beim drüber gehen #FF00FF */
color: #FFFFFF;
background-color: #7F9293;
border-color: #74898A;
}
.home-thumb img:hover {
transform: scale(1.1);
}
.thumbnail img {
transition: all 0.3s ease 0s;
width: 100%;
}
.thumbnail {
overflow: hidden;
}
.bg-grey {
background-color: #f9f9f9;
}
.carousel {
padding-bottom: 20px;
}
Ähnliche Themen
- Antworten
- 2
- Aufrufe
- 904
- Antworten
- 10
- Aufrufe
- 3.227
- Antworten
- 1
- Aufrufe
- 1.869