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

Opisywanie elementu TrzeciaSzpalta

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 posłuży nam szablon specjalnie w tym celu stworzony:

3X - podstawowy wersja bez x
podstawowy szablon na bloga blox

Rozmiar bloga

Rozpoczynamy od określenia wielkości. Dotychczas blog miał szerokość 775px ale w związku z tym, ze chcemy dodać element wpływający na jego szerokość musimy bloga nieco powiększyć. Docelowa szerokość to 995px. Jest to szerokość, która zdecydowanej większości użytkowników pozwoli prawidłowo wyświetlać wygląd bloga. Według statystyk podanych na stronie ranking.pl niespełna 50% użytkowników korzysta z rozdzielczości ekranu 1024x768. Będzie to nasza docelowa najmniejsza rozdzielczość (drugie 50% używa większych rozdzielczości; użytkownicy 800x600 to nieco ponad 3%).

Szablon 3X - podstawowy wersja bez x (fajna nazwa ;) nieprawdaż?) powstał na bazie Spokojnego i kolejność elementów, którą tu dzisiaj będę opisywać dotyczy właśnie tego układu (wąska szpalta po prawej, tytuł bloga umieszczony ponad wąską i szeroką szpaltą)

Nową szerokość bloga podajemy przy selektorach

  • #BlogGlownyBox
  • A także warunkowo jeżeli selektory te miały wcześniej określoną szerokość, jeżeli nie to nie ma potrzeby niczego zmieniać, dopasują się automatycznie:
    #BlogTytulBox – jeżeli korzystasz z szablonu który tytuł bloga umieszcza na całej jego szerokości
    #NadTytul
    #Stopka
    #BlogBodyBox  - to w elemencie o tym identyfikatorze pojawiają się wszelkie dodatki

Pamiętaj, jeżeli box ma określone jakieś inne elementy wpływające na szerokość (margin, padding, border) to sumę ich wartości left i right musisz odjąć od docelowej wielkości

Miejsce na element TrzeciaSzpalta

Docelowa szerokość bloga – aktualna szerokość bloga = miejsce na trzecią szpaltę
995px-775px=220px

W zależności od szablonu który przekształcasz miejsce to może się nieco różnić wielkością. W przypadku 3X - podstawowy wersja bez x zależało mi właśnie na takiej wielkości. Pozwoli ona na nadanie trzeciej szpalcie tej samej wielkości co wąskiej i pozostawi taki sam odstęp pomiędzy trzecią a szeroką jak szeroką a wąską.

Wiedząc ile możemy mieć miejsca przesuniemy o tyle szeroką szpaltę. W tym celu wykorzystam właściwość margin-left. Dotychczas ta cecha byłą określona jako 0px więc po prostu zmienię jej wartość na 220px. Jeżeli jednak w waszym szablonie szeroka szpalta ma lewy odstęp to zsumujcie liczby.

#BlogSzerokaSzpalta {
MARGIN: 0px 0px 0px 220px;
}

W tym momencie po zapisaniu zmian w waszym szablonie powinno pojawić się puste miejsce. Tam właśnie wypozycjonujemy nowy element.

Pozycjonowanie elementu TrzeciaSzpalta

Do wypozycjonowania elementu wykorzystamy właściwość position. Świetnie opisał ją e-maupa i stamtąd właśnie moja wiedza pochodzi. Wcześniej używałam nieco innej metody.Polecam cały wpis o pozycjonowaniu Podstawy layoutu CSS czesc I choć w zasadzie wykorzystamy to co opisał w ostatnim fragmencie Absolutnie/relatywnie

Jeśli w elemencie otaczającym ustawimy pozycjonowanie relatywne, to wszystkie zawarte w nim elementy pozycjonowane absolutnie zostaną rozmieszczone względem niego.

Tym otaczającym elementem będzie oczywiście wspomniany już #BlogBodyBox. Wśród jego właściwości należy dopisać

position: relative;

Teraz każdy element zagnieżdżony w BlogBodyBox a pozycjonowany absolutnie nie wyjdzie poza ramy BlogBodyBox.

