style kate mac

Wpis

• « Poprzedni wpis
• Następny wpis »

środa, 26 października 2011

Subtelny: jednokolumnowy

Nowy kod bloksowych blogów nie zawiera tabel i w swej nagiej formie jest de facto jednokolumnowy. Układ dwuszpaltowy zapewnia mu pływanie poszczególnych elementów. Dzisiaj zrezygnujemy z pływania głównych elementów na rzecz szerokości i układu jednoszpaltowego. Pływać pozwolimy za to elementom wąskiej szpalty.

---

szablony subtelne: 01 różowo-oliwkowy, 02 burzowo niebieski, 03 zgaszony pistacjowy zmienione na jednokolumnowe (gdzie szpalta z treścią poboczną ułożona jest pod wpisami)

---

Zmian będzie nieco więcej niż w przypadku zmiany stronności i będą nieco bardziej skomplikowane ale to raczej ze względu na fakt iż w wąskiej szpalcie znajdują się wybrane przez użytkownika a ja nie mam pojęcia co użytkownik sobie wybierze czy nawet doda. Może więc zaistnieć potrzeba dokonania dodatkowych zmian, już bardziej indywidualnych, w treści pobocznej. Ale to już zadanie dla maniaków kontroli.

Moja bardzo prosta instrukcja zawiera jednak dokładne dane których potrzebować będziesz do zmiany. Zajmuje nieco więcej miejsca niż bloks przewidział na wstęp więc musiałam ją przenieść do rozwinięcia. Zapraszam więc do dalszej części wpisu.

Na początek bardzo dokładna a jednocześnie prosta instrukcja.

1. Wchodzimy w edycję bloga, przechodzimy do karty WYGLĄD i wybieramy zakładkę EDYCJA CSS

2. W arkuszu odszukujemy część opisującą treść. Sprawdzamy jaka jest szerokość przy selektorze #tresc, to będzie nasz wyznacznik (900px).

2a. Przy selektorze #tresc-glowna kasujemy pływanie (float:left;) i zmieniamy szerokość elementu uwzględniając marginesy i dopełnienia (900-2×20=860px width:860px;).

2b. Przy selektorze #tresc-poboczna kasujemy pływanie (float:right;) i zmieniamy szerokość uwzględniając dopełnienia i marginesy boczne (width:900px;).

3. Przechodzimy do części opisującej zawartość szpalty z treścią poboczną. Odszukujemy klasę .boks i zastępujemy polecenie clear: both; poleceniem pływania float:left; Pozostaje nam teraz zdecydować w ile kolumn ułożyć treść poboczną pod stronicowaniem.

3a. Jeżeli chcesz aby elementy z szpalty bocznej ułożyły się w 4 kolumny zmień szerokość przy klasie .boks na width:200px; i dodaj lewe dopełnienie padding:0 0 0 20px;

3b. Jeżeli chcesz aby elementy z szpalty bocznej ułożyły się w 3 kolumny zmień szerokość przy klasie .boks na width:260px; i dodaj dopełnienie po obu stronach padding:0 20px 0 20px;

klikamy zapisz i gotowe.

Wszelkie ewentualne dodatkowe zmiany wynikać będą z zawartości pola na kod HTML. Jeżeli masz tam sporo elementów to może zaistnieć konieczność ich poukładania, zapraszam więc do następnego wpisu. Tutaj, w dalszej części wpisu, znajduje się instrukcja w wersji dla potrzebujących wizualizacji.

Najbardziej chyba klasycznym, popularnym blogowym szablonem jest Kubrick. Jego wersja bloksowa jest w szablonach podstawowych a i ja sama tuningowałam ją wielokrotnie. Bardzo chciałam zrobić też inny wordpressowy szablon, Hemingway'a. Nigdy nie udało mi się jednak wystarczająco obejść bloksowych tabel. Owszem zrobiłam jeden jednokolumnowy projekt ale jego przydatność jest dyskusyjna. Teraz więc pora na coś porządniejszego.

Zmiana szablonu na jednokolumnowy

A teraz instrukcja dla zielonych. W zasadzie powyższa jest wystarczająca i w kodzie są komentarze ale dla zielonych jak szczypiorek na wiosnę dodam jeszcze wizualne wyjaśnienia.

