Home Joomla Код Joomla Отдельные статьи CSS валидность сайта
CSS валидность сайта PDF Печать E-mail
Автор: А.Волос   

Так получилось, что я еще совсем недавно познакомился с Joomla. Сделав начальную версию сайта, на котором вы сейчас читаете эту статью, и поместив кое-какой контент, не без удовлетворения стал рассматривать окно сайта. Тут я увидел надпись в правом нижнем углу - Проверить XHTML и CSS.

Нажав на ссылку Проверить CSS увидел страницу с предупреждениями об ошибках. Ошибок было много.
Пришлось почитать в сети на эту тему.

К счастью на сайте http://www.xiper.net/ я нашел материал, который и помог мне преодолеть эту проблему.
Статья называлась "Оформление контента" http://www.xiper.net/collect/services/oformlenie-kontenta.html.
Автор предлагает для кроссбраузерного отображения контента использовать сброс стилей вначале CSS файла.

Этот материал оказался для меня весьма полезным, потому, что я использовал именно предложенные
автором стили для оформления контента страниц моего сайта. Но, поскольку мой сайт сделан на Джумла,
то я счел разумным не вставлять сброс стилей в начало CSS файла. Это могло повлиять на общий вид
сайта и кроме того утяжеляет сайт и замедляет его работу. Да и в этом нет ни какой необходимости.

Весь контент страниц заключил в контейнер <div class="content">,
а в заголовок каждой html-страницы поместил Линк на мой css-файл:
<link rel="stylesheet" href="user_maps/css_sheets/sh_01/style.css" type="text/css" />

После этого проверка дала ответ - "Правильный CSS!"
И так было у подавляющего большинства страниц, но не у главной страницы.
Главная страница не проходила валидацию CSS. В чем дело? А дело в том, что и на главной
странице должна была быть ссылка на мой файл стилей style.css. Но как это сделать?

Оказалось просто. В индексном файле нашего шаблона index.php, который находится
templates/rhuk_milkyway/index.php добавить одну строку. Опять же это ссылка на нашу
таблицу стилей для контента. Выделена цветом:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('backgroundVariation'); ?>_bg.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/user_maps/css_sheets/sh_01/style.css" type="text/css" />


Порядок! Теперь проверку на CSS успешно проходят все страницы нашего сайта.
Нажимаем на ссылку "Проверить CSS" в правом нижнем углу окна сайта.
Результат - "Правильный CSS!"

Содержание файла style.css для основного контента:

/* content -----------------------*/
.content {
font-size: 110%;
padding: 10px;
}
.content h1 {
font-size: 150%;
margin-bottom: 20px;
}
.content h2 {
font-size: 140%;
margin-bottom: 15px;
}
.content h3 {
font-size: 130%;
margin-bottom: 12px;
}
.content h4 {
font-size: 120%;
margin-bottom: 10px;
}
.content h5 {
font-size: 110%;
margin-bottom: 10px;
}
.content h6 {
font-size: 100%;
margin-bottom: 10px;
}
.content p {
margin-bottom: 15px;
}
.content ul {
list-style: disc;
margin: 0 15px 10px 15px;
}
.content ul ul {
margin: 10px 0 10px 25px;
}
.content ol {
list-style: decimal;
margin: 0 15px 10px 20px;
}
.content ol ol {
margin: 10px 0 10px 25px;
}
.content li {
margin-bottom: 5px;
}
.content table {
margin-bottom: 15px;
font-size: 100%;
width: auto;
border: 1px solid #000;
}
.content th,
.content td {
border: 1px solid #000;
padding: 4px;
text-align: left;
}
.content th {
font-weight: bold;
text-align: center;
}
.content a,
.content a font {
color: #0000ff;
text-decoration: underline;
}
.content a:visited,
.content a:visited font {
color: #0000aa;
}
.content a:hover,
.content a:hover font {
color: #0000ff;
text-decoration: none;
}
.content a:active,
.content a:active font {
color: #ff0000;
}
.content img[align=left] {
margin: 0 10px 10px 0;
float: left;
}
.content img[align=right] {
margin: 0 0 10px 10px;
float: right;
}
.content dl {
margin: 0 0 15px 0;
}
.content dt {
font-weight: bold;
margin-bottom: 2px;
}
.content dd {
margin-bottom: 5px;
}
.content hr {
height: 1px;
border: none;
color: #aaa;
background: #aaa;
margin: 10px 0;
clear: both;
}

/* Это для кода -----------------------*/
.content div#block2 {

font-size: 110%;
margin:0 auto;
color:#800000;
background-color:#dddddd;
font-style:italic
}

/* Отступы для текста -----------------------*/
.content .block_2 {margin-left: 20px}

/* Подсветка для текста -----------------------*/
.content .gloss { background-color: #00FFFF}
.content .gloss1 { background-color: #FFFF00}
.content .gloss2 { background-color: #DCDCDC}
.content .gloss3 { background-color: #FFE4E1}
.content .gloss9 { background-color: #D3F6FE}



Обновлено 09.05.2011 14:35