Создание безразмерных блоков по ширине разных местах сайта

#1 15 апреля 2009 в 15:59

Вот уже четвёртый день стараюсь сделать блоки, в состав которых входят картинки.
Пример блока для левой и правой стороны сайта:
Иллюстрация

Изначально данный блок состоит из 3-х картинок:
Шапки:
Иллюстрация

Середины:

Низ:

Проблем для вывода блока с заданной шириной — НЕТ, а вот как быть, если ширена блока — РАЗЛИЧНАЯ, к примеру, для центра страницы или в зависимости от диагонали монитора? Вот тут и встал вопрос:

КАК ВЫВЕСТИ БЛОК РАЗЛИЧНОЙ ШИРЕНЫ ДЛЯ СТРАНИЦЫ?

===========================================================
— Делала разбивку:
разбивала каждую картинку на 3 части (верх_левая, верх_середина, верх_правая)
но какой правильный код должен получиться никак не пойму.......
= В файл модуля modules\module.tpl вставляла такой код:

<!-- модуль блока -->
<table width="100%" class="{$mod.css_prefix}module" border="0" cellspacing="0" cellpadding="0">
          {if $mod.showtitle neq 0}<tr>
            <td width="70" height="53"><img src="/templates/Hmelex/images/sapka_bloka_goriz1.gif" width="70" height="53" /></td>
            <td height="53" background="/templates/Hmelex/images/sapka_bloka_goriz2.gif"><img src="/templates/Hmelex/images/sapka_bloka_goriz2.gif" width="2" height="53" /></td>
            <td width="98" height="53"><img src="/templates/Hmelex/images/sapka_bloka_goriz3.gif" width="98" height="53" /></td>
          </tr>
          <tr>
            <td width="70" background="/templates/Hmelex/images/seredina_goriz_lev.gif"> </td>
            <td style="BACKGROUND: #FFFFFF;" class="{$mod.css_prefix}moduletitle">{$mod.title}{if $cfglink}<span class="fast_cfg_link"><a href="{$cfglink}" target="_blank" title="Настроить модуль"><img src="/images/icons/configure.gif"/></a></span>{/if}</td>
            <td width="98" background="/templates/Hmelex/images/seredina_goriz_prav.gif"> </td>
          </tr>
          <tr>
            <td width="70" background="/templates/Hmelex/images/seredina_goriz_lev.gif"> </td>
            <td class="{$mod.css_prefix}modulebody" align="left" style="BACKGROUND: #FFFFFF;">{$mod.body}</td>
            <td width="98" background="/templates/Hmelex/images/seredina_goriz_prav.gif"> </td>
          </tr>
          <tr>
            <td width="70" height="24"><img src="/templates/Hmelex/images/niz1.gif" width="70" height="24" /></td>
            <td height="24" background="/templates/Hmelex/images/niz2.gif"><img src="/templates/Hmelex/images/niz2.gif" width="2" height="24" /></td>
            <td width="98" height="24"><img src="/templates/Hmelex/images/niz3.gif" width="98" height="24" /></td>
          </tr>{/if}
        </table>
 
<!-- </ Конец модуля блока> -->

Да но с таким кодом вот что выходит:

Стрелочками показано: Каким образом подвинуть всё содержание блока до определенного уровня?????
Может, КТО подскажет, какой правильный код для вывода блока такого типа.???????

#2 15 апреля 2009 в 16:05

интересно, куда делся мой комментарий к этому сообщению в блоге?

#3 15 апреля 2009 в 16:09

блин, стока букафф накидал в камент laugh

придется повторить %-(
нижнюю строку нужно сделать так:
-левый столбец — остается как был
-второй и третий объединить и сделать фоном картинку. Перечислю справа-налево: уголок, карандаш, длиная-предлиная линия, чтоб наверняка перекрыла любую возможную ширину столбца. Картинку равняем по правому краю.
Кстати, верхнюю строку нужно буде делать с точностью до наоборот.
Мысль понятна?

Сегодня в 10:00

#4 15 апреля 2009 в 16:19

Ухты, блин я и не заметила — Вот про уголок потом карандаш, спасибо,
а у меня сделано всё вместе.

Буду пробовать сначала с низом разбираться. А Вот про фон… не уверенна всёли правильно выйдет.....

Но хоть за это спасибо. +1

#5 15 апреля 2009 в 16:47

да нет, ты не поняла.
внизу нужно переделать так, чтобы и карандаш и уголок и линия слева от карандаша были одной картинкой. Все это должно быть одной картинкой.
Вот видишь, нижняя строка объединяешь второй и третий столбцы.
Первая же строка наоборот, объединяешь первый и второй.

#6 15 апреля 2009 в 17:59

Приветствую!
Отвечаю — сразу на первый пост!
Три картинки — позволяет тебе вставить css — внутри себя...
Пример — левые блоки:
1. Среднюю картинку вставляешь в — #left .module — и множишь по y;
2. Верхнюю (с цветочком)- #left .moduletitle — привязываешь к верху и не множишь;
3. Нижнюю (с карандашом) — #left .modulebody — привязываешь к низу и не множишь.
Лично сам проделывал — точно срабатывает…

Зарабатываю здесь - Хостинг здесь - Жить в обществе и быть свободным от общества нельзя!...

#7 6 апреля 2014 в 01:59

Можно привести пример правильного кода

#8 6 апреля 2014 в 14:48

Skype: pasha--g

#9 6 апреля 2014 в 14:57

Pasha, в ие7 по-моему обрежет выступающую часть верхнего блока. Могу ошибаться)

Разработка виджетов, полей и компонентов для instantcms 2, сайты под ключ. site: www.zau4man.ru telegram: @zau4man

#10 6 апреля 2014 в 15:41

Фиг знает, может и обрежет, но радиус точно не нарисует… Я этого ветерана давно уже не учитываю и как он себя вел в подобных ситуациях не помню.

Skype: pasha--g

Создание разных блоков для раз

Как вставить в модуль флеш/js

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Создание безразмерных блоков по ширине разных местах сайта

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Выравнивание блоков новостей.

Обновил сайт до последней версии, но его вид и расположение блоков другое чем у темы модерн по умолчанию

Ширина в мобильных устройствах и фото

[ЕСТЬ РЕШЕНИЕ] Увеличить ширину ряда в шаблоне Modern

[ЕСТЬ РЕШЕНИЕ] Ширина колонок на разных страницах

Два разных шаблона для записи типа контента

InstantCMS Team

О проекте

Поддержка

Дополнения