Problemy z kodowaniem layouta

pytanie zadane 11 grudnia 2016 w HTML i CSS przez Darven Użytkownik (860 p.)
edycja 12 grudnia 2016 przez Darven

Jest to mój peirwszy post na forum, więc Witam wszystkich.

Jestem raczkującym frontendowcem i tworzę sobie layouta w ramach ćwiczeń przy użyciu, póki co, samego HTMLA i CSSa. Może go udostępnie byście mogli lepiej zrozumuieć moje problemy. Nie jest on jeszcze skończony jak widać https://dl.dropboxusercontent.com/u/76190649/layout.rar Nie będę wkleiał kodów, bo musiałbym i obrazki dawać.

I mam kilka pytań. Po pierwsze: W jaki sposób utworzyć, coś co zwie się w projekcie " SHOW FOR SURPRIZE!", czyli opcje na czerwonym tle, które pojawiaią sie na headerze po kliknięcie w navi. Wszystko mi się sypie gdy próbuje zrobić diva wielkości headera, a gdy wkładam do niego wszystkie elementy headera, to nie nachodzi na niego w całości. Nie mam pomysłu co z tym zrobić.

drugie: Użyłem zastępczych fontów do tych z projektu (które są płatne), ale mam problem z ich pogrubieniem. font-weight po prostu nie działa. To samo tyczy się pochylenia.

Trzecie: Mam problem z zawijaniem się tekstu w buttonach, dokłądnie w trzecim i czwartym jak widać.W jaki sposób wymusić by tekst by był w jednej linii. Bawienie się width i paddingiem nic nie daje.

Czwarte: Ile powinienem wyciąć z projektu, a ile, w miarę możliwości, powinienem zrobić sam w CSS?? Buttony w tym projekcie można zrobić w CSS, ale co z bardziej złożonymi graficznie projektami, gdzie np. buttony mają dodatkowe efekty jak np. grandier? Czy też pownienem je robic ręcznie, czy je wyciąć?

Ogólnie chodzi mi o to, na ilę mogę sobie pozwolić wycinając gotowe elementy, a kiedy nie powinienem tego robić.

Piąte: Czy są jakieś narzędzia/metody precyzyjnego odmierzania gdzie ma się dana rzecz znaleźć na stronie? Czy w ogóle precyzja pixel w pixel jest wymagana? Odmierzanie niektórych elementów jest trudne, np. szerokość i wysokość buttonów nie mogę podać taka jaka jest w projekcie i muszę to robić na oko.

komentarz 11 grudnia 2016 przez Czort Nałogowiec (32,500 p.)

grandier?

komentarz 12 grudnia 2016 przez Darven Użytkownik (860 p.)

Oczywiście chodzi o Gradient, nie zawsze można polegać na autouzupełnieniu.

4 odpowiedzi

odpowiedź 11 grudnia 2016 przez Kamil Naja Nałogowiec (27,550 p.)

odpowiedź 13 grudnia 2016 przez pablop76 VIP (123,340 p.)

Witam. Moim zdaniem powinno być tak, że:

1. Trzeba pociąć tło na elementy przypadające każdej sekcji i dać je jako tło osobne dla każdej sekcji.

2. font-weight działa jeżeli pobierzesz czcionkę , w kilku rozmiarach bo domyślnie pobierasz tylko regular.

W okienku pobierania jest zakładka CUSTOMIZE i tam wybierasz grubości czcionki oraz nachylenie.

3. Zawijanie tekstu rozwiążesz stylem white-space: nowrap; dla przycisku.

4. Prawdopodobnie wszystko da się zrobić w css.(grafika)

komentarz 18 grudnia 2016 przez Darven Użytkownik (860 p.)

1. czy zniweluje to problem kompatybilności stron na innych monitorach??

4. Wiem, pytanie mam takie jak poprawnie to powinno się robić. Na ilę Webdeveloper może sobie pozwolić tworząc strony. Czy dla oszczędzenia czasu mogę sobie wszystko powycinać? Jakie mogą być skutki takiego podejścia?

odpowiedź 13 grudnia 2016 przez Darven Użytkownik (860 p.)

Nikt nic nie wie??

komentarz 13 grudnia 2016 przez dewe Gaduła (4,300 p.)

Zacznij kodować od początku. Stosuj klasy zamiast identyfikatorów.

Projekt pewnie kodujesz pod swój monitor, natomiast na moim wygląda całość tragicznie, wszystko na siebie nachodzi. Na każdą sekcję strony rób osobnego diva.

komentarz 13 grudnia 2016 przez Czort Nałogowiec (32,500 p.)

Może daj kod, to ktoś coś pomoże - oczywiście najlepiej na jsfiddle, codepen, itp. żeby było widać w czym problem. Obrazki, w miejscach w których jest z nimi problem, możesz dać jakieś zastępcze z googla.

Ściąganie na komputer plików od obcych osób z nieznanego źródła nie jest ulubionym zajęciem informatyków. Jak już koniecznie chcesz podać stronę w takiej formie to wrzuć na githuba.

komentarz 13 grudnia 2016 przez Darven Użytkownik (860 p.)

Jak możesz dropboxa nazywać "nieznanym źródłem"?

Dobrze, wrzucam zatem kod na wklej.org :)

HTML:

http://wklej.org/id/2987926/

CSS:

http://wklej.org/id/2987929/

Dlaczego lepiej jest stosować klasy??

" Na każdą sekcję strony rób osobnego diva."

Tylko że ja mam podzieloną stronę odpowiednio na header, content etc. Nie wiem co mogłem źle zrobić. Bardzo proszę was o wyjaśnienie :)