html - Navbar above the content (like in an above layer) -


i'm trying put navbar under big header, going in front of it, isn't above kinda in front

showing problem

in code navbar it's under "debugando" showing above it, want stay under not working can't find why. think position or float.

code( first css html ):

body {  	margin: 0 0 0 0;  	padding: 0 0 0 0;  	font-family: josefin sans, sans-serif;  }    .navbar {  	background: #428f48;  	height: 40px;  	border-radius: 0px;    	margin: 0 0 0 0;  	padding: 0 0 0 0;  }    .nav {  	margin-top: 5px;  	margin-left: 50px;  }    .nav-pills>li {  	font-size: 24px;  	margin-left: 20px;  }    .jumbotron {  	background: #27b032;  	width: 100%;  	margin: 0 0 0 0;  	padding: 0 0 0 0;  	position: absolute;  }    .title {  	font-size: 80px;  	margin-left: 10%;  	padding:  40px 0 40px 0;    	float: left;	  }    .description {	  	font-size: 20px;  	margin-left: 5%;  	padding-left: 3%;      border-left: 1px solid black;      height: 60px;      margin-top: 65px;        float: left;      text-align: center;  }    .description span{  	margin-top: 15px;  	position: absolute;  }    .dot {  		-webkit-animation-name: blink;  		-webkit-animation-duration: 1s;  		-webkit-animation-fill-mode: both;  		-webkit-animation-iteration-count: infinite;      		animation-name: blink;  		animation-duration: 1s;  		animation-fill-mode: both;  		animation-iteration-count: infinite;  }    @-webkit-keyframes blink {  		  		25% {opacity: 100;}  		50% {opacity: 0;}  		25% {opacity: 100;}    }    @keyframes blink {  		25% {opacity: 100;}  		50% {opacity: 0;}  		25% {opacity: 100;}  }    html:
<html>    <head>    	<title>debugando</title>  	  	<meta charset="utf-8">    	  	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  	<link rel="stylesheet" type="text/css" href="style.css">      	<link href='http://fonts.googleapis.com/css?family=josefin+sans:400,700&subset=latin-ext' rel='stylesheet' type='text/css'>     </head>    <body>  	  	<!--- top -->  	<div class="content-fluid">    		<div class="jumbotron">    						<div class="title">  							  							<span>debugando</span><span class="dot">.</span>    						</div>  					    						<div class="description">  							  							<span>    							descrição foda será inserida aqui.    							</span>    						</div>  					  		</div>    		<div class="navbar">  			  			<ul class="nav-pills">    				<li>início</li>  				<li>contato</li>    			</ul>    		</div>    	</div>    <!--<script src="js/jquery-2.1.3.min.js"></script>-->  <script src="js/bootstrap.min.js"></script>  </body>    </html>

i can use bootstrap if needed. trying help!

first if using bootstrap you'll need add .clearfix div class .jumbotron.

<div class="jumbotron clearfix"> 

then remove absolute positioning .jumbotron

.jumbotron {     background: #27b032;     width: 100%;     margin: 0 0 0 0;     padding: 0 0 0 0; } 

hope helps.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -