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 PageMaker | Ogó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. |
Przydatne!
OdpowiedzUsuń+ geniaaalny nowy design! <3
Cieszę się, że instrukcja, jak i design przypadły Ci do gustu :)
UsuńNaprawdę super efekt. Dzięki. :D
OdpowiedzUsuńNie ma za co!
UsuńNiesamowita instrukcja!
OdpowiedzUsuń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ę?
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ć.
Usuń* musiałam dodać kilka spacji w kodach, żeby nie były interpretowane w komentarzu, usuń je na bazie kodu powyżej *
Witam, a gdzie wstawić ten kod na trzecią kulomnę? nie bardzo rozumiem gdzie w którym miejscu to wstawić. kasia
UsuńRównież w wersji hmtl posta. :) Jak już wspomniałam: przed < /tr> znajdującym się w kodzie na dwie kolumny dorzucamy tę trzecią.
Usuń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.
Jeśli nadal będziesz mieć z tym problem - podam konkretny kod. Aktualnie nie mam takiej możliwości technicznej. :)
Usuń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ńOk, mam, musiałam przerwy usunąć, super dziękuję :):):)
UsuńNie łatwiej < div style="float: left;">< /div> ?
OdpowiedzUsuń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.
Usuń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ć. ;)
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ń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ńa jak teraz przywrócic jedna kolumnę?
OdpowiedzUsuńchciałabym aby reszta tekstu była normalna
Formatowanie tekstu spełnia bardzo ważną funkcję, szczególnie kiedy przygotowujemy już go do druku.
OdpowiedzUsuńSolidnie napisane. Pozdrawiam i liczę na więcej ciekawych artykułów.
OdpowiedzUsuń