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

question-closed Dlaczego napis nie znika ?

VPS Starter Arubacloud
0 głosów
181 wizyt
pytanie zadane 18 marca 2021 w HTML i CSS przez ow18 Nowicjusz (160 p.)
zamknięte 20 marca 2021 przez ow18

Robię stronę testową stronę internetową i mam problem. Strona ma być responsywna lecz gdy rozwijam nav to widać napis, który pod nią jest.

zamieszczam zdjęcie 

kod:

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #FFFFFF;
  height: 100px;
  width: 100%;
  box-shadow: 0px 5px 10px #f5f5f5;
}
label.logo{
  color: #000000;
  font-size: 35px;
  line-height: 100px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 100px;
  margin: 0 5px;
}
nav ul li a{
  color: #000000;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
   text-decoration: underline;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: black;
  
  float: right;
  line-height: 100px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
    top: 100px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #0082e6;
    text-decoration: none;
  }
  #check:checked ~ ul{
    left: 0;
  }
}


.box {
    margin-left: auto;
    margin-right: auto;
    width: 10em;
 
  
}

.contener {
  color: black;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

 

komentarz zamknięcia: znam juz odpowiedz
2
komentarz 18 marca 2021 przez CubeStorm Pasjonat (15,020 p.)
Nie bez powodu przy dodawaniu pytania zostałeś zapytany przez forum czy aby na pewno to pytanie nie potrzebuje zawierać kodu. Nikt tutaj nie wróży z fusów, wrzuć kod.
komentarz 18 marca 2021 przez Wiciorny Ekspert (269,120 p.)
ma być, ale nie jest :D ... no to na pewno coś jest nie tak

1 odpowiedź

0 głosów
odpowiedź 18 marca 2021 przez pablop76 VIP (123,060 p.)

Ponieważ twoje menu (ul) jest niżej jako warstwa niż treść (container, "contener")

Możesz dać wyższy z-index dla ul, lub pozbyć się position.

Podobne pytania

0 głosów
1 odpowiedź 356 wizyt
0 głosów
1 odpowiedź 373 wizyt
0 głosów
0 odpowiedzi 379 wizyt

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...