O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

element dodatkowy Trzecia

Liczba elementów bloksowych jest z góry określona. Mamy tytuł bloga, notki i boczną szpaltę, każdą z tych rzeczy edytujesz i zmieniasz jej zawartość w nieco innym miejscu. Każdą z tych rzeczy możesz wykorzystać na swój własny sposób i do wybranego przez siebie celu. Potrzeba tylko choć odrobinę pomyśleć nieszablonowo. Najwięcej możliwości oczywiście dają notki ale drugim takim fajnym miejsce są pola na dodatki: jedno wyświetla się tylko na stronach z pojedynczą notką ale to drugie, to podstawowe pole na dodatkowy kod HTML wyświetla się na blogu zawsze co daje bardzo wiele różnych możliwości. Na przykład stworzenia własnego zestawu elementów w wąskiej kolumnie.

W zasadzie mniej istotne jest to co potem z tym zestawem elementów zostanie zrobione ale głównym powodem do napisania tego wpisu była tzw. trzecia szpalta. Można ją zrobić na kilka sposobów i może zawierać różne elementy więc nie ma jednej uniwersalnej rady ale jeżeli chcesz aby ta trzecia kolumna zawierała rzeczy, które nie są w bloksowym standardzie (dodatki wklejone przez pole na kod HTML) to w zasadzie musisz zacząć od odpowiedniego przygotowania kodu tych dodatków.

element dodatkowy #Trzecia

Szablony z trzecią szpaltą podzieliłam wg. kilku cech (zobacz w chmurce tagów pod hasłem trzecia). Jedyne szablony dla których ta notka nie jest potrzebna do wizualnego powstania trzeciej kolumny to szablony z samoistną trzecią szpaltą (bo przesunięta do trzeciej kolumny jest cała bloksowa wąska szpalta albo wybrana jej część). Nie znaczy to jednak, że ta notka i przy tych szablonach się nie przyda.

 

Tworzenie dodatkowego elementu Trzecia

Samo stworzenie tego elementu jest banalnie wprost proste. Wybieramy te elementy które mają się znaleźć w takim specjalnym kontenerze i obejmujemy je divem o unikalnym identyfikatorze. Ja wybrałam Trzecia (choć nie zawsze zawartość tego elementu wyświetla się w trzeciej kolumnie, to już kwestia CSS). Jeżeli korzystasz z jednego z moich szablonów na starym kodzie to proponuję wybrać tą sama nazwę dla identyfikatora. Jeżeli jednak chcesz dodać trzecią kolumnę do własnego szablonu (którego ja nie robiłam) to nie ma to większego znaczenia, równie dobrze może to być zosia, C-3PO czy TrzeciaKolumnaZeSpisemTresci. Pamiętaj tylko, że każda literka ma znaczenie, jeżeli piszesz dużą to potem w CSS pamiętaj o tym, nie używaj spacji i nie używaj polskich znaków.

O co chodzi z tym obejmowaniem divem o identyfikatorze? Bardzo prosta sprawa. Na początku kodu wpisujesz , następnie przechodzisz na koniec kodu i wklejasz tam znacznik zamykający . I po sprawie. Oba są niezbędne, wszystko co zostało otwarte powinno zostać zamknięte.

identyfikator trzeciej szpalty

zobacz przykładowy kod w wersji tekstowej »

Podpowiedź dla zielonych jak szczypiorek na wiosnę: Jeżeli niepewnie czujesz się z wprowadzaniem zmian w kodzie i boisz się, że popełnisz błąd to umieść w elemencie Trzecia wszystkie dodatki, całą zawartość pola na kod HTML. Czyli w polu na dodatki wklej znacznik otwierający na początku kodu a zamykający na końcu nie przejmując się zawartością.

na początek pola

na koniec pola

Koniec. Trzecia szpalta zrobiona.


Podstawowe uwagi o HTML

  1. Tagi HTML umieszczamy zawsze w ostrych nawiasach
  2. Każdy element musi mieć opisany osobno zarówno początek jak i koniec. Zamykający element różni się od otwierającego tym, że poprzedzony jest ukośnikiem.
    Otwarcie: <div id="Trzecia">
    Zamknięcie: </div>
    (jest kilka wyjątków od tej reguły ale są one nieliczne i łatwo je zapamiętać - <img />, <hr />, <br />)
  3. Nie mieszaj znaczników. Elementy mogą się w sobie zawierać ale pamiętaj o kolejności (zamykasz w odwrotnej kolejności do otwierania: abc – cba).

Te trzy uwagi na początek wystarczą. Można zacząć grzebać w kodzie. Jeżeli po zapisaniu zmian okaże się, że strona się sypie to na 90% jedna z powyższych trzech zasad została złamana.

Co można dodać w HTML

Wszystko co planujesz umieścić w trzeciej kolumnie musi się znaleźć w przestrzeni pomiędzy otwarciem a zamknięciem znacznika o identyfikatorze Trzecia. Polecam kategorię: pomocnik do tworzenia dodatkowego kodu na blox.pl, znajdują się tam notki wyjaśniające co dodawać i jak to działa. W skrócie najprzydatniejsze elementy to:

  • tekst umieszczaj w znacznikach akapitu <p>Przykładowy tekst</p>
    • akapity najczęściej oddzielone są zwiększonym pionowym odstępem co może być przydatne w wizualnym porządkowaniu treści
  • jeżeli nie chcesz kończyć akapitu a jedynie przejść do następnej linijki to używaj znacznika złamania wiersza <br /> – to jest przykład znacznika składającego się tylko z jednej części; 

Przykład wykorzystujący oba znaczniki:

<p>Przykładowy tekst<br />
Drugi wiersz tekstu<br />
Trzeci wiesz i koniec akapitu</p>

  • Innym przykładem wyjątku od reguły zamykania znaczników jest znacznik obrazu
    <img src="http://adres-obrazu.jpg" alt="nazwa alternatywna" />
  • Aby umieścić aktywny odnośnik musisz skorzystać ze znacznika linku
    <a href="http://adres-linku">linkujące słowo</a>

Linkiem nie musi być tylko słowo, linkować może obrazek wtedy zapiszesz to tak:

<a href="http://adres-linku.pl"><img src="adres-grafiki.jpg" alt="opis" /></a>

  • Istnieją specjalne tagi tworzące listy, bardzo przydatne gdy chcesz np. zrobić spis treści. Najbardziej przydatna wydaje się lista nieuporządkowana (czyli wypunktowana choć najczęściej samo wypunktowanie ukrywam w wąskich kolumnach). Listę linków tworzymy przy pomocy polecenia <ul> </ul>. W ramach listy znajdą się poszczególne punkty wykazu czyli nasze elementy z linkami, które wprowadzamy za pomocą polecenia <li> </li>. Należy pamiętać o zagnieżdżeniu w pojedynczym punkcie listy znacznika linku.

Przykładowo:

<ul>
<li><a href="http://adres.pl">linkujące słowo</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>

To są najprostsze, najczęściej używane znaczniki. Po bardziej szczegółowe informacje o znacznikach i dodawaniu im różnych atrybutów zapraszam do kategorii pomocnik HTML.

W zasadzie mogłabym już na tym zakończyć bo element istnieje, ma nazwę i można go pozycjonować w CSS. Sam wiesz najlepiej co znajdzie się w twojej trzeciej szpalcie. Ze względu jednak na estetykę podam jeszcze kilka przykładowych klas, które ja opisuję w swoich szablonach na wzór bloksowych elementów z wąskiej szpalty.

Specjalne klasy dla dodatkowych boksów

W moich szablonach często opisuję dodatkowe rzeczy. Często są to własne fragmenty kodu, które mają ułatwiać dodawanie różnych rzeczy i funkcjonalności do bloga. Takim czymś jest właśnie element o identyfikatorze Trzecia. Są też zupełnie niezależne od niego uStopka czy menuTop. To są jednak elementy, które mogą się pojawić na stronie tylko raz bo używam ich do przeniesienia części kodu w inne miejsce na blogu.

