Skocz do zawartości

Zdjęcie
- - - - -

[CSS] Prawidłowe rozmieszczanie elementów na stronie - jak?

css pozycjonowanie box-model obliczaie elementy

5 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Krzysio80
0
Neutralna

Napisano 04 sierpnia 2015 - 19:29

#1

Cześć! Zacząłem niedawno naukę CSS, ale mam jeden problem... Kiedy już okoduję stronę w html'u i zacznę zabawę w stylizacje wizualną, to jak prawidłowo określić rozmiar/ rozmieszczenie poszczególnych elementów  w CSS'ie?  Co brać pod uwagę? Na przykład, tworzę wrappera - ogólny div na całą stronę, a później tworzę w nim diva o nazwie "socials" na 100% szerokości i w jego wnętrzu tworzę diva "socialdivs" 500px szerokości, a później robię w jego wnętrzu osobne divy, takie jak "twitter,fb,yt" itd... Po czym mam określać ich wymiary, aby cały div "socialdivs" był wydzielony po równo, oczywiście z uwzględnieniem marginesów, paddingów, szerokości i wysokości? Istnieje jakaś aplikacja, gdzie można wszystko poobliczać, czy coś? Jak to wszystko uwzględniać i co uwzględniać? Przepraszam za chaotyczność, ale nie wiem, jak to można prościej napisać... Po prostu nie wiem, jak to wszystko obliczać. Jeszcze dla przykładu... Mam tego diva 500px i chcę wygospodarować dla nich równo przestrzeń to podziele pole na cztery i wyjdzie po 125px, tylko co z odstępami wtedy? Podpowie ktoś coś, bo na chwilę obecną rozmieszczanie elementów to dla mnie czarna magia.


  • 0

krzysiek_web

    Użytkownik

  • 63 postów
    • Czas spędzony online: 3d 19h 56m 32s
6
Neutralna

Napisano 05 sierpnia 2015 - 07:24

#2

Skorzystaj z bootstrapa i jego rozłożenia elementów.


  • 0

webKS - Wdrożenia stron i sklepów Internetowych.
Usługi Informatyczne 'webKS'.


Krzysio80
0
Neutralna

Napisano 05 sierpnia 2015 - 09:34

#3

Skorzystaj z bootstrapa i jego rozłożenia elementów.

Mógłbym, no... Tylko, że framework, to droga na skróty :) Jest on dobry, ale dla zaawansowanych koderów chcących przyspieszyć swoją pracę, a ja chciałbym opanować dobrze CSS zanim się na np. Bootstrapa przesiądę. Dalej nie wiem co brać pod uwagę przy obliczeniach. 


  • 0

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 05 sierpnia 2015 - 11:40

#4

Mógłbym, no... Tylko, że framework, to droga na skróty :) Jest on dobry, ale dla zaawansowanych koderów chcących przyspieszyć swoją pracę, a ja chciałbym opanować dobrze CSS zanim się na np. Bootstrapa przesiądę. Dalej nie wiem co brać pod uwagę przy obliczeniach. 

Poczytaj najpierw o tworzeniu tzw. gridów css. Podstawą są 960 i 1060 grid system. Jest to na ten moment już tylko cząstka wiedzy na której możesz się oprzeć, będąca dedykowaną desktopom. Chcąc, czy nie chcąc w końcu dojdziesz do tworzenia rozwiązań mobilnych oraz babrania się z AWD. Tutaj warto byś poczytał również o ideologii mobile first.

 

W gruncie rzeczy i tak semantyczną strukturę html przygotujesz najpierw (choć można prawie równie dobrze klecić wszystko po kawałku). Jednostki szerokości jakimi będziesz operował to głównie % oraz selektor max-width.


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 05 sierpnia 2015 - 14:08

#5
Oczywiscie łatwiej na początku uczyć sie CSS tworząc proste, statyczne strony. Umiejętność posługiwania się kalkulatorem może okazać się niezbędna. Do metod podanych w postach wyżej należy przechodzić stopniowo.
Logiczne jest to że od razu nie nauczysz się tworzyć full responsywne strony, na etapie nauki trzeba do tego dążyć małymi krokami.
  • 1

logo-green-dark.png


Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 08 sierpnia 2015 - 11:44

#6

Do autora: Może się przydać przy liczeniu https://developer.mo...b/CSS/box_model


  • 0

2ed58r7.png






Podone tematy Collapse


Również z jednym lub większą ilością słów kluczowych: css, pozycjonowanie, box-model, obliczaie, elementy

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych