Функция вывода картинок

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем killstels, 18.10.2007.

  1. Offline

    killstels Недавно здесь

    Регистрация:
    13.10.2007
    Сообщения:
    64
    Симпатии:
    1
    Привет.
    Значит так, каждый шаблон выводит картинки по разному, где то текст от них отступает немного, а где то он вплотную к картинкам, и если не сделать к картинке подпись - смотрится жутко. Но подпись всё время же не делать, правильно? Какая функция отвечает за этот самый отступ около картинок и куда рыть?
     
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Функция вывода картинок

    в css img{}
     
  4. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Функция вывода картинок

    Скорее, не функция, а селектор. Ройте в направлении:
    Код (CODE):
    1. .mosimage {}
    2. .mosimage img {}
    3. .mosimage_caption {}

    Вообще, бывает полезно периодически заглядывать в исходный код готовых шаблонов, в частности, стилевого файла 'template_css.css'. Таким образом, Вы можете сделать из неподходящего по каким-то параметрам шаблона самое то. :X
     
  5. Offline

    killstels Недавно здесь

    Регистрация:
    13.10.2007
    Сообщения:
    64
    Симпатии:
    1
    Ответ: Функция вывода картинок

    А у меня в шаблончике этой функции в css коде вобще нету, как и впрочем в стандартном шаблоне madeyourweb, однако в последнем есть отступы рядом с изображениями, а в моём нет :[ И какие параметры надо задать?
     
  6. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Функция вывода картинок

    killstels, все зависит от конечных целей, который Вы перед собой ставите и от того, что уже имеется в коде шаблона сайта (имею в виду 'index.php' и 'template_css.css'). Прохождение краткого курса основ CSS Вам в помощь! Опыт и практика подсказывают - в первую очередь обратите внимание на такие атрибуты как "margin" (внешние отступы) и "padding" (внутренние отступы).
     
  7. Offline

    killstels Недавно здесь

    Регистрация:
    13.10.2007
    Сообщения:
    64
    Симпатии:
    1
    Ответ: Функция вывода картинок

    AmmiAk, спасибо за отклик, но это просто ужасно :( Уже скопировал значения из шаблона, где ест ьотступ в шаблон, где нету отступа, но всё впустую...
     
  8. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Функция вывода картинок

    Выкладывайте ссылку на страницу сайта с примером такой картинки, не поленитесь сделать в любом имеющемся у Вас графическом редакторе картинку до (что желательно, но необязательно) и после (без этого уж никак). Будем пробовать. ?:\
     
  9. Offline

    killstels Недавно здесь

    Регистрация:
    13.10.2007
    Сообщения:
    64
    Симпатии:
    1
    Ответ: Функция вывода картинок

    К сожалению ссылку на сам сайт с шаблоном не могу дать, т.к. сайт сделан не вчера и выкладывать недоделаный шаблон на всеобщее обозрение не могу, тем более я ещё не сделал к нему шапку. Но скриншот сделал (он в аттаче). НО что самое интересное, только сегодня заметил: в IE6 отображается нормально! Т.е. с отступами! А лиса не реагирует на них, и отображает без отступов. Игрался со следущими параметрами:
    Код (PHP):
    1. .mosimage {
    2.     padding: 0;
    3.     margin: 8px 15px 0 0!important;
    4.     margin: 8px 5px 0 0;
    5. }
    6.  
    7. .mosimage img {
    8.     padding: 0;
    9.     margin: 0!important;
    10. }
    11.  
    12. .mosimage_caption {
    13.     margin-top: 5px;
    14.     padding: 1px 2px;
    15.     color: #999999;
    16. }

    Больше .mosimage в шаблоне не встречается...
     

    Вложения:

    • test.jpg
      test.jpg
      Размер файла:
      45.3 КБ
      Просмотров:
      14
  10. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Функция вывода картинок

    По-моему, с описанием вышеуказанных стилей, Вы сильно перемудрили, я говорю конкретно о двух !important. Достаточно будет и одних внутренних отступов сверху, справа, снизу и слева, коим соответствует конструкция:
    Код (CODE):
    1. padding: 12px 8px 10px 0;

    В этом примере к настраиваемому объекту соответствующим образом применяются отступы в 12 пикселей сверху, 8 пикселей справа и 10 пикселей снизу. Отступу слева задано нулевое значение (он будет отсутстовать). Попробуйте задать соответствующие отступы своему изображению и подписи в соответствии с приведенным ниже кодом, оптимизируя его под свои нужды.
    Код (CODE):
    1. .mosimage {
    2.    margin: 0;
    3.    padding: 0;
    4. }
    5.  
    6. .mosimage img {
    7.    margin: 0;
    8.    padding: 8px 15px 0 0;
    9. }
    10.  
    11. .mosimage_caption {
    12.    font-size: 10px;
    13.    text-align: center;
    14.    color: #999;
    15.    margin: 0;
    16.    padding: 4px 15px 8px 0;
    17. }
     
  11. Offline

    killstels Недавно здесь

    Регистрация:
    13.10.2007
    Сообщения:
    64
    Симпатии:
    1
    Ответ: Функция вывода картинок

    AmmiAk,
    Эт не я, так было заложено авторами ;)
    Но подставив Ваш код, при этом изменив значения - шаблон меня проигнорировал... В лисе отступы не появились. Посмотрите скриншот: в ослике всё отлично, хотя он тоже не реагирует на изменение параметров.
     

    Вложения:

    • test2.jpg
      test2.jpg
      Размер файла:
      52.5 КБ
      Просмотров:
      8
  12. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Функция вывода картинок

    Работать дистанционно очень сложно, поэтому напишите адрес сайта в ЛС или свяжитесь со мной по ICQ - нужно убедиться во всем лично и в режиме реального времени внести все необходимые изменения.
     

Поделиться этой страницей

Загрузка...