Я установил размер пикселя в своем CSS на 50 пикселей, но в браузере при расширении меню навигации он устанавливает размер пикселя на 55,15 и т. д. Эта же проблема затрагивает страницы «Действие журнала», «Действие просмотра» и «Система ключей». Это не влияет на страницу информации об объектах. Под первой ссылкой в раскрывающемся меню также есть пробел. Я представляю, что причиной этого является размер текста в пикселях, потому что, опять же, этого не происходит на моей главной индексной странице.
Я попытался изменить значение px на значение rem, которое будет масштабировать его до 50 пикселей по сравнению со значением страницы по умолчанию, равным 38 пикселям. Тоже не решает проблему.
CSS выглядит следующим образом. .nav_main a — это место, где я установил размер в 50 пикселей.
* {
font-family: Arial;
margin: 0px;
}
html,body
{
height: 100%;
margin: 0px;
padding: 0px;
font-size: 38px;
overflow: visible;
}
h1 {
display: block;
}
.nav_main {
display: block;
position: relative;
width: 100%;
background-color: #282828;
overflow: auto;
}
.nav_main a {
width: 100%;
text-decoration: none;
padding-top: 32px;
padding-bottom: 32px;
margin: 0;
text-align: center;
font-size: 50px;
color: #fff;
}
.nav_main .icon {
display: inline;
float: right;
width: auto;
padding: 27.5px;
}
.nav_main .icon_clicked {
position: absolute;
right: 0px;
top: 0px;
width: auto;
padding: 27.5px
}
Это HTML-страница действий журнала.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilities Portal - Log Action</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" class="activeNav" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<form action="#" id="logActionForm">
<p>Your Name: </p><input type="text" name="FullName" placeholder="Type your name here...">
<p>Email: </p><input type="email" name="EmailAddress" placeholder="Type your email here...">
<p>Issue: </p>
<select>
<option value"" disabled selected hidden>Please choose...</option>
<option value="hnf">Health and Safety</option>
<option value="comfort">Comfort</option>
<option value="other">Other</option>
</select>
<p>Description: </p><input type="text" name="Desc" placeholder="Brief description of issue...">
<p>Details: </p><input type="text" name="Details" placeholder="Extra details here...">
<p>Upload Picture</p><input type="file" name="pic" accept="image/*">
<button type="submit" form="logActionForm" value="submit">Submit</button>
<button type="reset" value="reset">Clear</button>
<button type="button" value="viewPrevActions">View Previous Actions</button>
</form>
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script src="js/common.js"></script>
</body>
</html>
Это индексная страница html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilites Portal Main</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" class="activeNav" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<a href="logaction.html"><img class="portal-img" src="images/spanners-tools.jpg" alt="Log Action Img"></a>
<a href="viewaction.html"><img class="portal-img" src="images/clipboard.jpg" alt="View Actions Img"></a>
<a href="#"><img class="portal-img" src="images/batch-books.jpg" alt="Facilities Infomation Img"></a>
<a href="keysystem.html"><img class="portal-img" src="images/close-up-keys.jpg" alt="Key System Img"></a>
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
Изображение браузера для страницы действий журнала (ошибка на этой странице). Желтым цветом обозначена проблема. Это происходит на страницах журнала, просмотра и ключевых системных страницах.
Изображение браузера для главной страницы (работает корректно)
Я хотел бы, чтобы браузер следовал CSS, который я установил, как на индексной странице. Другие страницы почему-то не следуют этому примеру.
