Cześć,
mam dziwny problem. Zrobiłam prostą stronkę i zauważyłam, że menu wyświetla się inaczej na index.html, a inaczej na dalszych podstronach. Moje spostrzeżenia:
- problem pojawia się na chrome, na safari nie występuje.
- kiedy zmieniam nazwę z index.html na jakąkolwiek inną (np. home.html) problem nie występuje.
- pozmieniałam wszystkie wartości na sztywno (px zamiast rem czy vh) 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. Będę wdzięczna za wskazówki.
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<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>
Ta część html jest identyczna dla każdej podstrony. CSS również:
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 0rem;
display: flex;
justify-content: space-between;
}
.menu-section {
padding-right: 2.5rem;
}
.menu {
margin: 0px;
list-style-type: none;
display: flex;
}
Raczej w kodzie wszystko się zgadza, oczywiście załączam część. Może brakuje jakiegoś znacznika w head html?
Edit: Może nawet nie tyle co sam pasek nawigacji, ale każdy element na podstronie. Index.html jedna wartość, przechodzę na podstronę wszystko jest jakby w niewiele większej skali...