Wchodzimy w edycję bloga:

WYGLĄD -> EDYCJA CSS -> Edytor CSS (czyli to okienko z kodem szablonu)

Odszukujemy miejsce w szablonie gdzie opisany jest główny wygląd kontenera ze szpaltami i samych szpalt, będzie ono na początku arkusza i powinno być także zaznaczone komentarzem

Na początek szukamy selektora #tresc bo tam opisana jest szerokość bloga. Jak widać jest to 900px. To będzie nasz punkt odniesienia.

Przechodzimy nieco niżej do części gdzie opisane są parametry obu szpalt (#tresc-glowna i #tresc-poboczna). Poszerzymy je teraz i pozbędziemy się pływania.

Szukamy selektora #tresc-glowna. Jego zawartość powinna wyglądać tak:

#tresc-glowna {
 float: left;
 width: 590px;
 padding: 0px 20px;
 margin: 0px;
 text-align:left;
}

#tresc-poboczna {
 width: 260px;
 margin: 0px;
 float:right;
 text-align:left;
}

Jedną z pierwszych właściwości wpisanych przy tym selektorze jest float czyli pływanie. W zasadzie nie musimy go zmieniać, po poszerzeniu szpalt przestanie to mieć większe znaczenie dla układu ale aby uprościć sobie sprawę proponuję je usunąć. Pozbywamy się zarówno float:left; z #tresc-glowna jak i float:right; z #tresc-poboczna.

Najważniejsza zmiana dotyczyć będzie szerokości. Ustaliliśmy już, że maksymalnie możemy mieć 900px i tyle wykorzystamy ale zanim wpiszemy to przy width musimy wziąć pod uwagę inne parametry związane z szerokością: margin i padding czyli margines i dopełnienie.

Przy #tresc-glowna widzimy wpisany padding: 0px 20px; Oznacza to, że po obu stronach ustalone jest dopełnienie o szerokości 20px. Nie możemy z niego zupełnie zrezygnować bo zapewnia ono odstęp pomiędzy krawędzią bloga (tą białą częścią) a tłem całej strony (tą szarawą częścią z gradientem w kolorze). Musimy więc odjąć 2×20px od naszego 900px.

900px-2×20px=860px

Przy selektorze #tresc-poboczna margines jest wpisany ale ma wartość zerową, dopełnienia nie ma a więc nic nie musimy liczyć i tylko zmieniamy wartość width z 260px na 900px. Nasz poprawiony fragment kodu będzie wyglądał teraz tak:

#tresc-glowna {
 width: 860px;
 padding: 0px 20px;
 margin: 0px;
 text-align:left;
}

#tresc-poboczna {
 width: 900px;
 margin: 0px;
 text-align:left;
}

Układ mamy już zmieniony, blog będzie już teraz jednokolumnowy ale... Wąska szpalta dotychczas układała swoje elementy jeden pod drugim teraz może to stanowić problem bo większość bloksowych elementów pobocznych nie potrzebuje 900px szerokości.

Przechodzimy więc do zawartości szpalty pobocznej, będzie się ona znajdowała znacznie niżej w arkuszu, zdecydowanie za połową. W nowym kodzie poza szczegółowymi identyfikatorami każdy element pobocznej szpalty ma też ogólną klasę boks. Wstawiłam tam całkiem spore komentarze wyraźnie widoczne. Mam więc nadzieję, że ułatwią one zmiany.

Ułożymy teraz zawartość szpalty pobocznej. Proponuję trzy bądź cztery kolumny. Zmieniany fragment na razie wygląda tak:

.boks {
 clear: both;
 width:auto;
 padding: 0 8px;
 margin-bottom: 16px;
}

Różnica pomiędzy trzema a czterema kolumnami będzie opierała się na dwuch parametrach. Wszystko zależeć będzie od tego jaką szerokość przypiszemy elementom bocznej szpalty.

Zaczynamy jednak od dodania właściwości, która sprawi, że elementy zamiast w pionie będą układać się obok siebie. W tym celu zdecydowałam się użyć właściwości pływania elementu. Należy usunąć czyszczenie clear:both; i zastąpić je pływaniem float:left; Teraz elementy są odpowiednio ułożone ale ich szerokość zależy od zawartości a liczba kolumn od dostępnego miejsca. Niby może być ale nie wygląda za dobrze.

