Problems with final project


#1



Hi Everyone, I'm just starting on my final project and didn't get very far without the crutch of codeacademy telling me what to do. The issue I'm having is that I can't get my nav bar to sit flush on the bottom border of the container the way that my logo is. It's possible that I linked in bootstrap incorrectly (I'm using CDN http://getbootstrap.com/getting-started/) or that I am doing something else wrong, or a combination of both.

Could someone look at my code and give me their opinion? I have added a black background to the header just so that I can clearly see what's going on but I intend to change it to white once I have everything sorted out.

I'm attaching an image of what I have so far. I've played with margin and padding on almost every item tied to the nav bar. I'll probably style the nav bar a little more after I figure out how to get it to sit on the bottom border of the container.

Any help is greatly appreciated.


html, body {
	margin: 0;
	padding: 0;
}

.container {
	max-width: 1000px;
}

.header {
	margin: 0;
	padding: 0;
	background-color: #000;
}

.header .container {
	padding-top: 50px;
	
}

.header img {
	float: left;
	padding: 0 0;
}

.header .nav {
	background-color: #138BCD;
	border-radius: 0;
	float: right;
	padding-bottom: 0;
}

.header .nav ul {
	list-style: none;
	display: inline;
}

.header ul li {
	display: inline-block;

}

.header .nav a {
	color: #fff;
}

.header .nav a:hover {
	background-color: #62AF42;
	color: #fff;
}

.header a.active {
	background-color: #62AF42;
}


<head>
      <link type="text/css" rel="stylesheet" href="css/main.css"/>
      <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
      <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <title>Best eLearning</title>
    </head>

    <body>
    	<div class="header">
    		<div class="container">
    			<img src="img/generic-logo.jpeg" width="200" height="60">
    			<ul class="nav">
    				<li><a class="active" href="#">Home</a></li>
    				<li><a href="#">Courses</a></li>
    				<li><a href="#">Topics</a></li>
    				<li><a href="#">About</a></li>
                                <li><a href="#">Login</a></li>
    			</ul>
    		</div>
    	</div>

    </body>

    </html>


#2

looking at this screenshot:

for which i used the inspector, you can see both the image and navigation menu are at the same height, the reason the image extends to bottom is because its higher/taller then your navigation menu


#3

I see that if I remove the image then the nav bar sits flush with the bottom. How would you suggest that I lower the nav bar without affecting the image so that they are both sitting flush with the bottom? I'm trying many different approaches but still haven't found a way. Probably something simple that is eluding me.


#4

no, there is no simply solution, that is the problem. I am trying, but struggling as well


#5

Ok, thanks. I'm glad it's not just me. I appreciate you trying.


#6

well, you can use a table like i did here, the problem this creates, is how to align the navigation menu to the right


#7

Thanks stetim. I might look into that one. If I figure out the current issue I'll post what I did.


#8

I found the following post on stack overflow: https://stackoverflow.com/questions/21397927/bootstrap-3-0-align-navbar-and-logo-to-bottom

I used this code below and it seemed to work nicely. That's a video actually playing in the background of the screenshot. My next goal is to figure out how to tint it and throw some text over it. Think I found a few posts that can help me with that.

.nav {
margin-top: 18px !important;
}