W zasadzie mój opis do tego momentu dotyczy także powstania przykładowo szablonu 3X - 03 podstawowy ostatnie komentarze. Teraz jednak przejdziemy do części w której potrzebuje kodu html który zbudowałam poprzednio.

Całości elementów które przenosimy daliśmy jeden znacznik o identyfikatorze TrzeciaSzpalta teraz właśnie wykorzystamy selektor #TrzeciaSzpalta. Będzie to element, który wypozycjonujemy absolutnie. Poza cechą position musimy jeszcze określić jej położenie, dysponujemy właściwościami: top, right, bottm, left. Z oczywistych względów wykorzystamy top i left.

#TrzeciaSzpalta {
width: 190px;
position: absolute;
top:0px;
left:0px;
}

Umieściło to naszą trzecią szpaltę w oczekiwanym miejscu. Teraz pozostaje nam jedynie opisać wygląd nowego elementu. Zaplanowałąm wyglad trzeciej szpalty jako analogiczny do wyglądu wąskiej a więc musiałam określić wyrównanie tekstu, kolory linków, wygląd listy wypunktowanej i wyglad tytułów który nadałam klasę tyt. Fragment CSS dotyczący tych elementów możesz zobaczyć tutaj»

W zależności od tego co umieści się w elemencie TrzeciaSzpalta trzeba będzie to opisać w CSS. W poprzednim wpisie podałam kilka przykładów. Efekt finalny wygląda tak:

3X - 04 podstawowy trzecia szpalta
trzyszpaltowiec

zapraszam do skorzystania

Urodziny_szablony_kate_mac

sobota, 26 lipca 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2008/11/27 02:34:54
Jesteś wspaniała, dziękuję Ci z całego serca!
-
2009/03/01 16:30:04
Na moim blogu pojawił się Twój szablon, ale po wpisaniu kodu HTML nie ma odnośnika do ciebie. Czy coś źle zrobiłam? Kiedy dodałam skrypt zawijanych zakładek i wpisałam odpowiedni kod HTML na blogu jest odnośnik do tego, od kogo to pobrała.
-
kate_mac
2009/03/08 13:46:06
@okienko.ona
szczerze mówiąc najprościej byłoby mi odpowiedzieć na takie pytania gdybym znała adres bloga o którym mowa i widziała błąd o który chodzi - tak w ciemno mogę spekulować ale możliwych odwiedzi może być więcej niż jedna
-
2009/06/25 23:49:15
Wszystkie szablony Twego autorstwa są śliczne...:-)Pozdrawiam serdecznie. Znalazłam ciekawą stronę. Myślę,że przypadnie Ci do gustu-może jakiś nowy pomysł pojawi się w Twej głowie....thecutestsiteontheblock.com/ Pa...
-
milczacy_krytyk
2009/08/16 16:59:44
Ogromne dzięki za posty o szablonach 3x. Już od dawna chciałem dorobić nową szpaltę do bloga, ale nie wiedziałem jak sobie z tym poradzić. Z Twoją instrukcją poszło to szybciej i łatwiej niż przypuszczałem. Wielkie thx!
-
kate_mac
2009/08/30 14:34:32
@milczacy_krytyk
3X to kombinowane rozwiązanie i ma wiele wad ale bywa skuteczne więc ciesze się, ze moje instrukcje przydały Ci się
-
2009/08/30 15:35:10
Szkoda czasu na dotpay.pl to angielskie g*** kiedy zarobisz kilka tysięcy zablokują ci konto ponieważ mają takie prawo bez podania powodu -czytaj regulamin hehehe Lepiej zakladac konto u innych posredników
DotPay to Chamy i złodzieje sms-y o tresci ( ... )na numer 91968 (AT.TAK) 92568 (AT.NIE) (koszt 1,22zł) Super nagrody od dotgowno.pl
-
2009/10/20 15:13:15
nie dziala mi zrobilo mi sie tylko miejsce, z reszta tam gdzie nie powinno:( Nie wiem, czu jest jakas szansa na pomoc z Twojej strony?
-
kate_mac
2009/11/08 15:08:40
@tibbidabo
szansa jest ale ostatnio rzadko odpowiadam na maile i komentarze więc jeżeli komuś się śpieszy to niestety trafił w złe miejsce;
odpowiem na każdy komentarz ale często dużo dużo później...

skoro zrobiło Ci się miejsce na Trzecią szpaltę to świetnie sobie poraziłaś; jeżeli to co przeznaczyłaś na zawartość Trzeciej przesunęło się (choć niekoniecznie tam gdzie chciałaś) to jeszcze lepiej - z tego co piszesz wygląda na to, ze sobie poradziłaś tylko zapewne zapomniałaś o jakiś drobiazgu...
pytanie: gdzie wpisałaś:
position: relative;
czy nie o tym przypadkiem zapomniałaś? nie widzę już efektu twoich działań więc Trudno mi zgadywać co poszło nie tak ale stawiam na to; w innym przypadku rozwiązaniem byłaby zmiana parametrów a z tym zapewne sama sobie byś poradziła
-
2010/09/22 23:37:34
przydatna rzecz, chciałam zastosować, nie wyszło, potem sobie pomyślałam, że to jednak nie to, czego potrzebuję - wolałabym nie poszerzać bloxa aż tak (chociaż zapewne optymalną wielkość można zmienić i resztę dopasować do tej zmienionej) i w zasadzie nie potrzebuję całej szpalty.

Potrzebuję czegoś, co chyba mieści się w podobnej tematyce. Pozornie prostego. Mianowicie: chciałabym mieć na wąskiej szpalcie wiersz napisany kursywą. Nad archiwum, zakładkami itp. Myślałam, że wystarczy wrzucić tekst i doda się automatycznie, ale tak to nie działa. Mogłabyś mnie jakoś nakierować? Byłabym baaardzo wdzięczna :).
-
kate_mac
2010/09/26 15:07:22
@dookreslenia
całkiem dobrze trafiłaś, mniej więcej powinnaś robić to samo co jest napisane w tej notce i poprzedniej

po pierwsze tworzysz element
jak to zrobić było w poprzedniej notce, w skrócie tekst, który chcesz umieścić ujmij w element blokowy o konkretnym identyfikatorze (div id);
wklej kod który stworzyłaś do pola na kod html;
zapisz

na razie Twój tekst powinien się wyświetlać pod wąską szpaltą ale teraz na podstawie ten notki możesz to zmienić

czyli po drugie piszemy odpowiedni css
poszerzaniem czegokolwiek nie musisz się przejmować więc tą część możesz sobie darować; zwróć uwagę tylko na to, że w miejscu gdzie chcesz umieścić swój tekst coś jest a więc musisz wprowadzić pewne zmiany

zacznij od znalezienia dwóch selektorów
BlogWazkaSzpalta i SkomentujWazkaSzpalta
nadaj im taki sam górny odstęp; jego wielkość to wielkość Twojego miejsca na tekst więc liczbę musisz dobrać sobie sama; pamiętaj aby zrobić to w obu miejscach bo tekst będzie pojawiał się zarówno na głównej jak i na tej z pojedynczym wpisem (jak widzę na pojedynczej masz określony górny margin ale na głównej nie)

teraz pozycjonowanie
zacznij od dodania position:relative; przy selektorze #BlogGlownyBox

następnie dodaj nowy selektor, może być na końcu arkusza; nazwa selektora to nazwa identyfikatora który przypisałaś swojemu divowi poprzedzona kratką
następnie kod w nawiasach klamrowych
zaczynamy od position:absolute; top:380px; left:20px;
to powinno umiejscowić element w odpowiednim miejscu
teraz opiszemy jego wygląd dodaj
width:180px; aby element z tekstem nie był szerszy niż wąska szpalta
i teraz zmienimy tekst w kursywę font-style:italic;

zrobione; instrukcja jest krok po kroku więc mam nadzieję, że Ci pomoże; jeżeli któryć z kroków jest niejasny to napisz co Ci nie wychodzi a wyjaśnię dlaczego i co masz zrobić aby było ok
-
2010/09/26 23:39:46
Twoja pomoc jest nieoceniona, kate, naprawdę. Tak mi się wydawało, że z tą trzecią szpaltą jest coś na rzeczy...
No dobrze. To jakby wykonałam Twoje zalecenia. I jakby jest prawie okay :). Tylko ten tekst, który nadal mam na dole powinien mi wskoczyć w tę dziurę, która jest na górze :). I uprzedzając pytanie - tak, wpisałam "position:relative;" w #BlogGlownyBox. Zastanawiam się tylko, czy to się przypadkiem w żaden sposób nie gryzie ze wszystkim, co miałam tam wcześniej?