Należy dodać określoną szerokość pojedynczego elementu i nieco odstępu aby zapewnić luźniejszy układ. Biorąc pod uwagę, że zawartość bloksowych elementów często jest stosunkowo wąska wydaje się, że dobrze będą wyglądać zarówno cztery jak i trzy kolumny. Miejsca w szpalcie pobocznej wpisaliśmy 900px dzielimy więc to przez cztery i przez trzy.

900px/4=225px   900px/3=300px

Otrzymany wynik podaje nam maksymalną szerokość każdej z kolumn ale nie uwzględnia odstępów a więc od uzyskanych liczb musimy nieco odjąć. Szpalcie z główną treścią dodałam 20px dopełnienia, akurat tyle będzie też dobrym odstępem pomiędzy elementami. Od naszego wyniku odejmiemy jednak nieco więcej aby zostawić też odrobinę miejsca na ostatnie dopełnienie. Kolumny są trzy bądź cztery ale odstępów do nich potrzebować będziemy odpowiednio cztery i pięć.

Czyli width to szerokość a padding to dopełnienie aby rachunek był prosty a różnica w zmianie niewielka trzymać się będę dopełnienia wielkości 20px aby zachować ten sam odstęp od lewej krawędzi jak w przypadku głównej szpalty.

Cztery kolumny z treścią poboczną

.boks {
 float:left;
 width:200px;
 padding: 0 0 0 20px;
 margin-bottom: 16px;
}

Dopełnienie jest dodane tylko z lewej bo tam jest konieczne. To jest całkowity zaplanowany odstęp więc nie ma potrzeby dodawać go także z prawej, Wyjątkiem może być ostatnia kolumna, której przyda się odstęp z prawej ale trudno powiedzieć co w niej będzie więc lepiej zostawić te 20px zapasu luźno.

Trzy kolumny szpalty z treścią poboczną

Wąska szpalta do tej pory miała 260px, to całkiem wygodna dla nas szerokość bo pozwoli na ułożenie zawartości w trzech kolumnach i zostawi wystarczająco miejsca na dodatkowe odstępy pomiędzy elementami. Układ szerokości będzie wyglądał teraz tak:

3×(20px+260px+20px)=900px

.boks {
 float:left;
 width:260px;
 padding: 0 20px;
 margin-bottom: 16px;
}

 Elementy z pola na kod html

W kodzie szablony new_template7 elementy dodawane w polu na hod html mają własny kontener. Posiada on oczywiście własna klasę ale poza tym ma też przypisana klasę boks. Wszystko jest w porządku jeżeli tych dodatków nie jest nadspodziewanie dużo w porównaniu do reszty zawartości. W tym momencie wszystko co jest w polu na kod html wyświetla się w jednej kolumnie. Jeżeli jednak zaistnieje taka potrzeba to można to oczywiście zmienić bez większej szkody dla szablonu. Ale o tym w następnej notce.

---

Przygotowałam też gotowe pełne arkusze do jednokolumnowej wersji tego szablonu. Aby z nich skorzystać należy:

1. skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga
2. upewnić się, że jako szablon podstawowy wybrany jest ten którego ja używam czyli new_template7 (jeżeli nie to zmienić szablon na ten właśnie)
3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem; dla poszczególnych kolorów będą to odpowiednio
• jednokolumnowy beżowy z kwiatami
• jednokolumnowy niebieski z pikselami
• jednokolumnowy pistacjowy ze wzorkiem

Szczegóły wpisu

Tagi:

• subtelny
• opcja zmiana stronności
• dokładna instrukcja jednokolumnowy

Kategoria:

• kilka uwag o CSS

Autor(ka):

kate_mac

Czas publikacji:

środa, 26 października 2011 08:21

Opcje

• Poleć znajomemu wpis „Subtelny: jednokolumnowy”
• Dodaj komentarz do wpisu „Subtelny: jednokolumnowy”
• Śledź komentarze przez RSS do wpisu „Subtelny: jednokolumnowy”

Trackback

Trackback URL dla wpisu:

http://stylekatemac.blox.pl/2011/10/Subtelny-jednokolumnowy.trackback