Strona do oceny. :)

Question

Dzień dobry wszystkim!

 

Czytałem forum i wiem, że znajdę tutaj bardzo celne, fachowe i konkretne porady.

http://strefaadamskiego.prv.pl/

Nie chcę marnować Waszego czasu na trywialne głupotki. Owszem, póki co jest to raczej wczesna wersja projektu niż pełnoprawna strona. Uczę się już 2 tygodnie, ze stronką bawiłem się kilka ładnych godzin dlatego myślę, że prośba o poświęcenie jej 2-3 minut nie powinna być bezczelna. :)

Chciałbym się teraz zająć contentem. Raczej będzie to kilka plików .html ze zmienionym divem .content. Aby móć to spokojnie zrobić chciałbym wiedzieć, czy już na tak wczesnym etapie kod nie jest brzydki, niepotrzebny itd. Nie ukrywam, że mocno wzorowałem się na tutorialach pana Mirosława.

Kilka uwag ode mnie:

1. Obrazek. Wyśrodkowanie za pomocą <center></center> i atrybut w css do img mnie rażą ale bardziej eleganckie metody (align="middle") nie działały. Nie chciałem też tworzyć 23426 divów na stronie.

2. Divy mogłyby mieć id zamiast klas, to tak dla celów szkoleniowych

3. Niektórzy mogliby się oburzać tematyką, więc uspokajam: nie planuję super-ekshibicjonizmu. Strona owszem, dotyczy mojego wspaniałego Synka ale dane wrażliwe, bardziej wyraźne zdjęcia i inne treści wpływające na jego bezpieczeństwo/godność nie pojawią się na hostingu. :) I tak póki co nie znam się na SEO ale celowo nie pomagam google (czyt. osobom losowym) w znalezieniu tej witryny.

Pozdrawiam serdecznie i dziękuję za Wasz czas.

Darek.

Answer 1

Nie wiem co żeś zrobił, ale przy zescrollowaniu na sam dół strona na siłe próbuje wrócić mniej więcej na połowe wysokości. Domyślam się, że to przez ten skrypt w body, ale nie rozumiem go do końca (a tym bardziej nei rozumiem po co w ogóle powstał :D jeśli ma robić coś takiego) - kompletnie nie siedze w webdevie, więc nie oczekuj po mnie żadnej krytyki. 

Zapytam tylko z ciekawości: Odnośnie tego skryptu.

   $(window).scroll(function() {
      stickyNav();
   });

Jeśli już mamy stickyNav, to konieczne jest opakowywanie tego w kolejną funkcje (obiekt funkcyjny?) ? Bo wygląda to dla mnie dziwnie niepotrzebnie.

Comments

Ja też nie wiem. :D To akurat kod wklejony z tutoriala, dla mnie js to zabawa na dalszą przyszłość, ale dzięki za uwagę.

Answer 2

Strasznie przeskakuje to menu przy przewijaniu strony (nie przykleja się płynnie), bo content leci do góry kiedy nav dostaje pozycje fixed. Też miałem ten problem i nie wiem czy dobrze go rozwiązałem, ale podziałało. Możesz dodać do kodu JS którym przyklejasz menu nową klasę dla .content, np stickyContent albo jak chcesz ją nazwać i w CSSie stworzyć odpowiadającą klasę nadając jej margin-top wysokości menu (w tym przypadku 60px + szerokość border).

$(document).ready(function() {
   var stickyNavTop = $('.nav').offset().top;

   var stickyNav = function(){
   var scrollTop = $(window).scrollTop();

   if (scrollTop > stickyNavTop) { 
      $('.nav').addClass('sticky');        
      $('.content').addClass('stickyContent');
   } else {
      $('.nav').removeClass('sticky');
      $('.content').removeClass('stickyContent');
    }
   };

   stickyNav();

   $(window).scroll(function() {
      stickyNav();
   });
   });

 

.stickyContent{
  margin-top: 62px;
}

