• 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?

VPS Starter Arubacloud
–1 głos
266 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,660 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.)
Tak spokojnie mam jeszcze inne opcje a co myślisz o zrobieniu rozwijanego menu
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,660 p.)
No więc to zależy, jaki tam masz układ strony i pomysł ogólnie na stronę. Jednak ja bym polecił stosować menu rozwijane dla mniejszych ekranów, zdecydowanie lepiej to wygląda.
komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)
Ok czyli normalne dla dużych monitorów i rozwijane dla małych ekranów tak?
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,660 p.)
Tak
komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)

znalazłem coś takiego i czy to da się jakoś zastosować media queries czy się tak nie da

 

komentarz 19 maja 2018 przez shotokan Nałogowiec (39,660 p.)
Zapytania medialne to nic innego jak zwykły CSS tylko włączający się w zadanej szerokości ekranu więc pewnie, że się da.
komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)
To jak to zrobić trzeba wrzucić kod do tej linijki media queries i co zrobić żeby to zniknęło na większej wielkości
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,660 p.)
@Layoutowiec, jeszcze nie dawno chwaliłeś się, że będziesz sprzedawał szablon (zadawałeś sporo pytań o to), a teraz tymi pytaniami śmiem twierdzić, że do tego jeszcze dłuuuga droga, skoro nie za bardzo rozumiesz istotę media queries i nie tylko to...
Może najpierw spróbuj sam to zrobić, poczytaj o stronach RWD, o zapytaniach medialnych...
Delikatnie podpowiem, że najpierw tworzysz sobie jedno menu, np. to desktopowe, czyli nadajesz odpowiednie style CSS, a potem tworzysz menu responsywne, czyli tworzysz zapytanie medialne i w nim umieszczasz konkretne style CSS.
komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)
Już mi zostało tylko to RWD, i robiłem już kiedyś layout za pomocą tego ale było to trochę dawno bo teraz miałem krótką przerwę (nauka itd.) przez co nie miałem czasu na dłuższe programowanie i troszeczkę mi się zapomniało poczytam sobie jeszcze bo mam już to jedno menu nad którym trochę siedziałem i teraz bym sobie zrobił takie rozwijane i jeszcze zamiast tego napisu menu myślałem że wrzuciłbym sobie takiego "hamburgera" (mam nadzieję że wiesz o co chodzi). Więc poczytam teraz jak zrobić aby menu się ze sobą zamieniały i dzięki za pomoc.
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,660 p.)
Proszę bardzo, a z tym hamburgerem to dobry pomysł.
komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)

Znalazłem nawet coś w tym stylu bardzo mi się podoba tylko zmienię kod pod siebie i wyanimuje hamburgera

komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)
Tylko teraz mam pytanie bo moje portfolio jest podzielone na biały i bardzo jasny szary kolor i teraz na jaki kolor zmienić tło menu?
komentarz 19 maja 2018 przez shotokan Nałogowiec (39,660 p.)

Na jaki chcesz... może to Ci pomoże.

komentarz 19 maja 2018 przez Layoutowiec Mądrala (5,470 p.)
Chciałbym się też zapytać o Twoją opinię na ten temat, ponieważ wielu programistów uważa że korzystanie z gotowych kodów jest dobre ponieważ nie trzeba poświęcać na to czasu a mi to jakoś leży na sercu że trochę edytuje ten kod ale on nie jest jednak do końca mój
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,660 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,660 p.)
Myślę, że tak.
0 głosów
odpowiedź 19 maja 2018 przez Daniel90 Pasjonat (17,970 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,660 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 641 wizyt
pytanie zadane 23 sierpnia 2016 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)
+1 głos
3 odpowiedzi 2,417 wizyt
pytanie zadane 18 czerwca 2017 w HTML i CSS przez rafal1997 Gaduła (3,180 p.)
–1 głos
1 odpowiedź 212 wizyt
pytanie zadane 19 sierpnia 2016 w HTML i CSS przez niezalogowany

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...