Why my image is hiding the h2? why isn't the nav rendering horizontally? - css

Question

I feel like an idiot because I know this a simple thing. I can't figure why the logo and tagline images aren't in the grey container together.
I also can't under why my h2 and ul are on top of my image. All help is appreciated. This what it's supposed to look like https://imgur.com/a/3Qx3ihp
and this is how it renders now https://imgur.com/a/WGyYzPr
<div id="topbar">
<img src="hw8_images/logo.png" alt="Blaine and Associates logo"><img src="hw8_images/blaine-tagline.png" alt="Blaine and Associates Inc. tagline"><img src="hw8_images/architectural-tagline.png" alt="Architectural Design and Consulting">
<ul class="nav">
<li>Contact</li>
<li>Employment</li>
<li>Projects</li>
<li>Services</li>
<li>Company</li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">
<h2>Quick Links</h2>
<ul id="QL">
<li>Free Consultation
</li>
<li>Client List</li>
<li>Testimonials</li>
<li>Open Positions</li>
<li>Latest News</li>
</ul>
</div>
body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none; background-color: #fff;
}
.topbar{
background-color: #4d4d4d;
font-color: #fff;
height: 15px;
min-width: 500px;
max-width: 950px;
}
.nav li{
font: normal normal normal 100%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: right;
}
h1 {
font: normal normal normal 140%/1.3em verdana,geneva,lucida,arial,sans-
serif; text-decoration: none;
}
h2 {
font: normal normal normal 120%/1.3em verdana,geneva,lucida,arial,sans-
serif;
text-decoration: none;
float: left;
position: relative;
}
footer li {
display: inline-block;
list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
text-align: center;
background-color: #4d4d4d;
font-color: #fff;
}
#container {
position: relative;
height: 300px;
width: 400px;
}
.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;
background-size:cover;
height: 7em;
min-width: 200px;
max-width: 250px
}
#QL {
list-style: circle;
float: left;
position: relative;
}

Answer 1

"I can't figure why the logo and tagline images aren't in the grey container together."
They are inside, but the container is not styled, as you can't find it with .topbar, because it is an id not a class.
So #topbar will do it. If you make it bigger than 15px, all elements will be displayed inside.
The H2 and ul are on top of the background-img, because it is positioned abolute. If you change it to relative, the image will float left and the H2 and ul align on the right to it.

Answer 2

The problem is that you added float:left to your h2 and #QL selectors. Floating elements can be dangerous if you don't understand how it works. It removes the element from standard flow and then pushes it all the way to the top and to the left or right as assigned. It only stops for other elements that are floating, or for elements that have clear set to either the same side (left or right) or both.
Check out this CSS-Tricks article for more details.
I would also recommend you do some reading about fundamental CSS concepts. CSS-Tricks has a good collection of beginner concepts. I think you may find some of them helpful.

Answer 3

Your .buildingimage is in position absolute, he shouldn't ! Something put into absolute allows the element to overlap to others. Put it to "relative" or delete it if you don't really need it. there is also your h2 which got a float.