Привет, столкнулся с проблемой. Не могу понять логику этого ср*ного блока в ксс.
Вот код:
body {
background-image:url('background.jpg');
font-family: 'Arial Black';
}
div {
-webkit-transition: background-color .3s ease-in-out;
-moz-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
}
nav {
padding-top: 20px;
}
.euraziabutton {
width: 20%;
height: 80px;
background-color: #5863e0;
margin-left: 20%;
position: absolute;
border-right: 3px solid orange;
border-left: 1px solid #5863e0;
border-top: 1px solid #5863e0;
border-top-left-radius: 50px;
text-align: center;
padding-bottom: 30px;
font-size: 140%;
color: #e0b172;
}
.euraziabutton:hover {
background-color: #A7ADFF;
}
.africabutton {
width: 20%;
height: 80px;
background-color: #5863e0;
margin-left: 40%;
position: absolute;
border-right: 3px solid orange;
border-left: 3px solid orange;
border-top: 1px solid #5863e0;
text-align: center;
font-size: 140%;
color: #e0b172;
}
.africabutton:hover {
background-color: #A7ADFF;
}
.australiabutton {
width: 20%;
height: 80px;
background-color: #5863e0;
margin-left: 60%;
position: absolute;
border-left: 3px solid orange;
border-top: 1px solid #5863e0;
border-right: 1px solid #5863e0;
border-top-right-radius: 50px;
text-align: center;
font-size: 140%;
color: #e0b172;
}
.australiabutton:hover {
background-color: #A7ADFF;
}
.antarktidabutton {
width: 20%;
height: 80px;
background-color: #5863e0;
margin-left: 20%;
position: absolute;
border-right: 3px solid orange;
border-top: 3px solid orange;
margin-top: 80px;
border-bottom: 1px solid #5863e0;
border-left: 1px solid #5863e0;
text-align: center;
font-size: 140%;
color: #e0b172;
}
.antarktidabutton:hover {
background-color: #A7ADFF;
}
.samericabutton {
width: 20%;
height: 80px;
background-color: #5863e0;
margin-left: 40%;
position: absolute;
border-right: 3px solid orange;
border-left: 3px solid orange;
border-top: 3px solid orange;
margin-top: 80px;
border-bottom: 1px solid #5863e0;
text-align: center;
font-size: 140%;
color: #e0b172;
}
.samericabutton:hover {
background-color: #A7ADFF;
}
.namericabutton {
width: 20%;
height: 80px;
background-color: #5863e0;
margin-left: 60%;
position: absolute;
border-left: 3px solid orange;
border-top: 3px solid orange;
margin-top: 80px;
border-bottom: 1px solid #5863e0;
border-right: 1px solid #5863e0;
text-align: center;
font-size: 140%;
color: #e0b172;
}
.namericabutton:hover {
background-color: #A7ADFF;
}
.main {
position: absolute;
width: 60%;
margin-left: 20%;
margin-top: 164px;
padding: 15px 10px 15px 10px;
background-color: rgba(255, 184, 171, 0.96);
border-left: 3px solid gray;
border-right: 3px solid gray;
border-bottom: 3px solid gray;
}
И еще:
<!DOCTYPE html><!-- enhfw7vd
#ffb8ab-->
<html>
<head>
</head>
<body>
<!-- Снизу все инклюды -->
<?php include"lib/functions.php";?>
<script src="scripts/script.js"></script>
<link href="http://worldlooker.hol.es/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="http://worldlooker.hol.es/style.css">
<!-- Сверху все инклюды -->
<div class='euraziabutton'><nav>Евразия</nav></div>
<div class='africabutton'><nav>Африка</nav></div>
<div class='australiabutton'><nav>Автралия</nav></div>
<div class='samericabutton'><nav>Южная Америка</nav></div>
<div class='namericabutton'><nav>Северная Америка</nav></div>
<div class='antarktidabutton'><nav>Антарктида</nav></div>
<div class='main nav'>123123123123123123123<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
</body>
</html>
Если не хотите разбирать, то вот ссылка на джсфайл
https://jsfiddle.net/fcfnvdsg/
Проблема такая: дело в том, что нижний блок почему-то не соответствует размеру 60%, то есть он меньше верхних блоков, сумма которых вроде должна быть те самые 60% Но они просто различаются!
Средний
