• 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
170 wizyt
pytanie zadane 19 maja 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 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,700 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 Mądrala (5,470 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,700 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 Mądrala (5,470 p.)
Ale to co wysłałem przed chwilą mogę chyba użyć prawda?
komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 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,700 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 Mądrala (5,470 p.)
a zamiast % mogę dać auto?
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,700 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 454 wizyt
pytanie zadane 23 sierpnia 2016 w HTML i CSS przez Paweł123 Nałogowiec (33,580 p.)
+1 głos
3 odpowiedzi 1,944 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,180 p.)
–1 głos
1 odpowiedź 151 wizyt
pytanie zadane 19 sierpnia 2016 w HTML i CSS przez niezalogowany

88,699 zapytań

137,306 odpowiedzi

306,724 komentarzy

58,890 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

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

...