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

Problemy z kodowaniem layouta

VPS Starter Arubacloud
0 głosów
459 wizyt
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

+1 głos
odpowiedź 11 grudnia 2016 przez Kamil Naja Nałogowiec (27,550 p.)
Ad 5 - narzędzie zaznaczania w Photoshopie, PerfectPixel jako wtyczka do przeglądarki, jakieś narzędzie do robienia zrzutów ekranu (np PicPick)
+1 głos
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?
0 głosów
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 :)
0 głosów
odpowiedź 29 grudnia 2016 przez Darven Użytkownik (860 p.)
Komu ta strona jeszcze się "rozpada"?? Sprawdzałem na dwóch komputerach (jeden z FHD, drugi 720p) i na obu layouty dobrze wyglądają. Jeśli komuś się rozpada to z jakiego powodu?? Bo nie wiem co może być powodem i nie wiem jak to mozna jeszcze sprawdzić.

Dlaczego lepiej jest stosować klasy zamiast id??

Podobne pytania

0 głosów
1 odpowiedź 261 wizyt
pytanie zadane 30 maja 2017 w Sieci komputerowe, internet przez arek01996 Stary wyjadacz (12,100 p.)
0 głosów
1 odpowiedź 144 wizyt
pytanie zadane 31 sierpnia 2020 w HTML i CSS przez rob Bywalec (2,440 p.)
0 głosów
2 odpowiedzi 607 wizyt
pytanie zadane 27 stycznia 2019 w HTML i CSS przez maarittka Nowicjusz (120 p.)

93,020 zapytań

141,982 odpowiedzi

321,283 komentarzy

62,366 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...