Cześć,
co zrobić aby po najechaniu kursorem na element w menu strona nie zmieniała swojego rozmiaru (tzn żeby się nie ruszała) i menu. I czym to jest spowodowane?
0
2
Aby strona nie zmieniała swego rozmiaru po najechaniu - należy poprawić css'a.
Jest to spowodowane błędnie napisanym css'em.
Wiesz... łatwiej by nam było gdybyś wkleił kod.
0
Wrzucam kod i prosiłbym o wytłumaczenie mi gdzie mam błąd i czemu powstał? ;)
@import url('https://fonts.googleapis.com/css?family=Amatic+SC&subset=latin-ext');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
max-width: 1280px;
font-family: 'Amatic SC', cursive;
font-size: 2rem;
padding: 20px 0;
text-align: right;
margin: 0 auto;
line-height: 100%;
}
nav a {
display: inline-block;
text-decoration: none;
color: #555;
padding: 5px;
padding-bottom: 5px;
text-align: center;
margin: 0 15px;
}
nav a.btn4 {
padding: 0 60px;
border: 1px solid #555;
margin: 0 40px 0 80px;
background-color: lightgray;
border-radius: 30px;
}
nav a:hover {
border-bottom: 1px solid #555;
}
nav a.btn4:hover {
font-size: 2.2rem;
}
header div {
height: 70vh;
background-size: cover;
background-image: url(img/living-room-2569325_1280.jpg);
background-position: center;
}
header h1 {
color: white;
font-weight: 400;
text-align: center;
font-family: 'Amatic SC', cursive;
letter-spacing: 3px;
font-size: 60px;
line-height: 70vh;
background-color: rgba(0, 0, 0, 0.3);
}
<body>
<nav>
<a href="#">Start</a>
<a href="#">O mnie</a>
<a href="#">Projekty</a>
<a href="#" class="btn4">Kontakt</a>
</nav>
<header>
<div>
<h1>Prostota. To nasza cecha.</h1>
</div>
</header>
</body>
0
Masz problem w momencie najechania na element - wiesz jaki atrybut za to odpowiada? Jeśli nie, to podpowiem, że jest to hover, u Ciebie jest ustawiany border, a to zmienia rozmiar elementu o tej właśnie border. Zabierz go i sprawdź czy błąd nadal występuję.
0
axelbest napisał(a):
Masz problem w momencie najechania na element - wiesz jaki atrybut za to odpowiada? Jeśli nie, to podpowiem, że jest to hover, u Ciebie jest ustawiany border, a to zmienia rozmiar elementu o tej właśnie border. Zabierz go i sprawdź czy błąd nadal występuję.
Tak, teraz strona się nie rusza, jednak chciałbym mieć tam podkreślenie a robić go sposobem text-decoration to słabo wygląda. A jak mogę wyeliminować poruszanie się elementów menu jak chcę aby element w menu, u mnie ten "kontakt" po najechaniu na niego kursorem zmieniał font-size na większy tak jak u mnie jest na 2.2rem?
1
Zrób tak: ustaw domyślnie padding-bottom: 1px, (bez hovera) - na hoverze, dodawaj dolny border, ale padding-bottom ustawiaj na 0. Dzięki temu zawartość nie powinna się ruszać.
0
axelbest napisał(a):
Zrób tak: ustaw domyślnie padding-bottom: 1px, (bez hovera) - na hoverze, dodawaj dolny border, ale padding-bottom ustawiaj na 0. Dzięki temu zawartość nie powinna się ruszać.
Tak, jest teraz dobrze, ale odstęp między selektorem a i borderem jest za mała, w takim razie jak zwiększyć odstęp?
0
właśnie to pisałem, ale @axelbest mnie widzę uprzedził, devtools chrome
https://sekurak.pl/analiza-kodu-stron-internetowych-w-chrome-devtools-czesc-1-wstep/
css grid
https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Grid_Layout
bootstrap grid
https://getbootstrap.com/docs/4.0/layout/grid/
https://github.com/dmhendricks/bootstrap-grid-css
lub inne wygooglaj
0
Tak, teraz strona się nie rusza, jednak chciałbym mieć tam podkreślenie
a robić go sposobem text-decoration to słabo wygląda.
Ustaw domyślnie
border: 1px solid transparent;
ana hoverze tylko nadaj mu kolor.
A jak mogę wyeliminować poruszanie się elementów menu jak chcę
aby element w menu, u mnie ten "kontakt" po najechaniu na niego kursorem
zmieniał font-size na większy tak jak u mnie jest na 2.2rem?
Zdefiniuj na sztywno rozmiary elementu.