• 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
125 wizyt
pytanie zadane 19 maja 2018 w HTML i CSS przez Layoutowiec Gaduła (4,510 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,180 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,510 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,180 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,510 p.)
Ale to co wysłałem przed chwilą mogę chyba użyć prawda?
komentarz 19 maja 2018 przez Layoutowiec Gaduła (4,510 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,180 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,510 p.)
a zamiast % mogę dać auto?
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,180 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 372 wizyt
pytanie zadane 23 sierpnia 2016 w HTML i CSS przez Paweł123 Nałogowiec (29,220 p.)
0 głosów
3 odpowiedzi 631 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,170 p.)
–1 głos
1 odpowiedź 117 wizyt
pytanie zadane 19 sierpnia 2016 w HTML i CSS przez niezalogowany
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

64,016 zapytań

110,391 odpowiedzi

231,155 komentarzy

47,799 pasjonatów

Przeglądających: 308
Pasjonatów: 13 Gości: 295

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.

...