I'm new to html and css and I'm having trouble placing my nav bar above my banner. I want to have the nav bar directly above the image banner. Could it be that the inner-container class that I put it in is affecting how I position it?
* {
margin: 0;
height: 100%;
}
body {
width: 100%;
}
.img-container {
background-image: url(restaurants.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.inner-container {
text-align: center;
position: absolute;
width: 100%;
color: #f2f2f2;
height: auto;
margin-top: 200px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 426px;
height: 60px;
background-color: black;
opacity: .8;
line-height: 50px;
text-align: center;
font-size: 25px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: red;
}
h1 {
font-size: 6em;
font-family: sans-serif;
}
h2 {
margin-top: -17px;
font-family: sans-serif;
font-size: 1.7em;
text-align: center;
font-weight: 300;
}
a {
margin-top: 0px;
font-size: 1em;
font-family: sans-serif;
}
@media only screen and (max-width: 920) {
.inner-container {
margin-top: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>All ABout The Buffalo</title>
<link href="IntroBanner.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="img-container">
<div class="inner-container">
<h1>All ABout The Buffalo</h1>
<h2>Where Chicken Is Just The Tip of The Iceberg.</h2>
<div class="menue">
<ul>
<li><a href="Intro.html" class="active">Home</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<p>Heeeeeyyyy</p>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire