Jak wyśrodkować elementy w stopce w pionie?

0

Cześć!
Stworzyłem backend do aplikacji, teraz zajmuje się front-endem do niej, jednak nigdy wcześniej tego nie robiłem. Przeleciałem kursy na w3schools i jeden crash kurs na yt i stworzyłem bardzo prostą strone startową mojej aplikacji.

index.html
main.css
github_logo.png
github_logo.png
No i mam pare pytań:
Starałem się tworzyć tak, żeby strona była responsywna, ale dla jakich wielkości ustalać kiedy kończy się telefon a zaczyna monitor? (tablet omijam)
Mam problem z ustawieniem obiektow w stopce, nie potrafilem ich w jakis ludzki sposob wycentrowac, tak żeby znajdowały się na środku jeśli chodzi o wysokość. (z szerokością mi się udało) I ustawiałem używając margin-top.

Na pewno też popełniłem trochę błedów i niektóre rzeczy dało się zrobić prościej i ładniej, prosze o porady dla świeżaka :D

2

Na pewno też popełniłem trochę błedów i niektóre rzeczy dało się zrobić prościej i ładniej, prosze o porady dla świeżaka :D

Taki zapis

<a href="...">
   <button>
     ...
   </button>
</a>

jest błędny pod kątem accessibility.

Zasada jest taka, żeby nie zagnieżdżać elementu klikalnego wewnątrz drugiego elementu, który także można kliknąć, czyli odpadają nam wszystkie kombinacje tego typu

<a href="...">
   <button>
     ...
   </button>
</a>

<button>
  <a href="...">
    ...
  </a>
</button>

<a href="...">
  <input ...>
</a>

<button>
  <textarea></textarea>
</button>

itd

Jeśli chcesz żeby link wyglądał jak przycisk to powinieneś dostosować sam wygląd znacznika <a>.


Zdjęcia powinny mieć atrybut alt, bo także jest to błąd związany z accessibility :p, oraz dobrze jakby posiadały atrybuty width i height, bo poprawia to sposób ładowania zdjęć.

Jeśli nie można dobrać odpowiedniego opisu alt przykladowo przy zdjęciach czysto dekoracyjnych to można zostawić pustą wartość

<img src="..." alt="">


Do znajdywania tego typu błędów możesz skorzystać np z walidatora W3C (https://validator.w3.org/#validate_by_uri)


Starałem się tworzyć tak, żeby strona była responsywna, ale dla jakich wielkości ustalać kiedy kończy się telefon a zaczyna monitor? (tablet omijam)

Warto tutaj przejrzeć kilka frameworków css i sprawdzić jakie breakpointy obsługują nawet jak nie planujesz i nie chcesz z nich korzystać w aplikacji. Wtedy na ich podstawie możesz sobie w prosty sposób ustalić samemu odpowiednie wartości

Mam problem z ustawieniem obiektow w stopce, nie potrafilem ich w jakis ludzki sposob wycentrowac, tak żeby znajdowały się na środku jeśli chodzi o wysokość. (z szerokością mi się udało) I ustawiałem używając margin-top.

Musiałbyś pokombinować z właściwością align-items, oraz justify-content z flexboxa.

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
2
Suchy702 napisał(a):

Starałem się tworzyć tak, żeby strona była responsywna, ale dla jakich wielkości ustalać kiedy kończy się telefon a zaczyna monitor? (tablet omijam)

Moim zdaniem aplikacja powinna wyglądać dobrze na każdej rozdzielczości, od powiedzmy 300px do 4k. Ja sobie zmniejszam okno przeglądarki i patrzę czy aplikacja wygląda dobrze czy nie.

0 użytkowników online, w tym zalogowanych: 0, gości: 0