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

Kolumny tekstu w poście

||
Bywa, że sytuacja zmusza nas do podziału tekstu posta na dwie kolumny. Dzieje się tak z wielu względów: rozdzielony artykuł ładniej się prezentuje, szybciej się go czyta czy zajmuje mniej miejsca. Tak czy siak, warto znać ten kod, ponieważ jest bardzo przydatny. Wykonanie tej czynności (bez wypełniania kolumn) zajmuje średnio trzy minuty, więc nawet użytkownicy niedoświadczeni powinni nie mieć problemów. Mam nadzieję, że instrukcja okaże się przydatna. W razie problemów, pytań proszę o komentarze!

"Na sucho" wygląda to tak:

Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMakerOgólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie.




1) Wchodzimy w posty na blogu, otwieramy "nowy post" [1], po czym klikamy w okienko "HTML" [2]. Wklejamy tam poniższy kod [3]. Następnie ponownie wybieramy "Nowy post" [4], aby wrócić do edycji tekstu, po czym uzupełniamy kolumny wedle własnego uznania. Uwaga! Wartości width  ( naszym przypadku 320 i 300) można zmieniać, choć w większości szablonów dostosowują się one automatycznie.

<table cellpadding="10" cellspacing="10"><tbody> <tr><td align="justify" valign="top" width="320">Tekst lewej kolumny</td><td align="justify" valign="top" width="300">Tekst prawej kolumny</td></tr></tbody></table>

Efekt końcowy:


Screen pochodzi z mojego bloga.

15 komentarzy

  1. Przydatne!
    + geniaaalny nowy design! <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że instrukcja, jak i design przypadły Ci do gustu :)

      Usuń
  2. Naprawdę super efekt. Dzięki. :D

    OdpowiedzUsuń
  3. Niesamowita instrukcja!
    Wszystko działa bez zarzutów i wygląda perfekcyjnie! Idealnie nadaje się do różnych zakładek. Och i jeszcze: jest łatwa!
    A może by tak podzielić tekst na trzy części? Da się?

    OdpowiedzUsuń
    Odpowiedzi
    1. Jasne, że się da! ;) Wystarczy przeanalizować budowę kodu html. Będzie tyle kolumn, ile stworzysz. W tym celu umieść kolejny znacznik < td align="justify" valign="top" width="200">Tekst bardziej po prawej< / td> przed < /tr>. Poza tym możesz trochę pozmieniać wartości width pozostałych kolumn, aby je równo ułożyć.
      * musiałam dodać kilka spacji w kodach, żeby nie były interpretowane w komentarzu, usuń je na bazie kodu powyżej *

      Usuń
    2. Witam, a gdzie wstawić ten kod na trzecią kulomnę? nie bardzo rozumiem gdzie w którym miejscu to wstawić. kasia

      Usuń
    3. Również w wersji hmtl posta. :) Jak już wspomniałam: przed < /tr> znajdującym się w kodzie na dwie kolumny dorzucamy tę trzecią.
      Powyżej na zdjęciach przedstawiamy jak tam dotrzeć, a potem to już tylko kwestia organizacji Twojej treści i przyporządkowanie ich do konkretnych kolumn.

      Usuń
    4. Jeśli nadal będziesz mieć z tym problem - podam konkretny kod. Aktualnie nie mam takiej możliwości technicznej. :)

      Usuń
    5. Dziękuję ja to rozumiem tylko nie wiem własnie przed którym < /tr> i gdzie to wstawić. Będę wdzieczna o podanie całego kodu a ja sobie tylko wkleję. będę czekała jak będziesz miała mozliwość podać mi. Dziękuję Kasia

      Usuń
    6. Ok, mam, musiałam przerwy usunąć, super dziękuję :):):)

      Usuń
  4. Nie łatwiej < div style="float: left;">< /div> ?

    OdpowiedzUsuń
    Odpowiedzi
    1. A próbowałeś to zgrać? Bo jak teraz kombinuję, to mi nie idzie. Chociaż... gdyby nad tym przysiąść, może coś by z tego powstało.
      Nasz kod pozwala stworzyć jakby osobne "ciała", które można sobie układać. To, co podajesz, to tylko wyrównanie, które można podważyć wpisując w css'ie chociażby justify z important...
      Ale nie bronię próbować i kombinować. ;)

      Usuń
    2. Float i text-align, o którym Moniko piszesz, to dwie zupełnie różne rzeczy. Pierwsza właściwość odpowiada za pozycję elementu, druga to wyłącznie opcja formatowania tekstu.

      Usuń
    3. Przyznaję, że odniosłam się tylko do tekstu, więc trochę ograniczyłam tok myślenia. ;p Z drugiej strony, jak komuś zależy, to wszystko sam wypróbuje i się dowie. ;)

      Usuń