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

question-closed Co jest nie tak?

–1 głos
128 wizyt
pytanie zadane 19 maja 2018 w HTML i CSS przez Layoutowiec Gaduła (4,550 p.)
zamknięte 20 maja 2018 przez Layoutowiec

Witam!

Więc wziąłem się za media queries w moim layoucie i mam problem bo wszystko jest ok tylko problem z menu bo jest przypięte (porusza się wraz z suwakiem) i po zmniejszeniu ekranu nic nie działa zostają tylko dwie zakładki a reszta znika i nie wiem co zrobić trochę się denerwuję więc przychodzę do was i prosiłbym jeszcze o pomoc bo może jednak lepiej zrobić takie menu jak jest tutaj po zmniejszeniu strony ale jak się do tego zabrać?

Kod do menu:

<!-- Menu Main !-->
    <nav id="main">
        <ul>
            <li><a href="portfolio1code.html" class="active">HOME</a></li>
            <li><a href="#aboutme">ABOUT ME</a></li>
            <li><a href="#skills">TECHNOLOGIES I USE</a></li>
            <li><a href="#education">EDUCATION</a></li>
            <li><a href="#photo-portfolio">PORTFOLIO</a></li>
            <li><a href="#text-contact">CONTACT</a></li>
        </ul>
    </nav>
#main {
    position: fixed;
    top: 0;
    left: 0;
    width: 1349px;
}

#main ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
}

#main li {
    float: left;
}

#main li a {
    letter-spacing: 0px;
    width: auto;
    display: block;
    color: #585c63;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-right: 5px;
    padding-left: 100px;
    margin: auto;
    text-decoration: none;
}
/*SCREEN SIZE FROM 280PX TO 450PX*/
@media (min-width: 280px) and (max-width: 450px) {
	.main {width: 100; font-size:10px;}
}

Dzięki za zajęty czas!

 

komentarz zamknięcia: Uzyskałem satysfakcjonującą odpowiedź

2 odpowiedzi

+1 głos
odpowiedź 19 maja 2018 przez shotokan Nałogowiec (39,260 p.)
wybrane 19 maja 2018 przez Layoutowiec
 
Najlepsza
W elemencie media podajesz klasę main, a w kodzie masz main jako identyfikator. Dodatkowo nie dałeś jednostki przy width.
Przy okazji w necie jest sporo poradników, jak się tworzy responsywne menu, proponuję poszukać i poczytać o RWD a konkretnie tutaj o rozdzielczości różnych urządzeń bo max-width: 450px to jest stanowczo za mało. No chyba, że masz jeszcze inne opcje.
komentarz 19 maja 2018 przez Layoutowiec Gaduła (4,550 p.)
I dzięki za pomoc z resztą już dam sobie rade! Czasem potrzebuję żeby ktoś mną potrząsnął i nakierował. Jeszcze raz dziękuję!
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,260 p.)
Dokładnie, po co pisać coś, co już ktoś napisał. Pamiętaj tylko o prawach autorskich, być może autor nie życzy sobie, aby ktoś wykorzystywał jego kod lub przerabiał po swojemu i umieszczał na stronie.
komentarz 19 maja 2018 przez Layoutowiec Gaduła (4,550 p.)
Ale to co wysłałem przed chwilą mogę chyba użyć prawda?
komentarz 19 maja 2018 przez Layoutowiec Gaduła (4,550 p.)
I wracając używając coś w tym stylu (https://blog.devolk.pl/responsywne-menu-3-sprawdzone-rozwiazania/) to chyba można tego używać ponieważ są to poradniki na blogu tak? Czy muszę pisać do autora czy na jakiej zasadzie to działa bo wsumie oni udostępniają kod na stronie
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,260 p.)
Myślę, że tak.
0 głosów
odpowiedź 19 maja 2018 przez Daniel90 Pasjonat (17,990 p.)
Nie zmienia się bo masz na sztywno przypisane do #main width: 1349px;

Używaj % lub innych jednostek jak vw zamiast px.
komentarz 19 maja 2018 przez Layoutowiec Gaduła (4,550 p.)
a zamiast % mogę dać auto?
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,260 p.)
To nie ma wpływu na szerokość menu w urządzeniach mobilnych, bo w media queries ta szerokość jest zmieniana.
Edit: Niemniej staraj się używać innych jednostek niż wpisywać na sztywno px.

Podobne pytania

–5 głosów
4 odpowiedzi 377 wizyt
pytanie zadane 23 sierpnia 2016 w HTML i CSS przez Paweł123 Nałogowiec (30,470 p.)
0 głosów
3 odpowiedzi 709 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,170 p.)
–1 głos
1 odpowiedź 119 wizyt
pytanie zadane 19 sierpnia 2016 w HTML i CSS przez niezalogowany
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

65,755 zapytań

112,393 odpowiedzi

237,320 komentarzy

46,700 pasjonatów

Przeglądających: 158
Pasjonatów: 6 Gości: 152

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.

...