У меня проблема с моим HTML-кодом, и я не знаю, как ее исправить.
У меня есть этот веб-сайт:
Web Whithout Navigator Resizing
Затем, когда я изменяю размер веб-навигатора, происходит следующее:
Navigator Resized
Итак, что я делаю неправильно?
Код:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="mainMenu" class="width100 height10 blackBackgroundColor whiteFont">
<img src="img/logoTest.png" />
<ul style="background-color: red;" class="height100 width75 inlineblock allinlineblock">
</ul>
</div>
</body>
</html>
CSS: В конце кода это конфигурация меню.Когда я говорю «меню», на фотографиях отображается полоса.
*{
/*Configuration to delete default styles*/
margin:0;
padding: 0;
color:black;
list-style: none;
font-style: none;
border-style: none;
text-decoration: none;
box-sizing: border-box;
}
html, body{
height: 100vh;
width: 100vw;
}
/*Configurations of common use*/
.width100{
width: 100%;
}
.width75{
width: 75%;
}
.width50{
width: 50%;
}
.width25{
width: 25%;
}
.height100{
height: 100%;
}
.height75{
height: 75%;
}
.height50{
height: 50%;
}
.height25{
height: 25%;
}
.height10{
height: 10%;
}
.inlineblock{
display: inline-block;
}
.allinlineblock *{
display: inline-block;
}
/*
LIST OF COLOR USED:
With your text editor change the value here and then will change in all the document
Black 1: #212121
White 1: #f4f6f7
*/
.blackBackgroundColor{
background-color: #212121;
}
.whiteBackgroundColor{
background-color: #f4f6f7;
}
.blackFont{
color: #212121;
}
.whiteFont{
color: #f4f6f7;
}
#mainMenu{
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
#mainMenu img{
position: absolute;
left: 5%;
height: 100%;
}
#mainMenu ul{
position: absolute;
left: 10%;
height: 100%;
width: 90%;
}