("{
background:url(/resource/most.jpg) no-repeat top left
#EBC79E;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
width: 800px;
border:3px solid #000;
}"

(nie usuwałam efektów, żebyś mogła zerknąć w razie czego ;) )
-
2010/09/27 12:00:43
ach, no i jeszcze nie widać (teoretycznie ustawionej) kursywy :).
-
kate_mac
2010/09/27 19:24:42
@dookreslenia
Faktycznie jest bardzo prawie okay
Świetnie, że zostawiłaś zmiany bo faktycznie to bywa problem gdy nie mogę zobaczyć o co chodzi;
Znów jesteś na właściwym tropie, rzeczywiście chodzi o to co masz wpisane wcześniej ale niekoniecznie przy tym konkretnym selektorze;
"przepuściłam" Twój szablon przez validator css i jest kilka problemów

1. na samym początku masz zamknięcie komentarza */ to nie powinno powodować problemów bo generalnie otwarcia są bardziej problematyczne ale ten fragment to śmieć, warto śię go pozbyć
2. masz jeszcze dwa razy klamry zamykające zupełnie niepotrzebne; znów zamykające więc nie problem niemniej śmieć:
jedna jest w okolicach #BlogTytulText A
a druga przed: #BlogLinkiBox (czyli mniej więcej w połowie arkusza)
3. przy div#SkomentujTrackBackUrlInfo (pod koniec arkusza) masz przed zamknięciem wpisany numer koloru czyli jest wartość cechy bez cechy; znów nie problem w tym konkretnym przypadku bo za numerem koloru nie ma już nic przed zamykającą klamrą; ale śmieć najlepiej do skasowania

4. Najistotniejszy błąd. Przed samym nowym selektorem #Wiersz masz trochę śmieci i to one powodują problem

div#BlogWpisPoprzedniNastepnyBox {margint-top: 10px; margin-bottom: 10px}x; margin-bottom: 10px}

mam nadzieję, że sama widzisz problem ale dla pewności wyjaśniam; kasując coś co było po tym selektorze zostało ci tutaj trochę problematycznych śmieci, sama końcówka

div#BlogWpisPoprzedniNastepnyBox {margint-top: 10px; margin-bottom: 10px} zostaje
x; margin-bottom: 10px} usuwasz koniecznie koniecznie

kursywy też nie było widać właśnie z tego powodu; nic co było wpisane po tych ostatnich śmieciach nie będzie działało dopóki ich nie pozbędziesz się ;)

skoro to wiersz to możesz sobie jeszcze wpisać przy tym selektorze cechę text-align:left; wyrówna wszystko do lewej (w zasadzie powinno być wyrównane bo nadrzędny selektor tak mówi ale w html masz otwarty tag zamknij go a najlepiej pozbądź się i jeżeli chcesz wyśrodkować buttony to zrób to poprawniej stylami)
-
2010/09/27 20:25:52
Dziękuję, dziękuję, dziękuję :). Kochana jesteś, naprawdę! :) O, to da się wyśrodkować buttony stylami mimo że one są wpisane w boczną szpaltę? Hmm, no tak, na pewno się da, skoro dało się też tak kombinować z wierszem... Jakoś analogicznie, jak mniemam, tak :)?

A tak już całkiem "od czapy" i poza tematem szpalty, jeszcze jeden drobiażdżek mnie irytuje, ale nie mogę go złapać :). Mam inną wielkość tytułu notki na głównej, a inną przy komentarzach. Mam szukać różnicy tutaj gdzieś?