W szablonach jednak dodaje kilka stylów, które można wykorzystywać wielokrotnie, niczego nie przenoszą w jakieś dziwne inne miejsce tylko edytują wygląd danego elementu: a to dodają podkreślenie, a to zwiększają odstęp pomiędzy elementami, zmieniają kolor etykiety tytułowej, etc. Takie style wielokrotnego użytku dodaje się poprzez przypisanie elementowi określonej klasy.

  • Przede wszystkim pojedynczy zbiór elementów ujmuję w divy o klasach boks:
    <div class"boks">Zawartość pojedynczego kontenera</div>
    Taki kontener to coś analogicznego jak element z linkami do dziesięciu ostatnich notek czy pojedynczy folder z linkami, tylko tutaj samodzielnie decydujesz o treści.
  • Aby upodobnić nową szpaltę do istniejącej wąskiej tworzę klasę dla tytułów:
    <div class="tyt">Przykładowy tytuł</div>

Wykorzystując te specjalnie stworzone w moich szablonach klasy i zwyczajne znaczniki HTML można przykładowo stworzyć listę spisu treści:

<div class="boks">
<div class="tyt">
Spis treści</div>
<ul>
<li><a href="http://adres.pl">pierwszy element</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>
</div>


To są wszystko dodatki. Nie są one niezbędną częścią trzeciej szpalty, to co sobie do niej wstawisz to twoja sprawa. Powyższe informacje mają ci jedynie pomóc podjąć decyzję i ewentualnie uporządkować elementy. Jeżeli sobie zupełnie z tym nie radzisz to polecam szablony z samoistna trzecią szpaltą (należą do nich m.in. te z przeniesionymi zakładkami).

Ta notka opisuje tylko podstawy tworzenia własnej zawartości trzeciej kolumny o ustawianiu jej we właściwym miejscu polecam przede wszystkim CSSowe notki z tagów: trzecia bezwzględnie położona i trzecia pływająca. To są dwa podstawowe sposoby umiejscawiania stworzonej dzisiaj treści jako trzeciej kolumny. Zasadniczo nie różnią się wyglądem: pierwszy jest bardziej na chama więc może tworzyć problemy ale pozwala przenieść element w zupełnie dowolne miejsce, drugi jest bardziej naturalny i idealnie współgra z resztą bloga.


sobota, 26 lipca 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Opisywanie elementu TrzeciaSzpalta z szablony katemac
W poprzednim wpisie zamieściłam kilka wskazówek jak uporządkować elementy w polu na kod html tak aby było łatwiej wyświetlić je jako trzecią szpaltę. Teraz przejdziemy do edycji CSS i przekształcimy jeden z szablonów w wersję xxx. Do tego celu ... »
Wysłany 2008/07/26 16:57:05
Komentarze
2008/07/27 19:12:11
Dzięki tej notce udało mi sie zrobić na blogu dwa nowe elementy. Dzięki za nią ;)
I mam jeszcze takie pytanie - chciałbym, aby na mieć wyszukiwarkę na blogu nad kalendarzem. Jak to zrobić?
-
kate_mac
2008/07/27 21:50:42
@wojtekb.1
wykorzystaj właściwość position:absolute przy #BlogPrzeszukiwanie
określ top w px ale left chyba możesz pozostawić auto; sprawdź tylko czy to działa tak jak powinno w IE6
i cieszę się, że notka się przydała :D czyli ślepy może gdzieś doprowadzić głuchego ;)
-
2008/07/28 14:45:15
Robiłem tak, ale między polem na wpisanie tekstu, a klawiszem "szuka" byl gigantyczny odstep.
-
kate_mac
2008/07/28 17:43:29
@ wojtekb.1
na pewno przy selektorze #BlogPrzeszukiwanie ?? (tylko #BlogPrzeszukiwanie pozostałe: #BlogPrzeszukiwanieForm, #BlogPrzeszukiwanieText INPUT, #BlogPrzeszukiwanieKlawisz INPUT - zostawiasz w spokoju)

