Poziome linie rozdzielające

Znacznik hr jest rzadko stosowany w głównej dystrybucji Joomla! (znaleźć gomożna m.in w skryptach joomla.php i joomla.xml.php. Częściej spotykamy go w komponentach, np. Akobook czy Events. A że jest to znacznik prezentacyjny, należy do grupy wycofywanych ze standardu XHTML. Oczywiście, może być nadal stosowany, choć formatowanie go sprawia pewne problemy.

Określenie koloru poziomych linii rozdzielajacych za pomocą CSS wymaga zastosowania różnych stylów dla różnych przeglądarek. Oto przykładowy kod:

 
hr{                                       /* kolor5 */
   background-color       : #77A1CC;      /* Netscape 6/7, Mozilla */ 
   color                  : #77A1CC;      /* IE */
   border                 : #77A1CC;      /* Opera */
   margin                 : .5em 0;   
   } 
}

Ciekawy sposób rozwiązania problemu formatowania elementu hr i tworzenia separatorów znajdziesz w blogu Piotra Petrusa: Linie poziome - ponownie ładne i estetyczne.

Jeśli chcesz zróżnicować wygląd linii rozdzielających np. użytych w pliku szablonu index.php, możesz stworzyć dodatkowo klasę .separator {} zaproponowaną swego czasu przez Peekmambo.

 
hr.separator {                            /* kolor4 */
   background-color       : #6188B7;      /* Netscape 6/7, Mozilla */ 
   color                  : #6188B7;      /* IE */
   border                 : #6188B7;      /* Opera */
   width                  : 50%; /ustala długość linii * /
}

Separator artykułów

Do oddzielenia artykułów w blogach zastosowano w Joomla! element div klasy .article_seperator {}. Między początkowym i końcowym znacznikiem elementu umieszczona jest spacja:

 
<div class="article_seperator"> </div>

Klasie .article_seperator {} można przypisać kilka stylów, m.in. szerokość, kolor czy obrazek tła, wysokość, np.:

 
.article_seperator {
  height         : .1px;
  width          : 4em;
  background     : #ff00ff url(../images/separator.png) repeat-x;
}

Zwróć uwagę na nazwę klasy - po literze ’p’ następuje ’e’, a nie ’a’.