HTML navigations bar nach oben bewegen in Bootstrap

evian1

Cadet 3rd Year
Registriert
Feb. 2017
Beiträge
63
Hallo zusammen,

ich hab folgendes Problem. Mein Navigationsbar möchte sich nicht ganz oben fixieren. Wie mache ich das am besten hier ist mein Quellcode sieht einer vielleicht dadrin den Fehler ?

HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	
<div class="container">


Bild3.png
 
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?
 
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.
 
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

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;
}
 
Ich habe es es lag an der Bennenung habe im die classe in der CSS datei nicht bennant
Ergänzung ()

genau :) Lawnmower danke dir
 
Zurück
Oben