Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

Ustawianie wysokości kolumn

||
Szperając w Internecie oraz odwiedzając różne fora/strony internetowe/portale społecznościowe zauważyłam, że ludzie mają problem z najłatwiejszą rzeczą pod Słońcem - ustawianiem wysokości kolumn. To nie żadna filozofia ani fizyka kwantowa, a dwie minutki pracy w projektancie szablonów! Proste jak świński ogonek :) Gotowi? Zaczynamy!

Pierwszy kod znajdujący się na screenie dotyczy pokazywania postów.
Nie zwracajcie na niego uwagi. Liczy się ten pierwszy :)

Wchodzimy kolejno w Projekt >> Układ >> Projektant szablonów >> Zaawansowane >> Dodaj arkusz CSS. W białe pole wklejamy jeden z trzech poniższych kodów w zależności wysokość której kolumny chcemy zmienić. Dla osób 'zielonych' w temacie języka angielskiego przetłumaczyłam najważniejsze frazy.

.column-center-inner {margin-top: -20px}
.column-right-inner {margin-top: -20px}
.column-left-inner {margin-top: -20px}

center - kolumna środkowa
right - kolumna prawa 
left - kolumna lewa

I teraz was zaskoczę, że to nie koniec! A mogło być tak pięknie, prawda? Następny krok, jaki wspólnie wykonamy zsumuje naszą pracę i będzie dopełnieniem. Ten system działa następująco: jeżeli przez dwudziestką mamy minus oznacza to, że kolumna idzie w górę. Im większa liczba od dwudziestki, tym wyżej kolumna będzie się sytuowała. To działa również w drugą stronę. Usuwając minus powodujemy, że kolumna sunie w dół. I tutaj ta sama zasada: im większa liczba, tym niżej kolumna się usytuuje. Wartość px zmieniamy według własnych potrzeb :)

3 komentarze

  1. Nie działa mi to :(

    Próbowałem coś takiego:

    .column-center-inner {margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px}

    .column-right-inner {margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px}

    .column-left-inner {margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px}


    Mój blog - http://szczurownia.blogspot.com/

    OdpowiedzUsuń
  2. dobra działa... ale bottom nie :P

    OdpowiedzUsuń