As someone who is new to CSS, I find myself struggling to grasp the correct approach. Online examples vary and leave me confused. Specifically, I have questions about my markup but overall, am I doing things correctly?
I feel like my CSS code is bloated. Why is my overflow property causing a scrollbar to appear? How can I eliminate the large padding on the left of my top-menu, possibly related to li + li? Is my layout of divs the most efficient way to achieve what I want? Using margin-top 70 to push down the second menu doesn't seem optimal. Is there a better method like float bottom or valign bottom that I should be using?
Any advice on getting started off on the right foot would be greatly appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
logo
</div>
<div class="top-menu">
<ul>
<li>Lorum</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
</div>
<div class="main-menu">
<ul>
<li>About Us</li>
<li>Countries
<li>Vacancies</li>
<li>About Us</li>
<li>Countries
<li>Vacancies</li>
</ul>
</div>
</div>
</body>
</html>
.wrapper {
background-color: aqua;
width: 600px;
overflow: auto;
padding: 5px;
}
.logo {
background-color: black;
height: 100px;
width: 100px;
float: left;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.top-menu > ul {
list-style: none;
}
.top-menu > ul > li {
display: inline-block;
}
.top-menu li + li:before{
content: " | ";
padding: 0 10px;
}
.main-menu > ul {
list-style: none;
}
.main-menu > ul > li {
display: inline-block;
padding-right: 10px;
}
.wrapper {
background-color: aqua;
width:100%;
overflow: auto;
padding: 5px;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.main-menu {
font-family: arial;
font-size: 14px;
background-color: crimson;
clear: right;
margin-top: 70px;
height: 30px;
line-height: 30px;
text-align: center;
}