Style dla modułów w arkuszu CSS

Pełniejsze omówienie niektórych poruszanych tu kwestii znajdziesz w opracowaniu Style dla modułów.

W arkuszu stylów potrzebne są nam co najmniej deklaracje dla:

table.moduletable th{}
table.moduletable th{}
table.moduletable td{}
div.moduletable {}
div.moduletable h3 {}
.module{}

Ponadto należałoby umieścić odmiany deklaracji stylów dla modułów menu:

 
table.moduletable-nav{}
table.moduletable-nav th{}
table.moduletable-nav td{}

A że naszym celem jest zaprezentowanie przykładów różnych rozwiązań, dodamy jeszcze przykłady stylów tworzących dla modułów ramki z zaokrąglonymi narożnikami:

.module-corn2 h3 { }
.module-corn2 { }
.module-corn3 { }
.module-corn3 div { }
.module-corn3 div div { }
.module-corn3 div div div { }
.module-corn3 h3 { }
.module-corn div div div div, .module-corn div div div div div {

Zastosowane tu w nazwach przyrostki -corn2 i -corn4 nie są wprawdzie zgodne z zasadami semantycznego kodu, bo wskazują, z którym stylem formatowania modułów można je zastosować. Użyjemy jednak takich nazw dla większej czytelności kodu. W projekcie dla konkretnego serwisu warto używać nazw wskazujacych na funkcję w strukturze treści, np. -nowiny. Cyferki w nazwach klas sygnalizują, że w pierwszym przypadku mamy do czynienia z klasą wykorzystujacą styl modułu -2, a w drugim -3.

Skopiuj do pliku template_css.css następujący kod:

/* ======== STYLE MODUŁÓW ======== */
table.moduletable {
   width: 100%;
   margin-bottom: .5em;
   padding: 0;
   border-spacing: 0;
   border-collapse: collapse;
background-color: #D9FFDD;   /* tylko do podglądu */
}
div.moduletable {
   padding: 0;
   margin-bottom: .16em;
background-color: #D9FFDD;   /* tylko do podglądu */
}
table.moduletable th, div.moduletable h3 {
background: #B2F6B9; /* tylko do podglądu */
   color: #666666;
   text-align: left;
   padding-left: .33em;
   height: 1.8em;
   line-height: 1.8em;
   font-weight: bold;
   text-transform: uppercase;
   margin: 0 0 .16em 0;
}
table.moduletable td {
   padding: 0;
   margin: 0;
}

Dzięki dwom kolorom tła: #D9FFDD w table.moduletable i div.moduletable oraz ##B2F6B9 w table.moduletable th, div.moduletable h3 widzimy obszary zajmowane przez moduły. Usuniemy później te reguły bądź dostosujemy do kolorystyki strony.

Spójrzmy na stronę testową. Tekst w modułach przylega nieestetycznie do lewej i czasem prawej krawędzi ramek modułów. Drobna modyfikacja poprawia wygląd:

div.moduletable {
    padding: 0 .16em;    /* dodane: .16 em - dopełnienie z lewej i prawej */
    margin-bottom: .16em;
background-color: #17EB2B;   /* tylko do podglądu */
}
table.moduletable td {
   padding: 0 .16em;    /* dodane: .16 em - dopełnienie z lewej i prawej */
   margin: 0;
}

Kolejny problem do rozwiązania, to szerokość ramek i tło w modułach pod główną zawartością strony. Zastosowany szablon modułów generuje nam tabelę jednowierszową z trzema komórkami, w których z kolei umieszczone są trzy tabele klasy moduletable. Szerokość ramek wszystkich trzech modułów powinna być taka sama, ale zależy ona od długości wiersza tekstu. Umieściliśmy tutaj m.in. moduł Sekcje - krótkie teksty odnośników powodują, że ramka tego modułu jest wyraźnie mniejsza od dwu pozostałych. A tło wypełnia tylko komórkę tabeli, w której moduł został umieszczony.

Aby uniknąć takiej sytuacji, potrzebny jest nam dodatkowy element obejmujący ten obszar. W kodzie pliku index.php wprowadźmy więc następującą zmianę:

<div class="related_links"><?php mosLoadModules( 'user8', 1 ); ?></div>

Dodaliśmy element div klasy related_links. Nazwa sygnalizuje zawartość modułów w tym obszarze. W arkuszu stylów, korzystając z selektora potomka (w CSS1 zwanego kontekstowym) dodajemy w sekcji stylów dla modułów deklarację:

.related_links table td {
  width: 33%;
  background-color: #17EB2B;
}

100% szerokości tabeli podzieliliśmy na trzy, co dało 33% szerokości komórek. Powtórzyliśmy regułę wypełniającą komórkę tłem, dzięki czemu wyrównamy optycznie wysokość wszystkich trzech modułów.

Moduły nad główną treścią

Ponad główną treścią strony przewidujemy umieszczenie poziomo dwóch modułów obok siebie. Nie widać tego na stronie testowej, ale możemy przypuszczać, że zdarzy się sytuacja podobna. Wprowadźmy więc podobne modyfikacje do pliku index.php:

<div class="short_links"><?php mosLoadModules( 'user1', 1 ); ?></div>

I w pliku template_css.css:

.short_links table td {
  width: 50%;
  background-color: #17EB2B;
}