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

Dodawanie elementów pod wąską szpaltą

Istnieją pewne oczywistości, które nie dla każdego są oczywiste. Po poprzednim wpisie dotyczącym wyszukiwarek ponownie zaczęłam zaglądać do własnych statystyk dotyczących „Najczęściej występujących fraz w wejściach z wyszukiwarek”. Wśród przykładowych zapytań natrafiłam na frazę „dodawanie gadżetów do wąskiej szpalty”. Rzecz jak najbardziej oczywista. Nie jest też za bardzo trudna ale ma w sobie kilka niewiadomych, które jak na oczywistość są mało oczywiste.

Dodawanie gadżetów do wąskiej szpalty

Po pierwsze ostrzeżenie: jeżeli masz wąską szpaltę po lewej stronie to ostrzegam ostrożnie z gadżetami. Blog ładuje się w kolejności od lewej do prawej i zdecydowanie lepiej jak najpierw ładuje się treść (content) a dopiero potem nawigacja i gadżety. Tak więc apel do wszystkich gadżeciarzy – używajcie szablonów z wąską szpalta po prawej stronie.

Po drugie: jak to się robi
Oczywiście wpisując kod html gadżetu w polu na kod html w edycji bloga. A gdzie jest to pole? Zobacz u debergeraca jest dokładna prezentacja.

I teraz przechodzimy do meritum czyli do wyglądu. Aby rzecz nie była czysto teoretyczna jako przykładowy dodatkowy element bloga omówię statystyki.

drzewo CSS BlogBodyBox

Na początek najważniejsze: wbrew temu co może się wydawać dodatkowe elementy nie są dodawane w wąskiej szpalcie, one są pod nią i w związku z tym definiuje je „wyższy” element czyli przede wszystkim #BlogBodyBox, następnie #BlogGlownyBox i na końcu Body (w ostateczności, jeżeli występujące w gadżecie elementy nie mają zdefiniowanych parametrów w tych selektorach o ich wyglądzie zadecydują domyślne ustawienia przeglądarki). Właśnie ze względu na ten fakt często gadżety są ustawione za bardzo na lewo. Proponuję dwa rozwiązania.

1. Tagi html

Poprzedź kod gadżetu, w naszym przypadku statystyk, tagiem decydującym o wyśrodkowaniu elementu (<center></center>) czyli kod będzie teraz wyglądał tak

<center>kod_html_gadżetu_w_ostrych_nawiasach</center>

2. nadaj nazwę gadżetowi i określ jego położenie w CSS
Ta metoda jest dużo mniej prowizoryczna i daje znacznie więcej możliwości.

a. przypisz nazwę elementowi

<div id="nazwa_elementu">kod_html_gadżetu_w_ostrych_nawiasach<div>

b. opisz jego wygląd w CSS

W arkuszu CSS dodaj odpowiedni selektor i opisz jego parametry

#nazwa_elementu {text-align:center;}

W ten sposób osiągnęliśmy dokładnie ten sam efekt. Polecam jednak w przypadku elementów typu button/znaczek nadać im paramenty podobne do parametrów buttonu/loga bloxa czyli skopiujcie parametry definiujące selektor #BlogLinkiBox

I gotowe. 

niedziela, 30 marca 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
dodatkowe boksy czyli o podstawach HTML słów kilka z szablony katemac
Takie dodatki wstawia się na bloga poprzez pole na kod HTML: USTAWIENIA - gt BOCZNA SZPALTA - gt Dodatki - gt Pole na dodatkowy HTML 65279 Potrzebujesz dokładniejszych wyjaśnień jak znaleźć miejsce na ten kod? Zapraszam do notki dla zupełnie ... »
Wysłany 2011/12/10 18:58:20
Komentarze
2008/04/01 00:32:23
Oczywiście, że elementy są pod wąską szpaltą, ale potocznie mówi się o całości wąska szpalta. Jednak powiedz mi od czego zalezy maxymalna szerokość, jaką będzie mógł mieć wstawiony tam gadzet, aby nie rozwalił szablonu na IE?
-
kate_mac
2008/04/01 08:58:12
myślę, ze tą szerokością powinna być szerokość wąskiej szpalty ale liczona całościowo width+padding+margin (wszystko dotyczące wąskiej szpalty); gadżety mieszczą się pomiędzy prawą krawędzią szerokiej szpalty a prawą krawędzią BlogBodyBox (czyli generalnie szerokość najczęściej jest właśnie szerokością wąskiej szpalty - ale zawsze mogą się zdarzyć wyjątki)
jeżeli będzie szerszy to zacznie rozpychać (oczywiście tylko w IE) BlogBodyBox
-
rainboweyed
2008/04/04 12:16:31


#pojemnik-na-elementy{height:ile poterzeba; max-width:szerokość wąkiej szpalty minus jej padding;}


-
kate_mac
2008/04/04 13:40:30
@rainboweyed
no tak, to zapewni szerokość taką jaką mają elementy wąskiej szpalty (rozwiązanie estetyczne)
ale...
id dla tych elementów jest wtedy konieczny (wystarczy umieścić wszystkie elementy w ramach elementu określanego identyfikatorem #pojemnik-na-elementy)

odebrałam pytanie Irytka jako bardziej "techniczne" - maksymalna szerokość elementów pod wąską szpaltą tak aby szablon nie rozjeżdżał się w IE

wiedząc ile jest miejsca pomiędzy szeroka szpaltą a krańcem BodyBox można szukać gadżetów które się tam zmieszczą i nie rozwalą szablonu

ale oczywiście umieszczenie gadżetów w osobnym pudełku jest najlepszym rozwiązaniem
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...