Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to get nav height same as ul

Posted on 2014-03-02
3
Medium Priority
?
355 Views
Last Modified: 2014-03-19
My ul items are taller than the nav bar. How can make my nav bar as tall as the ul elements. Below is my css and html. I want to change the background of the nav to red but it doesn't show. Thanks.

html {
	height: 100%;
}
body {
      margin-top: 0;
      background-color: grey;
      height: 100%;
      
	/* IE10 Consumer Preview */ 
	background-image: -ms-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* Mozilla Firefox */ 
	background-image: -moz-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* Opera */ 
	background-image: -o-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #BA200F), color-stop(1, #120505));
	
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* W3C Markup, IE10 Release Preview */ 
	background-image: radial-gradient(circle farthest-corner at center, #BA200F 0%, #120505 100%);
	}
	
.container {
	position: relative;
      width: 800px;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
      background-color: grey;
      height: 100%;
}
header {
      height: 176px;
      text-align: center;
      background-color: black;
}
img {
      float: left;
}
h1{
	color: red;
}

.head-container {
      display: inline-block;
      vertical-align: middle;
      margin-top: auto;
      margin-bottom: auto;
}
.heading {
      margin-left: auto;
      margin-right: auto;
      vertical-align: middle;
      text-align: left;
}
#left_box{
	background-color: black;
	color: white;
	font-size: x-large;
	padding: 10px;
	float: left;
}
#right_box{
	background-color: black;
	color: white;
	padding: 10px;
	float: right;
}
#left_box span{
	color: red;
}
nav {
	  width: 100%;
	  height: auto;
      border-top: 10px solid black;
      border-bottom: 5px solid red;
      background-color: white;
      clear: both;
}
nav ul {
      list-style: none;
      float: right;
	padding: 5px;
}
nav li {
      display: inline;
}
nav a {
      font-weight: bold;
      text-decoration: none;
      padding: 1em 2em;
      background-color: white;
      border-top: 5px solid red;
      color: red;
}
section {
      margin: 0 auto;
      height: 400px;
      width: 800px;
      background-color: white;
      clear: both;
}
footer {
	position: absolute;
      bottom: 0;
      width: 100%;
      background-color: steelblue;
}

Open in new window



<!DOCTYPE HTML>
	<head>
		<title>Building Contractor</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>
	
	<body>
		<div class="container">
			<header>
				<img src="imgs/InnInKeyWestFlorida_bnr.png" />
				<div class="head-container">
					<div class="heading">
						<div id="left_box">
							<span>Kevin Barlow</span><br>Building Contractor<br>
							Key West<br>305-684-2026<br>850-686-5515
						</div>
						<div id="right_box">
							<img src="imgs/united-states-flag_scaled.png" /><br>
							<img src="imgs/united-kingdom-flag_scaled.png" />
						</div>
					</div>
				</div>
			</header>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav>
			<section>
				Here is the section element
			</section>
			<footer>
				<h3>This is the footer</h3>
			</footer>
		</div>
	</body>
	
</HTML>

Open in new window

0
Comment
Question by:centem
3 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 39899250
Add overflow:auto to your nav {} css and then set the background color
0
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 1000 total points
ID: 39899333
Ad this to your styles
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

Open in new window

then add the class="clearfix" to your nav
<nav class="clearfix" >

Open in new window


Then if you change the bacground colour of your nav to red it will work perfectly.
Cheers,
N
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question