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

Portfolio- problem z responsywnością strony - scrollSpy

0 głosów
165 wizyt
pytanie zadane 26 września 2016 w JavaScript, jQuery, AJAX przez Frozenfroggie Użytkownik (990 p.)

Witam serdecznie, napisałem stronę z użyciem bootstrapa pojawiły się jednak 2 problemy z responsywnością strony. Link do repozytorium: https://github.com/frozenfroggie/frozenfroggie.github.io/tree/master/Portfolio . Link do strony: https://frozenfroggie.github.io/Portfolio/

1. Przy kliknięciu na element nawigacyjny strona przewija się do diva o określonym ID, jednakże fixed navbar zasłania istotne elementy (mianowicie nagłówki- "PORTFOLIO" oraz "CONTACT").

Próbowałem poradzić sobie z tym problemem poprzez pobranie pozycji top danego diva i zapisanie w zmiennej a następnie dodanie do zmiennej 30px. Później zmienną posyłałem jako argument do funkcji scrollTo (plugin autorstwa Ariela Fleslera), zamiast podawac ID diva. Dzięki czemu otrzymałem oczekiwany rezultat lecz oczywiście responsywność szlag trafił..

2. Chciałem żeby zdjęcie po prawej stronie było wyśrodkowane w pionie więc użyłem kodu:

#photoContainer
{
  height: 100%;
}

#photoCentered
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Jednakże przy wyświetleniu strony w mniejszym oknie, zdjęcie przeskakiwało poniżej listy "My programming skills" i następnie próbowało się wyśrodkować przez co tworzyła się duża luka między obrazkiem a innymi elementami.

PS. Oczywiście te wszystkie strony w portfolio oraz opis umiejętności to tylko moje placeholdery xD

2 odpowiedzi

+1 głos
odpowiedź 26 września 2016 przez Kamil Naja Pasjonat (24,090 p.)
Zacznij od naprawienia błędów, które wywala Bootstrap Linter.
komentarz 26 września 2016 przez Frozenfroggie Użytkownik (990 p.)
Oooo, nie znałem wcześniej tego narzędzia. Dzięki za uwagę!
+1 głos
odpowiedź 26 września 2016 przez jpacanowski VIP (101,690 p.)
edycja 26 września 2016 przez jpacanowski

Pozwoliłem sobie skomentować twój kod, bo zauważyłem kilka rzeczy... ;)

<hr class="star star2"></hr>

<hr> się nie zamyka.

<div class="form-group">
                    <div class="col-lg-offset-1 col-lg-10">
                      <input type="password" class="wborder input-lg" id="inputPassword3" placeholder="Email Adress">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-offset-1 col-lg-10">
                      <input type="email" class="wborder input-lg" id="inputEmail3" placeholder="Phone Number">
                    </div>
                  </div>

Nie używasz etykiet dla pól formularza. Pola formularza muszą mieć etykiety ---> <label>
http://forum.pasja-informatyki.pl/181552/ocena-strony?show=181974#c181974

Nie używasz tagów <header>, <footer>, <main> itp.

Gdzie tag <title> ?

*{
  margin: 0;
}

Czemu zerujesz marginesy wszystkich elementów skoro używasz Bootstrapa, a ten z kolei używa Normalize.css ?

body
{
  padding: 90px;
  font-family: "Lato";
  background-color: grey;
  margin: 0px;
  background-image: url("../imgs/noisy_net.png");
  position: relative;
}
  • padding 90px dla body?
  • marginesu nie musisz zerować dla body, bo Bootstrap to już robi

Polecam przeczytać odnośnie semantyki
http://tutorials.comandeer.pl/html5-blog.html

komentarz 26 września 2016 przez Frozenfroggie Użytkownik (990 p.)

Łaaał, dziękuję za wszystkie uwagi, nie spodziewałem się, że społeczność programistów jest tak pomocna. smiley

Podobne pytania

0 głosów
0 odpowiedzi 129 wizyt
pytanie zadane 2 października 2016 w HTML i CSS przez Jack9999 Początkujący (300 p.)
0 głosów
1 odpowiedź 126 wizyt
pytanie zadane 12 września 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,160 p.)
+3 głosów
5 odpowiedzi 5,391 wizyt
pytanie zadane 14 kwietnia 2015 w HTML i CSS przez edios55 Bywalec (2,600 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

65,654 zapytań

112,282 odpowiedzi

236,928 komentarzy

46,645 pasjonatów

Przeglądających: 172
Pasjonatów: 0 Gości: 172

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.

...