aha i content na szerokość całego ekranu jest mało czytelny, lepiej nadać mu np 1000px i wyśrodkować

Comments

Gdy wrócę do domu sprawdzę, teraz sobie myślę czy aby na pewno dobrze napisałem w CSS warstwę tego diva (wymiar w osi Z) . Męczyłem się z tym skakaniem kilka godzin a faktycznie wygląda jakby podczas scrollowania .nav wciskał się pomiędzy doby pod spodem. Może gdy będzie "ponad" nimi w osi Z to problem zniknie. Jeśli nie popracuję nad kodem od Ciebie. Dzięki. :)

 

edit: ciekawostka, stronka z tutoriala też przeskakuje, dokładnie w taki sam sposób. :P

gdyby ktoś nie wiedział o jaki tutorial chodzi: http://miroslawzelent.pl/kurs-css/rozwijane-menu-glowne-przyklejane-sticky/

---

To dlatego, że gdy nadajesz pozycje fixed dla nav to wyskakuje on z modelu pudelkowego i content ustawia się od samej gory bo nic go już nie powstrzymuje. by było rowno można mu nadać margines gorny wysokości tej dam co nav, ta metoda co napisalem działa, ale nie wiem czy jest to metoda optymalna.

---

Wkleiłem i działa super.

Powtórzę ciekawostkę z edita: na stronce z tutoriala też przeskakuje. :)

 

Jak wspominałem, jestem ignorantem w programowaniu js (mam nadzieję nie za długo), tak łopatologicznie: .content nadal wyskakuje z układu pudełkowego ale w momencie uruchomienia skryptu dzieją się dwie rzeczy: .nav dostaje sticki a .content powiększa się o górny border? Jeśli tak to załapałem. :)

 

Może śmieszna ta dyskusja ze mną ale ja niestety na informatyce uczyłem się o dyskietkach 5,25'', takie były czasy. Zabrałem się za naukę ciut późno. ;) Generalnie staram się mniej więcej wiedzieć co siedzi na mojej stronie zamiast przeklejać ślepo wodotryski podmienając nazwy zmiennych, stąd może tak się rozpisuję i dopytuję. Na tyle na ile rozumiem ten skrypcik- bardzo sprytne rozwiązanie problemu!

Pozdrawiam.

---

Prawie dobrze rozumujesz. Content i nav sa w ukladzie pudelkowym, w momencie kiedy przewiniesz stronę i uruchamia się skrypt to nav wyskakuje z ukladu pudelkowego a content widzac wolne miejsce po nav wskakuje na sama gore, aby tego nie robil nadajemy mu margin top. Nav dalej przykrywa content tylko już w miejscu marginesu, czyli defakto nic nie ucina. Nic się nie martw też jestem początkujacy jeden może dwa kroki przed Tobą.

Answer 3

Cześć Darek,

1. zgadzam się z Tobą, że należy pozbyć się elementu center. Ten sam efekt możesz np. osiągnąć przez usunięcie tego elementu i stworzenie klasy służącej do wyśrodkowania w poziomie obrazków:

.image--center { display: block; margin: 0 auto; }

Potem musisz tę klasę dodać do elementu img (nota bene, nie zapomnij również o dodaniu obowiązkowego atrybutu "alt" do elementu img)

2. a w jakim celu chciałbyś użyć id? w CSS stanowczo lepiej posługiwać się klasami

Poza tym:

- na stronie brakuje głównego nagłówka h1

- na wpół przezroczyste tło głównego menu powoduje, że zawartość menu jest słabo czytelna, gdy przewija się za nią treść strony. Usunęłabym opacity, albo chociaż zmieniłabym ją na coś rzędu 0.9

- warto byłoby użyć elementy strukturalne takie jak header, nav, main czy footer

- do zgrupowania linków w menu głównym stosuje się ul, nie ol

Powodzenia w rozbudowywaniu stronki! :)