Cześć!
Prosty projekt, bez zewnętrznych bibliotek, czysty html i css. Menu wyświetla się inaczej na index.html, a inaczej na dalszych podstronach. Moje spostrzeżenia:
- problem pojawia się na chrome, na safari i firefox nie występuje.
- kiedy zmieniam nazwę z
index.htmlna jakąkolwiek inną (np.home.html) problem nie występuje. - pozmieniałam wszystkie wartości na sztywno (
pxzamiastremczyvh) i problem nadal się pojawia.
Problem polega na tym, że na dalszych podstronach wysokość nav oraz wielkość czcionki "jakby" się zwiększa. Jakby, ponieważ dev toolsy na to nie wskazują, ale wizualnie wielkość przy zmianie podstron przeskakuje.
Raczej w kodzie wszystko się zgadza, wszystkie podstrony są identycznie - chodzi o index.html. Może brakuje jakiegoś znacznika w head html, może jakiś element jest automatycznie dodawany do index.html przez chrome?
Z góry dziękuję za wszelkie porady.
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Mr.Coffee</title>
<link rel="stylesheet" href="application.css">
</head>
<body>
<nav>
<section class="logo-section">
<img class="logo-white" src="assets/full_logo_white.png" alt="logo">
</section>
<section class="menu-section">
<ul class="menu">
<li><a href="./index.html">Accueil</a></li>
<li><a href="./about.html">Qui sommes-nous?</a></li>
<li><a href="./contact.html">Nous contacter</a></li>
</ul>
</section>
</nav>
</body>
</html>
body {
margin: 0;
background-color: whitesmoke;
font-family: 'Helvetica', sans-serif;
color: dimgray;
letter-spacing: 1px;
}
li {
padding: 1rem;
}
a,
span {
font-size: 12px;
text-decoration: none;
color: whitesmoke;
}
nav,
footer {
background-color: slategray;
color: whitesmoke;
}
.logo-white {
width: 10rem;
padding-left: 2.5rem;
position: absolute;
z-index: 100;
}
nav {
padding: 1rem 0;
display: flex;
justify-content: space-between;
}
.menu-section {
padding-right: 2.5rem;
}
.menu {
margin: 0;
list-style-type: none;
display: flex;
}