centem
asked on
How to get nav height same as ul
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;
}
<!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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.