Elementy układu strony css - 2

Elementy układu strony css - 2

Układ strony www najczęściej składa się z kilku kolumn, najczęściej nie więcej jak 3, w ktorych umieszcza się treści i pionowe menu. Cały problem polega na tym aby je tak ułożyć aby ustawiały się obok siebie, a nie jeden pod drugim, nie wskakiwały na dół. Kłopotliwą sprawą jest też takie ułożenie kolumn aby były równej długości.

W obecnych czasach najprostrzym rozwiązaniem jest skorzystanie z gotowych rozwiązań jak frameworki bootstrap, foundation lub inne, albo znaleźć gotowy układ w sieci. Niemniej jednak warto znać narzędzia do tworzenia układu strony.

Position

Przy pomocy position można ustawić element w miejscu innym, niż normalnie powinien się znajdować zgodnie z jego miejscem na stronie.

  • static – brak oznaczonej pozycji, wartość domyślna
  • relative – ustawienie według rodzica. Element zmienia swoją pozycję ale zostawia po sobie miejsce, które nie jest niczym zajęte
  • fixed – ustawienie względem viewport czyli widocznej części strony. W tym przypadku element będzie zawsze w tym samym miejscu, bez względu na przewijanie strony
  • absolute – ustawienie pozycji elementu tak, że nie pozostawia on po sobie pustego miejsca. Jest wyjmowany ze swojego miejsca i wkładany gdzie indziej, a miejsce po nim jest zajmowane przez kolejne elementy.

Stosowanie position nie jest zbyt łatwe, szczególnie że chcemy, żeby strona się dostosowywała do wielkości ekranu i była odpowiednio wypośrodkowana. Position nieco utrudnia tworzenie układu strony. Ja stosuję position gdy chce ustawić w innym miejscu jakiś element względem bloku rodzica. W takim przypadku ustawiam position:relative dla rodzica co nic nie zmienia, a następnie position: absolute dla dziecka aby umieścić go w innym miejscu niż normalnie się znajduje.

Float

Float służy do ustawienia oblewania jednych elementów przez drugie i jest wykorzystywany do tworzenia układów strony www.   W tym przypadku problemem jest zakończenie układu przy użyciu float tak aby elementy pod nim nie wpływały na całość. Jeśli użyjemy float to wszystko co się znajduje poniżej będzie oblewało ten element dopóki nie zastosujemy clear albo jakiegoś innego sposobu (opisane poniżej).

Układ strony tworzony przy pomocy float ma tę wadę, że kolumny nie są tej samej długości. Na przykład tworzymy kilka kolumn, które maja jakąś zawartość i ładnie by było gdyby były równe w pionie. Są na to różne sposoby. Można zastosować skrypty. Framework Foundation posiada możliwość ustawienia równych kolumn.

tu są sposoby na tzw. clearfix – autor tego artykułu zaleca sposób nr. 2

  1. dodanie dodatkowego elementu z właściwością clear:both, który usuwa opływanie. Może to być element pusty.
  2. dodanie do rodzica klasy floatfix
        .floatfix {
            zoom:1; /* dla IE < 8 */
          }
    
          .floatfix:after {
            content:'';
            display:block;
            clear:both;
          }
  3. dodanie do rodzica overflow:hidden lub overflow:auto
  4. dodanie właściwości float to elementu rodzica
  5. ustawienie wysokości, jeśli je znamy

display:Inline-block

Elementy inline-block zachowują się jak elementy inline ale można im nadać wysokość i szerokość oraz margines, padding. Elementy takie ustawią się w poziomie obok siebie, w zależności od tego jaka jest ich szerokość i tylko wtedy, gdy są umieszczone w kodzie obok siebie.

Nie ma potrzeby zakończenia oblewania. Inline-block wymaga ustawienia vertical-align. Rozwiązanie to jest rzadko stosowane i mało znane. Może dlatego że ma swoją wadę. Niby wygląd kodu i spacje i przejścia do nowej linii w kodzie nie mają wpływu na wyświetlanie strony, ale w rzeczywistości tak nie jest w rzadkich przypadkach. Akurat w przypadku inline-block mają one znaczenie co utrudnia stosowanie tego rozwiązania.

Sposoby na ustawienie elementów blokowych w poziomie obok siebie:

  1. float – elementy będące dziećmi swojego rodzica mają ustawioną właściwość float. Jeśli ustawimy float:left to wszystkie elementy ustawią się kolejno do lewej, o ile pozwala na to ich szerokość. Te które się nie zmieszczą wskoczą poniżej.
  2. display:inline-block – elementy dzieci mają ustawiony inline-block, muszą być w kodzie obok siebie. Muszą mieć ustawiony vertical-align.
  3. display: inline dla  dzieci elementu rodzica. Najczęściej wykorzystuje się ten sposób do ułożenia elementów listy w poziomie. W tym przypadku przestają działać właściwości blokowe jak width, height, margin itp
  4. display: table-cell – dodanie właściwości display:table to elementu rodzica i display:table-cell do elementów dzieci sprawi, że przeglądarka będzie czytać te elementy jako tabelkę. Wadą tego rozwiązania jest fakt, że różne przeglądarki mogą niepoprawnie wyświetlać taką tabelkę.
  5. position: absolute – nadajemy rodzicowi właściwość position absolute lub relative w zależności od tego czy chcemy żeby zmienił swoje miejsce na stronie czy nie. Dodajemy position:absolute do elementów dzieci i możemy je wtedy dowolnie ustawić względem rodzica. Takie elementy nie będą się zwężać wraz ze zwężaniem się okna przeglądarki. Ja korzystam z media query i stosuję taki układ tylko dla dużych ekranów.

szczegółowy artykuł na ten temat

 

artykuł ten stanowi proste streszczenie turoriala na podstawie: http://learnlayout.com/display.html, oraz http://kodcss.pl jeśli chcesz dogłębnie poznać temat zajrzyj tam

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.