To o czym piszesz nie zdarzyło mi się więc na sucho nie wiem co może być przyczyną; zerknęłam do Twojego CSS i wg. mnie wszystko jest ok.

jedyna rzecz jaka budzi moją wątpliwość to fakt iż nie masz określonej wielkości width dla #BlogPrzeszukiwanie może to jest przyczyną kłopotów?

zazwyczaj jeżeli element zawiera podelementy które maja float to ten element nadrzędny powinien mieć określoną wielkość
-
2008/07/28 18:09:27
A co musze wpisać w "width"?
-
kate_mac
2008/07/28 18:36:27
@wojtekb.1
proponuję to samo co przy wąskiej szpalcie czyli jakieś 150px chyba ;)
-
2008/07/29 19:51:20
Wielkie dzięki za pomoc. Tym razem się udało.
-
wojtekb.1
2008/08/04 13:27:11
Teraz jest inny kłopot - przeglądałem, czy wyszukiwarka działa w każdy miesiąc i nie działa to znaczy czasami jest niżej, a czasami wyżej. Tak samo dzieje się, gdy w "Ostatnich notkach" jest jakiś dłuzszy tytuł - taki, który zajmuje dwie linijki. Jest na to jakiś sposób.
-
wojtekb.1
2008/08/05 18:55:41
Dobra, już udało mi się to poprawić :)
-
kate_mac
2008/08/06 08:52:47
@wojtekb.1
Widzę, że świetnie Ci poszło dopasowywanie szablonu;
-
wojtekb.1
2008/08/06 14:32:35
Dzieki ;) Ale trochę mi to zajęło. A wszytko zaczęło sie od pobrania tego szablonu.
-
mojtrening
2010/09/04 22:03:44
Napisałeś że w css wpisać:

#TrzeciaSzpalta {
}

a jakimi parametrami to wypełnić - bo po wpisaniu podstawowych 3 szpalta pokazuje w wąskiej szpalcie i traci to sens.
-
kate_mac
2010/09/05 12:56:17
@mojtrening
Tak jak jest napisane w tym wpisie to jest zaledwie część pierwsza dotycząca stworzenia zawartości. Opisane trzeciej szpalty wyjaśniam w następnej noce
I to by było na tyle. W następnym wpisie przejdę do edycji CSS.

Link do następnej i poprzedniej notki jest nad tytułem tej.
Jako wpis powiązany z tą notką odnośnik do następnej pojawia się też w części TrackBack: Opisywanie elementu TrzeciaSzpalta
-
kryzysowazona
2011/08/04 23:48:46
Witaj czy mogłabyś mi pomóc jak ustawić licznik wizyt troszkę się rozjechał na trzeciej szpalcie dziękuje bardzo haftytiny.blox.pl
-
kate_mac
2011/08/09 19:09:24
@kryzysowazona

przede wszystkim musisz chyba podomykać kod u siebie; masz wiele paragrafów otwartych a nie zamkniętych; to tego główny div Trzeciej też jest otwarty a nie ma zamknięcia; musisz to posprawdzać; może to jest odpowiedzialne za rozjechane dodatki - jeżeli tak to dopóki nie pozamykasz otwartego kodu może nam się nie udać przesuwać dodatki tak jakbyśmy chciały

najlepiej skopiuj sobie cały kod do notatnika i fragment po fragmencie posprawdzaj czy to co otwarte ma także zamknięcie
na pierwszy rzut oka cytat jest ok, podziękowania mają dwa otwarcia p i żadnego zamknięcia, ilustracje z picasaweb wydają się ok, lubimy czytać chyba też, napisz do mnie ok ale już "szablon od" ma otwarcie paragrafu i brak zamknięcia;
licznik odwiedzin ma kod ok, jest w osobnym divie, któremu będziemy mogły nadać identyfikator ale za nim brakuje zamknięcia divu o identyfikatorze Trzecia, jest otwarty na samym początku ale po kodzie licznika powinien być zamknięty a nie jest;
-
calineczkazbajkii
2011/08/25 15:52:55
postaram sie stworzyc tą trzecią szpaltę , bo szablon mam fajny .
ps Jak usunąć archiwum i ostanie wpisy
a utworzyc kalatalog alfabetyczny ?
-
kate_mac
2011/09/06 16:24:01
@calineczkazbajkii

Jeżeli korzystasz z szablonów na starym kodzie to aby usunąć archiwum w postaci listy miesięcy należy w arkuszu stylów (css) znaleźć część dotyczącą archiwum #BlogArchiwumBox i dopisać tam w ramach nawiasów klamrowych tego elementu display:none;

Ostatnie wpisy można sobie w ogóle wyłączyć w edycji bloksa. Wystarczy wejść w zakładkę USTAWIENIA - BOCZNA SZPALTA i tam jest możliwość zaznaczenia nie przy ostatnich wpisach.

Co masz na myśli pisząc katalog alfabetyczny? Chmurkę tagów? Ona jest najczęściej ułożona alfabetycznie. Tagi dodajesz pisząc np notkę a jeżeli nie wyświetla Ci się z nich chmurka w bocznej szpalcie to trzeba ją włączyć w częśći WYGLĄD - TAGI DO WPISÓW
Jeżeli masz na myśli spis treści na osobnych stronach i podlinkowany w postaci listy na głównej bloga to jest to całą wielka operacja. Musisz na stronach statycznych zrobić sobie odpowiednie wpisy zawierające co tam będziesz chciała. Następnie stworzyć listę linków do tych stron. Najprościej umieszczając je w zakładkach w folderze zatytułowanym np katalog alfabetyczny. Irytek napisała bardzo prostą instrukcję bardzo krok po kroku.
-
brummblogging
2011/09/18 19:13:39
Kłaniam się. Wykorzystuję szablon i uważam, że jest piękny i przejrzysty. Mam problem z trzecią szpaltą. W normalnym widoku, wszystko trzyma się pionu, ale w widoku pojedynczych wpisów, treść trzeciej spływa na lewo i przykleja się do tekstu i zdjęć głównych.
Nie pomaga objęcie treści trzeciej szpalty odpowiednim divem.
Denerwuje mnie to troszkę.
Proszę uprzejmie o pomoc.
-
kate_mac
2011/09/20 19:48:35
@brummblogging
W tym szablonie widzę pomyłkę do poprawy. Robiłam ich kilka pod rząd i raczej na szybko. Zerknęłam do arkusza i opisu Trzecia nie widzę więc w notce źle to wyjaśniłam. Zamiast ujmować to w div i identyfikatorze trzecia zastosuj klasę boks. Możesz nią objąć każdy pojedynczy zbiór, powinno to zapewnić im także dolny odstęp.

Zamiast nawiasów okrągłych oczywiście ostre.
(div class="boks") pojedynczy element albo nawet całość (/div)

Nie jestem pewna czy to zadziała. Jak nie to daj znać i spróbujemy z przeróbką szablonu i dodaniem jednak tego identyfikatora Trzecia.
-
brummblogging
2011/09/26 19:15:55
Dziękuję za odpowiedź. Dzięki wskazówce udaje mi się przenieść do trzeciej szpalty tekst; niestety nie reagują obrazki i nadal przyklejone są do głównej ... spróbuję jeszcze wieczorem objąć całość.
-
kate_mac
2011/10/05 19:18:31
@brummblogging
wprowadziłam kilka poprawek do szablonu; ich wyjaśnienie pozwolę sobie przenieść pod notkę o szablonie ręcznym 12 ornament - purpurowym aby nie wprowadzać zamieszania tutaj (Identyfikator użyty w szablonie tutaj opisywanym i w tym który używasz są jednak nieco inne)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...