Почему мое изображение скрывает h2? почему навигация не отображается горизонтально?

Question

Я чувствую себя идиотом, потому что знаю, что это просто. Я не могу понять, почему логотип и изображения слогана не находятся в сером контейнере вместе. Я также не могу понять, почему мои h2 и ul находятся сверху моего изображения. Вся помощь приветствуется. Вот как это должно выглядеть https://imgur.com/a/3Qx3ihp и вот как он рендерит сейчас 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><a href="Contact.html">Contact</a></li>
    <li><a href="Employment.html">Employment</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Company.html">Company</a></li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">   
<h2>Quick Links</h2>
<ul id="QL">
    <li><a href="Free_Consultation.html">Free Consultation</a> 
</li>
    <li><a href="Client_List.html">Client List</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="Open_positions.html">Open Positions</a></li>
    <li><a href="news.html">Latest News</a></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

«Я не могу понять, почему логотип и изображения слогана не находятся в сером контейнере вместе».

Они внутри, но контейнер не стилизован, так как вы не можете найти его с помощью .topbar, потому что это id, а не класс. Так #topbar сделает это. Если вы сделаете его больше 15 пикселей, все элементы будут отображаться внутри.

H2 и ul находятся сверху background-img, потому что он расположен абсолютно. Если вы измените его на относительное, изображение сместится влево, а H2 и ul выровняются справа от него.

Answer 2

Ваш .buildingimage находится в абсолютном положении, он не должен! Нечто, помещенное в абсолют, позволяет элементу перекрываться с другими. Поместите его в «относительный» или удалите, если он вам действительно не нужен. есть также ваш h2, у которого есть поплавок.

Answer 3

Проблема в том, что вы добавили float:left к своим h2 и #QL селекторам. Плавающие элементы могут быть опасны, если вы не понимаете, как это работает. Он удаляет элемент из стандартного потока, а затем перемещает его до самого верха и влево или вправо, как назначено. Он останавливается только для других плавающих элементов или для элементов, для которых clear имеет либо ту же сторону (left или right), либо both.

Ознакомьтесь с этой статьей CSS-хитрости для получения более подробной информации.

Я бы также порекомендовал вам прочесть о фундаментальных концепциях CSS. У CSS-Tricks есть хорошая коллекция концепций для начинающих . Я думаю, что вы можете найти некоторые из них полезными.