Solved

How to get nav height same as ul

Posted on 2014-03-02
3
332 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 250 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 250 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Placeholder text not disappearing in Contact Form 7 2 23
Problem to refer to value 8 62
alert(innerHTML); 8 32
Flex container exceeding stated width in IE11 4 15
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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

839 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