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

 
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 439
Вот уже четвёртый день стараюсь сделать блоки, в состав которых входят картинки.
Пример блока для левой и правой стороны сайта:
Создание безразмерных блоков по ширине разных местах сайта


Изначально данный блок состоит из 3-х картинок:
Шапки:
Создание безразмерных блоков по ширине разных местах сайта

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

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


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

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

===========================================================
- Делала разбивку:
разбивала каждую картинку на 3 части (верх_левая, верх_середина, верх_правая)
но какой правильный код должен получиться никак не пойму.......
= В файл модуля modules\module.tpl вставляла такой код:
Код PHP:
  1. <!-- модуль блока -->
  2. <table width="100%" class="{$mod.css_prefix}module" border="0" cellspacing="0" cellpadding="0">
  3. {if $mod.showtitle neq 0}<tr>
  4. <td width="70" height="53"><img src="/templates/Hmelex/images/sapka_bloka_goriz1.gif" width="70" height="53" /></td>
  5. <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>
  6. <td width="98" height="53"><img src="/templates/Hmelex/images/sapka_bloka_goriz3.gif" width="98" height="53" /></td>
  7. </tr>
  8. <tr>
  9. <td width="70" background="/templates/Hmelex/images/seredina_goriz_lev.gif"> </td>
  10. <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>
  11. <td width="98" background="/templates/Hmelex/images/seredina_goriz_prav.gif"> </td>
  12. </tr>
  13. <tr>
  14. <td width="70" background="/templates/Hmelex/images/seredina_goriz_lev.gif"> </td>
  15. <td class="{$mod.css_prefix}modulebody" align="left" style="BACKGROUND: #FFFFFF;">{$mod.body}</td>
  16. <td width="98" background="/templates/Hmelex/images/seredina_goriz_prav.gif"> </td>
  17. </tr>
  18. <tr>
  19. <td width="70" height="24"><img src="/templates/Hmelex/images/niz1.gif" width="70" height="24" /></td>
  20. <td height="24" background="/templates/Hmelex/images/niz2.gif"><img src="/templates/Hmelex/images/niz2.gif" width="2" height="24" /></td>
  21. <td width="98" height="24"><img src="/templates/Hmelex/images/niz3.gif" width="98" height="24" /></td>
  22. </tr>{/if}
  23. </table>
  24.  
  25. <!-- </ Конец модуля блока> -->
Да но с таким кодом вот что выходит:
Создание безразмерных блоков по ширине разных местах сайта

Стрелочками показано: Каким образом подвинуть всё содержание блока до определенного уровня?????
Может, КТО подскажет, какой правильный код для вывода блока такого типа.???????
Посетитель
small user social cms
Медаль
Сообщений: 763
интересно, куда делся мой комментарий к этому сообщению в блоге?
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 763
блин, стока букафф накидал в камент laugh
придется повторить %-(
нижнюю строку нужно сделать так:
-левый столбец - остается как был
-второй и третий объединить и сделать фоном картинку. Перечислю справа-налево: уголок, карандаш, длиная-предлиная линия, чтоб наверняка перекрыла любую возможную ширину столбца. Картинку равняем по правому краю.
Кстати, верхнюю строку нужно буде делать с точностью до наоборот.
Мысль понятна?
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 439
Ухты, блин я и не заметила - Вот про уголок потом карандаш, спасибо,
а у меня сделано всё вместе.

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

Но хоть за это спасибо. +1
Редактировалось: 1 раз (Последний: 15 апреля 2009 в 16:22)
Посетитель
small user social cms
Медаль
Сообщений: 763
да нет, ты не поняла.
внизу нужно переделать так, чтобы и карандаш и уголок и линия слева от карандаша были одной картинкой. Все это должно быть одной картинкой.Создание безразмерных блоков по ширине разных местах сайта
Вот видишь, нижняя строка объединяешь второй и третий столбцы.
Первая же строка наоборот, объединяешь первый и второй.
Редактировалось: 2 раз (Последний: 15 апреля 2009 в 16:55)
InstantCMS Team
small user social cms
МедальКубок зрительских симпатийАвторитет форумаПатриот InstantCMS ;-)
Сообщений: 3129
Приветствую!
Отвечаю - сразу на первый пост!
Три картинки - позволяет тебе вставить css - внутри себя...
Пример - левые блоки:
1. Среднюю картинку вставляешь в - #left .module - и множишь по y;
2. Верхнюю (с цветочком)- #left .moduletitle - привязываешь к верху и не множишь;
3. Нижнюю (с карандашом) - #left .modulebody - привязываешь к низу и не множишь.
Лично сам проделывал - точно срабатывает...
Зарабатываю здесь - Хостинг здесь - Жить в обществе и быть свободным от общества нельзя!...
Посетитель
small user social cms
Сообщений: 5
Можно привести пример правильного кода
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Создание безразмерных блоков по ширине разных местах сайта
Skype: pasha--g
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2551
Pasha, в ие7 по-моему обрежет выступающую часть верхнего блока. Могу ошибаться)
Виджеты, поля и компоненты для instantcms 2 http://www.zau4man.ru/
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Фиг знает, может и обрежет, но радиус точно не нарисует... Я этого ветерана давно уже не учитываю и как он себя вел в подобных ситуациях не помню.
Skype: pasha--g
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.