".BlogWpisItemTytul {
color:#6F0000;
font-size:13pt;
padding-bottom: 10px;
padding-top:0px;
padding-left:20px;
}
.BlogWpisItemTytul a,
.TytulKomentowanegoWpisu {
color:#6F0000;
font-size: 13pt;
}
.TytulKomentowanegoWpisu {
color:#6F0000;
font-size: 13pt;
padding-bottom: 10px;
padding-top:30px;
padding-left:20px;
}
.BlogWpisTresc,
.TrescKomentowanegoWpisu,
.WstepKomentowanegoWpisu {
font-size:10pt;
line-height: 140%;
text-align: justify;
overflow:hidden;
padding-left:20px;
padding-right:20px;
}
"
Bo jeśli nie tu, to nie mam pomysłu, gdzie, a tu się wielkość chyba jakby zgadza...?
-
kate_mac
2010/09/27 20:57:00
@dookreslenia
mniemasz bardzo dobrze; wszystkie butony które chcesz wyśrodkować obejmujesz divem o konkretnym identyfikatorze (czyli robisz analogicznie jak z wierszem tylko oczywiście identyfikatorem musi być koniecznie inne słowo a zamiast teksu wiersza w środku masz kody butonów)
a temu identyfikatorowi w css przypisujesz wyśrodkowanie czyli text-align:center;

TYTUŁ
miejsce mniej więcej dobre i wielkości nie tylko jakby się zgadzają; trzy pierwsze dotyczą tytułu ale na stronie pojedynczym wpisem tytuł jest w tagu nagłówka h2 czyli poza tym, że faktycznie opisują go te selektory, które tu wpisałaś istotna też jest wielkość czcionki przy h2, którą po pierwsze określa m.in. przeglądarka; aby to przeglądarkowe ustawienie zmienić wpisuje się w szablonie kombinatory z h2 albo samo h2
tak jest u Ciebie, na początku arkusza masz tytuły h; możesz tam przy h2 zmienić na to samo co masz przy tych selektorach, które tu wpisałaś albo bardziej elastycznie pozmieniaj przy wszystkich h wielkość font-size:1em;
oznaczać to będzie wielkość taką jak nadrzędna czyli ta z selektorów które tu wpisałaś (wpisując 2em masz wielkość 2 razy wielkość odziedziczona - proste, nieprawdaż)
możesz też sobie zmienić font-weight bo na głównej tytuł jest linkiem a wszystkie linki są pogrubione na pojedynczej tytuł jest h2 który też naturalnie, przeglądarkowo jest pogrubiony ale twój szablon na samym początku to zmienia

mam nadzieję że wyjaśniłam wystarczająco zrozumiale; wiem, ze mogłam po prostu podać ci właściwe wielkości i parametry i też by było ale wieżę, że jeżeli wyjaśnię dlaczego coś się dzieje to potem samemu można próbować rozwiązać problem w analogicznej sytuacji; nawet jeśli się nie uda to nie szkodzi chętnie będę podpowiadać dalej, do skutku - wolę podpowiadać niż podawać gotowce ;-) mam wrażenie, że nauczam hehe
-
2010/09/27 21:37:01
hehehe. No ale nauczasz! przynajmniej ja się czuję dokształcona :). Drugi raz o to samo nie zapytam - masz to jak w banku ;). Tym bardziej, że akurat to, co mi było potrzebne to chyba nie są zbyt wielkie wyczyny (btw, tak się zastanawiałam, czy te parametry okreslone przez h nie gryzą mi się z wielkościami czcionek... hehe. Tyle, że nie miałam pojęcia, co jest nadrzędne - rozumiem, że zawsze to, co jest w selektorach, tak?)

To jeszcze (ostatnie, obiecuję!) pytanie. Tagi. Wielkość jest odgórnie określona? A jeśli tak, to czy da się ją zmodyfikować jakoś? Bo z tego, co sobie przypominam, to przy szablonach nie ma chyba żadnych selektorów, które by ich dotyczyły, a z tego, co widzę, wielkość jest równa wielkości tytułu, czyli (jak mniemam) h2. Dałoby się zrobić, żeby była h1? I jeszcze potrzebowałabym linijki odstępu między ostatnią zakładką a napisem "Tagi", ale to chyba też jakoś automatycznie jest wstawiane?

-
kate_mac
2010/09/27 23:23:46
@dookreslenia
tym razem trochę błądzisz ale i tak rewelacyjnie mi się tłumaczy dzisiaj - wszystko łapiesz

NADRZĘDNOŚĆ
to nie całkiem odpowiednie słowo - dla mnie sugeruje większą ważność a w tym przypadku określamy po prostu kolejność
najważniejszy jest ten który jest najbliżej elementu - tak jak tworzyłaś nowy element z wierszem selektor najbliższy "ciału" to był identyfikator twojego diva czyli #Wiersz
wyżej czyli wcześniej jest selektor który zawiera wszystkie blokosowe dodatki a także wąską i szeroką szpaltą czyli #BlogBodyBox
W przypadku tytułu notki na stronie głównej tekst tytułu otoczony jest tagiem linku, następnie divem z klasą tytułu, następnie jest div z klasą całej notki, wyżej div z identyfikatorem szerokiej szpalty a jeszcze wcześniej wspomniany przed chwilą #BlogBodyBox (na stronie z pojedynczą notką link zastąp nagłówkiem drugiego rzędu i masz analogiczną kolejność)
Jednym z "odkryć" które pomogło mi zrozumieć strony internetowe było "odkrycie" źródła strony (Ctrl+U)
początkowo może się to wydawać szalenie skomplikowane ale da się łatwo to rozgryźć, szczególnie że sama wstawiasz fragmenty kodu ;-)
nie zwracaj uwagi na to co jest przed body - to są takie różne techniczne; jak zacznie się body to zaczyna się to co widzisz na blogu; masz szablon lewostronny więc najpierw masz kod wąskiej ale zjedz sobie niżej a zobaczysz kody notek (zaczną się niedługo po Twoim wierszu bo jest on jednym z ostatnich elementów pod wąską szpaltą

dla przykładu tytuł pierwszej notki na głównej
Hiper.
i na komentarzowej
Hiper.

klasy i identyfikatory to rzezy indywidualne - tworzy je autor strony i można ale nie trzeba ich opisywać
taki typu h2 (nagłówek) czy a (link) czyli znacznik może mieć jakieś cechy przypisane przez przeglądarkę jak w przypadku nagłówków wielkość i grubość czcionki, w przypadku lików domyślny jest kolor niebieski i podkreślenie ale w większości szablonów już na początku określamy a i po sprawie

TAGI
Jak zaczęłam przerabiać szablony aby dostosować część z tagami zrobiłam sobie małą ściągawkę abym nie musiała za każdym razem zaglądać do źródła
możesz sobie podejrzeć ale tym razem podam Ci gotowca, który sobie możesz wkleić do szablonu - w porównaniu do mojego gotowca zmieniłam nieco wielkości marginesów - bo u Ciebie są inne; zmieniłam wygląd tytułu elementu - aby pasował do pozostałych tytułów w wąskiej szpalcie; i odrobinkę zmniejszyłam wielkość tagów bo nimi się przejmowałaś ale radzę Ci na razie ich bardziej nie zmniejszać
Tagi będą miały różną wielkość w zależności od tego do jak wielu notek będą przypisane, na razie masz tylko do jednej więc wszystkie są tej samej wielkości ale jak będzie bardziej różnorodnie to te popularne będą rosły ale te nieużywane będą malały (używane przez Ciebie oczywiście, dodawane do notek)

możesz sama zobaczyć tutaj u mnie na blogu: "urodziny bloga" są duże a "źródło strony" jest jednym z mniejszych; jak będziesz miała nieco więcej tagów to będziesz mogła lepiej to ocenić u siebie i wtedy podejmij decyzję co do wielkości

#BlogChmuraTagowBox {
margin: 5px 0px 20px 0px;
}
#BlogChmuraTagowTytul {
color: #411109;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:1.0em;
font-weight:bold;
padding: 15px 0px 10px 0px;
}
ul.BlogChmuraTagowLista {
margin: 0px;
padding: 0px;
list-style-type:none;
TEXT-ALIGN: center;
}
.BlogChmuraTagowLista li {
font-size:0.9em;
display: inline;
padding: 0px 3px;
}

a pytania możesz zadawać dalej
teraz odpowiadam na bieżąco, w ciągu kilku dni a nie tygodni więc korzystaj ;-) nie zawsze będę znała odpowiedz ale jest spore prawdopodobieństwo, że jednak tafię
-
2010/09/28 12:18:41
widzisz, albo jesteś rewelacyjną nauczycielką, albo ja fenomenalnie pojętną uczennicą hehe ;). Albo jedno i drugie.

O istnieniu źródła strony wiem od dawna ;). Za to nie wiedziałam, jaki jest skrót do niego (dzięki ;)). Nie wspominając o tym, że źródła stron zawsze mi się wydawały tak okruuutnie skomplikowane ;). W ogóle to ja się wychowałam na html-u, przejście na platformę blox.pl i css było dla mnie szokiem, jakieś tam podstawowe rzeczy jestem w stanie wyłapać (większość jest logiczna), ale cudów raczej nie należy się po mnie spodziewać :). Jak nie wiem, a chciałabym wiedzieć, to googlam - w zasadzie jakoś tak trafiłam pod Twoją notkę o trzeciej szpalcie :).

Póki co chyba nadal łapię, przeczytałam ściągę o tagach, to też mi się rozjaśniło, co jest czym i dlaczego tak (intrygowała mnie obecność stylu listy nienumerowanej, heh). Na razie chyba niczego więcej mi nie potrzeba, dziękuję, jesteś cudowna :).

No może tylko z ciekawości - jaka jest różnica między "margin" a "padding"? Albo konkretniej - możesz podać mi przykład, do czego np. używa się "padding"? :)

-
kate_mac
2010/09/28 19:54:39
@dookreslenia
MARGIN vs. PADDING
to faktycznie należy do początkowo trudniejszych rzeczy; w skrócie margin to margines czyli odstęp od elementu obok a padding to dopełnienie czyli odstęp wewnątrz elementu pomiędzy jego krawędzią a bezpośrednią zawartością; zaraz wyjaśnię to obrazowo ale najpierw muszę zaznaczyć że żadna z tych wielkości zasadniczo nie wlicza się do width i height czyli cała przestrzeń jaką będzie zajmował element to margin plus padding plus width lub height w zależności od tego czy liczysz długość czy szerokość

a teraz plastyczny przykład
wkładasz wazon do pudełka (przyjmijmy że jest z gumy jak balon) pudełko zaś ląduje w szafie; przestrzeń jaką zajmuje wazon w gumowym pudełku to width i height; nie chcemy jednak żeby nasz wazon się potłukł, porysował czy coś w tym stylu więc nasze gumowe pudełko napełnimy styropianem, powietrzem czy czymś takim - to będzie coś co znajdzie się pomiędzy wazonem czyli zawartością (np.teksem albo ilustracją) a krawędzią elementu czyli padding; wsadzamy teraz nasze pudełko do szafy ale nie chcemy aby nasz balon się przedziurawił więc musimy zostawić trochę miejsca pomiędzy balonem z wazonem a innymi rzeczami w szafie czyli dajemy margin, który odsunie balonikowe pudełko od innych elementów

taisha zrobiła kiedyś taki obrazek, może on to zobrazuje lepiej jeżeli moje plastyczne wyjaśnienia nie trafiają do Ciebie ;-)
-
il_gattino
2012/10/28 19:51:47
Dzięki wielkie, za szczegółowe i pomocne informacji w tworzeniu bloga. Skorzysatłam z jednego z Twoich szablonów i teraz próbuję go dostosować do swoich potrzeb. Mam tylko małą prośbę o pomoc, a może wielką. Chciałabym nad poszczególnymi etykietami typu archiwum, zakładki itp, umieścić małe obrazki. Czy mogłabyś mi pomóc. Z góry dziękuję
-
kate_mac
2012/10/29 09:26:07
@il_gattino
Zmiana jest mała i raczej łatwa. Tak naprawdę nie wiem o co dokładnie się pytasz i co dokładnie sprawia Ci problem więc poniżej zarys wyjaśnienia wszystkiego co związane z tematem:
1. obrazek
2. nazwa elementu
3. opis w szablonie


Ad. 1. Obrazki dodaj do zasobów bloga.

Ad. 2. Sprawdź jak nazywają się konkretne elementy którym chcesz dodać obrazki. Najlepiej w źródle strony (Ctrl+U) bo na żywo zobaczysz to czego szukasz. Klasy (class) w CSS poprzedza się kropką (.), klasy mogą na stronie występować wielokrotnie. Identyfikatory (id) poprzedza się w arkuszu kratką (#) i na jednej stronie jeden identyfikator powinien pojawiać się tyko raz, być unikalny. Większość z etykiet w wąskiej kolumnie opisana jest identyfikatorami.
Jeżeli masz problem z źródłem strony (a polecam źródło bo tam sa tylko rzeczy, które cię interesują) to wyszukaj interesujące cię etykiety na tych listach: BODY, Box, Text, Szpalta - o co chodzi? i Zmiany na Blox - tagi.

Ad. 3. Gdy już będziesz wiedzieć co opisujesz przejdź do arkusza stylów w edycji bloksa i możesz zacząć czary.
Potrzebujesz w zasadzie dwóch cech: background i padding. Dla przykładu proponuję taki opis:

#ArchiwumTytul {
padding:20px 0 0 0;
background: url(/resource/obrazekarchiwum.jpg) no-repeat center top;
}

Gdzie
#ArchiwumTytul to selektor odpowiedzialny za opis wyglądu etykiety archiwum.
padding to dopełnienie; opisuje się je zgodnie z ruchem wskazówek zegara poczynając od góry; ja wpisałam 20px ale to tylko przykład - wpisz wysokość swojej ilustracji jeżeli ma być nad nazwą etykiety
background to wywołanie ilustracji, którą chcesz dodać; szczegóły opisu tła sprawdź sobie w notce w któej tłumacze opis background
-
Gość: il_gattino, *.net.stream.pl
2012/10/29 19:30:11
Dziękuje za pomoc. Niestety chyba to nie jest na mój mały rozumek. Owszem udało mi się wstawić obrazek, ale powatarzał się przy wszystkich etykietach archiwum,zakładki, itp. Jestem wściekła na siebie, ale chyba muszę odpuścić. Bo będę jeszcze bardziej wściekła, że nie umiem sobie poradzić. Jeszcze raz dziękuję za pomoc.
-
kate_mac
2012/10/31 07:23:07
@il_gattino
Jesteś już niesamowicie blisko celu. Nie zniechęcaj się bo skoro udało Ci się sprawić, że obrazek się pojawił to znaczy, że wszystko zrozumiałaś świetnie. Został teraz tylko jakiś szczegół o którym nie masz pojęcia więc nie o rozumek chodzi tylko o wiedzę.

Pytania pomocnicze:
1. Szablon jest na nowym czy starym kodzie? bo do tej pory zakładałam, że na starym
2. Jeżeli przy każdym elemencie ma być inny obrazek to każdy element musi mieć inny opis w szablonie (ja często opisuję je razem bo dodaję dokładnie ten sam opis - ty chcesz mieć inne obrazki więc musisz taki zbiorczy opis rozbić)

Jeżeli przyczyną jest, któraś z powyższych rzeczy to żaden problem dokończyć zmianę.
-
Gość: il_gattino, *.net.stream.pl
2012/11/01 21:39:57
Dzięki za wsparcie. Szaablon jest na nowym kodzie. I rzeczywiście wszystkie elementy są opisane razem. Spróbuje jeszcze raz. Jeśli masz jakieś jeszcze rady to chętnie przyjmę.
-
kate_mac
2012/11/02 09:35:14
@il_gattino
A właśnie, tak podejrzewałam. Na nowym kodzie masz kilka opcji 'nazwania' jednego elementu więc w szablonie może być kilka różnych odwołań do tego jednego elementu. Jeżeli jednak zmieniasz ten który jest podlinkowany przy Twoim loginie (handmade zielony) to z tego co pamiętam tam jest tylko ten jeden zbiorczy zapis. Rozbijasz go na pojedyncze i każdy opisujesz osobno.
-
il_gattino
2012/11/02 16:54:05
Dzięki stokrotne. Wszystko działa, jak powinno. Pozdrawiam. W razie problemu wiem, gdzie się skierować:)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...