Панель filter-container имеет границу с logo-name-box. Но почему-то отступ top задается от нижней границы logo-name-box. При этом для рекламного блока aside задаются отступы от верха экрана. Как сделать, чтобы top можно было задавать от границы body, то есть от верха ? Не судите строго. Моя первая страница.
<body>
<header>
<div class="container_1">Free Shipping on Orders of Rs. 2587 - <span style="color: yellow; font-weight: 800">SHIP39</span></div>
<div class="login_button"><a href="#" style="color:aliceblue; text-decoration:none">Login / Register</a></div>
</header>
<div class="logo-name-box"><img class="logo" src="assets/images/Layer%202.png" alt="Main Logo"/>
<p><h1>LOREMSUM</h1><h2>Dummy text the printing</h2></div>
<div class="filter-container">
<select name="select country" class="country">
<option value="1">Select country</option>
<option value="2">Ukraine</option>
<option value="3">USA</option>
</select>
<select name="search_filter" class="searching">
<option value="1">Search filter</option>
<option value="2">Black</option>
<option value="3">White</option>
</select>
<input class="input_term" type="search" value="Enter your search term here"/>
<input type="button" name="searching" value="Search" class="button"/>
</div>
<div class="Ad">
<aside><img src="assets/images/Layer%205.png"/>
</aside>
</div>
</body>
body {
margin: 0px;
}
header {
background-color: rgb(0, 146, 63);
box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5);
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 41px;
vertical-align: middle;
}
.container_1::before {
content: url(/assets/images/Ellipse%202.png);
padding-right: 5px;
}
.container_1 {
color:aliceblue;
position: absolute;
font-size: 14px;
font-family: "Open sans";
text-align: left;
line-height: 41px;
padding-left: 20px;
}
.login_button {
display: flex;
align-items:center;
height: 100%;
position: absolute;
right: 10%;
height: 41px;
text-decoration: none;
border-left: 1px solid;
border-right: 1px solid;
border-color: #03883c;
padding-left: 5px;
padding-right: 5px;
box-shadow: 0px 0px 5px 0px rgba(2, 49, 22, 0.1);
}
.login_button:hover {
background-color: #258b50;
}
.logo-name-box {
width: 100%;
height: 100px;
position: relative;
}
.logo {
background-image: url("Layer 2.png");
position: absolute;
left: 10px;
top: 10px;
width: 59px;
height: 69px;
z-index: 12;
}
h1{
color: #00923f;
position: absolute;
font-family: "Open sans";
font-size: 40px;
font-weight: 400;
line-height: 1,6;
margin-top: 5px;
margin-left: 80px;
}
h2 {
font-size: 20px;
font-family: "Open sans";
font-weight: 400;
color: rgb(34, 34, 34);
line-height: 1.2;
position: absolute;
margin-top: 60px;
margin-left: 85px;
}
.filter-container {
background-color: #f1f1f1;
width: 100%;
height: 61px;
position: relative;
}
.country {
border-style: solid;
border-width: 1px;
border-color: rgb(232, 232, 232);
background-color: rgb(255, 255, 255);
position: absolute;
left: 0px;
top: 10px;
width: 228px;
height: 46px;
font-size: 15px;
color: #737373;
font-weight: 500;
}
.searching {
border-style: solid;
border-width: 1px;
border-color: rgb(232, 232, 232);
background-color: rgb(255, 255, 255);
position: absolute;
left: 262px;
top: 10px;
width: 228px;
height: 46px;
font-size: 15px;
color: #737373;
font-weight: 500;
}
.input_term {
border-style: solid;
border-width: 1px;
border-color: rgb(232, 232, 232);
background-color: rgb(255, 255, 255);
position: absolute;
left: 524px;
top: 10px;
width: 483px;
height: 46px;
color: #737373;
font-weight: 500;
font-size: 15px;
min-width: 200px;
}
.button {
background-color: rgb(0, 146, 63);
box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5);
position: absolute;
left: 1007px;
top: 10px;
width: 114px;
height: 46px;
color: aliceblue;
font-weight: 500;
font-size: 16px;
}
.Ad {
position: absolute;
left: 0px;
top: 267px;
width: 1902px;
height: 1330px;
}
Простой
Простой