Как сделать рамки в таблице joomla
Обновлено: 02.07.2024
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Очень часто, просмотрев огромное количество шаблонов на демо-сайтах производителей шаблонов, возникает желание сделать на своем сайте что-нибудь похожее из увиденного. Самый распространенный вопрос - как сделать такую же рамку css для модуля? И желательно без использования картинок? Предлагаю вам прочитать полезный совет верстальщику и попробовать его в своем шаблоне. Это займет не более 10 минут!
Нет ничего проще! Само сложное - найти класс стиля, который назначен на нужный вам модуль, это зависит от применяемого шаблона. Поэтому будем отталкиваться от наиболее часто применяемого класса для модуля - .module или как вариант .module-inner , иногда в шаблоне применяются оба класса, тогда используем .module . Открываем папку шаблона и находим файл стилей template.css.
Как вы помните, чуть выше я написал, что это самый сложный этап в рисовании рамки для модуля. Почему? Потому что дальнейшие действия - это вставка подготовленного кода в ваш файл стилей, чаще всего это файл template.css и он находится в папке css шаблона джумла.
А вот и сам код))):
Что делать с этим кодом? Находим в файле template.css нужный нам класс .module и добавляем вышеприведенный код к тем стилям, которые уже присутствуют, стили заключаются в такие кавычки
Т.е. если первоначально было так (код приведен примерный, у вас может быть и другой):
то теперь должно получиться так:
Сохраняем файл и закачиваем его в папку своего шаблона! Не забудьте, что редактировать файлы шаблона лучше всего такой программой, как Notepad++. Ни в коем случае не пользуйтесь обычным встроенным блокнотом!
2. Выбираем "Создать материал" или открываем уже имеющийся материал для редактирования.
3. В редакторе нажимаем кнопку таблицы (изображение таблички с карандашиком).
4. Появится новое окно, в котором нужно задать параметры таблицы.
Столбцы отвечают за кол-во ячеек по горизонтали.
Строки - за кол-во ячеек по вертикали.
Отступы и расстояние между ячейками нужны для визуального отделения одной ячейки от другой.
Граница. Если вы поставите значение "0", то таблица на сайте будет невидимой. Чем больше значение, тем жирнее будут линии таблицы.
5. Затем жмем "Вставить". Ниже показана таблица с учетом настроек на картинке п.4
| 111 | 222 | 333 |
| 444 | 555 | 666 |
| 777 | 888 | 999 |
| ааа | ббб | ввв |
| ггг | ддд | еее |
P.S. если вы хотите, чтобы таблица у вас была ровной и красивой, то:
1) в каждую ячейку вписывайте одинаковое кол-во текста (или хотя бы старайтесь делать так);
2) загружайте фотографии одинаковые по размеру (в идеале) или хотя бы только одинаковые по высоте.
Ускорение процессов строительства обязано своим развитием новым материалам и машинам. Так почему бы не ускорить механизмы создания онлайн площадей? Давайте попробуем придумать сходу способы ускорения сайтостроения.
Шаблоны Joomla. Часть 5.
(Модули - СТИЛЬНЫЙ дизайн НА таблицах)
Уровень: Пользователь - Веб-мастер
У нас есть учебный шаблон, который мы будем дорабатывать. А конкретно сформируем css-стили для дизайна внешнего вида модулей, выводимых в шаблоне. Сss-стили будем задавать для классов и id, которые задает сама Джумла. Напоминаем, что сейчас речь пойдет о табличном дизайне. Чтобы Джумла выдала нам НУЖНУЮ разметку модулей, в шаблоне должен быть вызов функции загрузки модулей без второго параметра, например, для позиции left: mosLoadModules('left'); Так задано в учебном шаблоне (из выпуска №23).
Что оформлять стилями?!
Покажем оформление следующих элементов дизайна:
- обрамление модулей и установка шрифтов;
- формирование дизайна заголовков модулей;
- установка ширины модулей;
- и т.д.
Как дорабатываем шаблон
То что было в рабочем шаблоне, не трогаем, если это нам мешать НЕ будет (шапка, например). Еще обратим внимание на пару моментов.
Еще момент, сейчас в шаблоне содержимое страницы отступает на какое-то расстояние от границ браузера. Почему? Такие настройки браузера по-умолчанию. По настоящему хреново от подобных настроек бывает, если они в разных браузерах разные. Хотя, к отступам от края это не относится, по крайней мере для Мозиллы и ИЕ. А чтобы не тестить это во всех браузерах, лучше устанавливать подобные настройки ЯВНО!
Задаем основные стили по теме :)
Стиль для таблицы, которую создает Джумла для модуей:
- с первыми двумя стилями предельно ясно :)
- символ 'х' перед стилем padding-left: 10px; означает, что он закомментирован. Зачем он приводится, расскажем ниже
- width:100%; Это установит МАКСИМАЛЬНО возможную ширину таблицы относительно контейнера, которым являются ячейки таблицы, определенной в шаблоне, где вызываются функции загрузки модулей и контента. У них пропорции 15%-70%-15% и ширина этих контейнеров остается постоянной. Она может сломаться ТОЛЬКО, если в модуле, будет что-то, не помещающееся в эти пропорции: (а) изображение большой ширины, (б) форма какая-то, например "Выбор шаблона" или неразрываемый текст. Закомментируйте этот стиль -> рамкивсех модулей станут своей ширины :)
Стиль для заголовков модулей (подражаем Maillist):
- Установка высоты заголовка - нудное дело, если НЕ знать некоторых тонкостей. Если не устанавливать ни padding ни height ни line-height, то высота заголовков (судим по фону заголовка) в ИЕ и Мозилле будет разная. Утрясается это стилем padding:0; При наших настройках высота как в Maillist, если хотите высоту больше, задайте стиль line-height :)
- white-space: nowrap; Таким стилем устанавливается неразрываемый текст (будет в одну строку, и если длинный, будет ломать верстку :)
Стиль для ячеек таблицы с содержимым модулей:
Дополнительные комментарии излишни.
Шаблон в работе и его дистрибутив
Посмотреть шаблон на демо-сайте (имя шаблона efft_table_karkas).
Подобные методы мы использовали для дизайна сайта Каталог недвижимости Тверской области. На этом сайте есть еще интересная реализация обрамления модулей рамками с закругленными краями, о чем мы обязательно расскажем в будущем.
Резюме
А сегодня, в некотором смысле, юбилейный выпуск: №25. В нем мы не говорили ни о чем особенном, а в следующем выпуске подготовим краткий обзор, что в настоящее время происходит на рынке ЦМС.
Автор данной статьи: Леонид Мальков
Здравствуйте!
Подскажите пожалуйста, проблема следующая.
Нижняя часть сайта(шаблона) "слетает" вниз. При просмотре через ?tp=1 блоки следующие:
bottom[none outline]
bottomblock[none outline]
bottomblock
footer[none outline]
footer
debug[none outline]
debug
Если в разрабатываемом расширении для joomla вам требуется доступ к таблицам в одной базе данных, созданной при инсталляции joomla, то вы можете просто использовать JFactory->getDBO метод. При этом используя уже установленное соединение с базой данных Joomla, которое используется для подключения. Например вот так:
После этого $db будет содержать объект типа JDatabase, и вы можете выполнять операции с базой данных используя стандартные методы joomla для работы с базой данных.
Но что если вы хотите подключиться к внешней базе данных в joomla?. Это может быть другая база данных на том же сервере, что и ваша база данных установки Joomla! Или это может быть база данных абсолютно на другом удаленном хосте, и для соединения с ней возможно даже потребуется другой драйвер базы данных. Реализовать такое соединение к удаленной базе данных в joomla, возможно при использовании метода JDatabase->getInstance, как в примере ниже:
После этого $db как и в первом случае будет содержать объект типа JDatabase, и вы также можете выполнять операции с базой данных используя стандартные методы joomla для работы с базой данных.
Заметим, что если база данных использует нестандартный номер порта, то это может быть указано, добавив его в конце имени хоста. Например, ваша база данных MySQL использует порт 3307 (по умолчанию используется порт 3306), в этом случае имя хоста может быть "mysql.host.com: 3307".
Одной из особенностей использования JDatabase::getInstance является то, что если еще одно соединение сделано с теми же параметрами, он вернет ранее созданный объект, и не будет создавать новый.
Читайте также: