• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Front-end zmiana położenia tekstu ze względu na podkreślenie linków nawigacji.

0 głosów
74 wizyt
pytanie zadane 13 listopada 2020 w HTML i CSS przez rszczepanski02 Użytkownik (690 p.)

Dzień dobry :) Jestem tu nowy i przybyłem z zapytaniem. Mianowicie mam problem z moim kodem strony internetowej. Nad header'em znajduje się nawigacja. Po najechaniu na link nawigacji pojawia się pod nim border, który celowo sobie ustawiłem, jednak border ten powoduje iż napis header'a przemieszcza się w dół o te 5px. Chciałbym, aby napis ten nie zmieniał swojego położenia, był niezależny od tego co dzieje się powyżej strony.

Zamieszczam kod:
 

  <header id="main">
    <div class="topbar">
      <div class="container">
        <div class="row text-center">
          <div class="topbar-l text-white col-md-4">
            <p>36-230 Cracow ul. Długa 12</p>
          </div>

          <div class="topbar-center col-md-4">
            <img src="imgs/logo.png" style="opacity: 0.8;">
          </div>

          <div class="topbar-r text-white col-md-4">
            <p>+48 222 555 222 | kontakt@trattoria.pl</p>
          </div>
        </div>
      </div>
    </div>

    <nav class="navbar navbar-default navbar-expand-md navbar-dark">
      <div class="container">
          <ul class="navbar-nav ml-auto mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Strona główna</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">O nas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Karta dań</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Kontakt</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="header-content">
      <div class="container">
        <h1 style="font-size: 48px;">Najlepsza restauracja w mieście!</h1>
        <p style="font-size: 24px;">Rabat 20% na drugą pizze</p>
      </div>
    </div>
  </header>



I CSS:

body {
  font-family: 'Ubuntu', sans-serif !important;
}
::-webkit-scrollbar {
    display: none !important;
}
#main {
  background: url('imgs/bg-main.jpg') center/cover no-repeat;
  height: 100vh;
  background-attachment: fixed;
}
.header-content {
  padding-top: 25vh;
  color: white;
  text-align: center;
  font-family: 'Dancing Script' !important;
}
.header-content h1 {
  font-weight: 700;
  letter-spacing: 2px;
}
.header-content p {
  font-style: italic;
}
.btn-header {
  color: white !important;
}
.btn-header:hover {
  background-color: white;
  color: #30475e !important;
}
.nav-item {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav-link:hover {
  color: #ff6363 !important;
  border-bottom: 5px dotted #ff7171;
}
.topbar-l,
.topbar-r {
  padding-top: 36px !important;
}
.topbar-center {
  padding-top: 20px !important;
}
@media (max-width: 768px) {
  .nav-item {
    padding: 0px !important;
    margin: 0px !important;
    text-align: center !important;
  }
  .topbar-l {
    padding: 10px !important;
  }
  .topbar-r {
    padding: 25px !important;
  }
  .topbar-center {
    padding: 0px !important;
  }
  .header-content {
    padding-top: 12vh;

  }
  .header-content h1 {
    font-size: 26px !important;
  }
  .header-content p1 {
    font-size: 14px !important;
  }
}



Prosiłbym o pomoc :) Z góry dziękuje i pozdrawiam.

1 odpowiedź

0 głosów
odpowiedź 13 listopada 2020 przez psyku Obywatel (1,380 p.)
edycja 13 listopada 2020 przez psyku
Sprawdziłem nic takiego u mnie nie nastąpiło.

 

Czy nie chodzi Ci bardziej o ten przeskok w momencie zaznaczenia "h1" i przesunięcia myszką w dół? Wtedy cała strona zmienia swoje położenie a wybierając z nawigacji "Strona główna" wraca na swoje miejsce, jeśli tak to przez wielkość div tak się robi.
komentarz 13 listopada 2020 przez rszczepanski02 Użytkownik (690 p.)
Nie rozumiem chyba co masz na myśli :/. Problem u mnie na 3 różnych przeglądarkach pojawia się tylko w momencie najechania na link z nawigacji kiedy pojawia się pod nim border, ponieważ nagłówek <h1>, <p1> zniżają swoje położenie o 5 pikseli. Wcześniej nie miałem tego problemu nie mogę dojść do tego gdzie leży problem. Apropo tematu pytania. Wcześniej spotkałem się z jeszcze jednym problemem przy tworzeniu collapsowanego menu na wersje mobilną. Rozwinięcie go powodowało znaczną zmianę położenia znaczników tekstowych. Chciałem żeby rozwinięcie nawigacji je zasłoniło (było od nich niezależne). Udało mi się to naprawić tylko przy zastosowaniu fixed-top dla nawigacji, jednak w momencie, w którym nie chcę aby nawigacja była sticky to nie wiem jak naprawić ten problem.

Podobne pytania

+1 głos
2 odpowiedzi 960 wizyt
0 głosów
1 odpowiedź 119 wizyt
pytanie zadane 6 października 2017 w HTML i CSS przez YoMrChudyxD Nowicjusz (150 p.)
0 głosów
4 odpowiedzi 3,544 wizyt

85,871 zapytań

134,644 odpowiedzi

298,914 komentarzy

56,738 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 926p. - rucin93
  2. 925p. - Whistleroosh
  3. 912p. - nidomika
  4. 876p. - adrian17
  5. 867p. - Michal Drewniak
  6. 866p. - Mikbac
  7. 863p. - Mateusz Bogdan
  8. 859p. - CC PL
  9. 797p. - Argeento
  10. 704p. - ScriptyChris
  11. 683p. - tokox
  12. 660p. - Vinox
  13. 645p. - TheLukaszNs
  14. 642p. - s. Dorota Kowalewska
  15. 601p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...