Дневник Оптимиста

Интересный блог без рекламы

Янв
26

Маленькая победа :)

Автор: Ptah

Как, наверное, уже заметили многие из моих читателей (особенно те, у кого маленький монитор или ноутбук с небольшой диагональю экрана) в теме моего блога есть небольшой косяк.
Выражается он в том, что когда я использую в постах большие изображения (более 700 пикселей в ширину) то они “заползают” на правую панель.

Я сломал себе весь мозг (и еще нескольким друзьям) пытаясь решить эту проблему.

То, что дело было в файле style.css (таблица стилей темы блога) - это было понятно. Не совсем понятно, что в нем надо было написать.

В конце концов, я взял одну из тем, в которой у меня такой проблемы не было (изображение автоматически подстраивалось под ширину ленты) и сравнил.

И нашел важный параметр max-width: 100%; который надо было вставить в строку:

img {
border:0;
}

Строка эта, как нетрудно догадаться, задает параметры для всех изображений на сайте. Если задать, например, ширину (width) явно, то все фотографии будут одной ширины.

Если же задать 100%, то все изображения будут равны (или меньше, если сам файл меньше) ширине основной ленты.

Как видите, делаю все для вашего удобства :)

P.S. Кстати, если кто не заметил, теперь имена комментаторов являются ссылками на их сайты :)

Спасибо за подсказки Osminog, Zeleboba и моей сестре Courgette.

  • No Related Post
Буду вам очень признателен, если поделитесь ссылкой на статью в социальных сетях:

Эта запись опубликована Вторник, Январь 26th, 2010 at 17:26 в категориях wordpress. Вы можете следить за комментариями через RSS 2.0 feed.

Если Вам понравилась статья, то Вы можете получать новые материалы ptah-blog.com по RSS, присоединиться ко мне на твиттере или просто получать обновления блога на e-mail.

  1. Bagdad сказал(а),

    Можно было у свойства content добавить параметр overfow: hidden; Тогда все что не влезает по горизонтали в пост будет просто обрезаться.
    Параметр width у изображений может иметь побочный эффект в некоторых браузерах.

  2. Ptah сказал(а),

    @ Bagdad:
    нет, обрезка мне не подходит, так как я хочу показывать большие фото для тех, у кого большой монитор. А что за побочные эффекты?

  3. Bagdad сказал(а),

    @ Ptah:
    Некоторые браузеры могут понять тебя слишком буквально и растянуть картинку действительно на 100% ширины :-)

  4. Ptah сказал(а),

    @ Bagdad:
    не уверен, ширина поля - это ширина основной ленты, вряд ли будет растягиваться.
    А что за браузеры скажи, я проверю?

  5. Bagdad сказал(а),

    Примерно так будет выглядеть твой сайт, есть img задать width: 100%
    width: 100%;
    http://lh6.ggpht.com/_6TlWMPbNnVo/S18egms8YKI/AAAAAAAAIV4/R-QSNL1XYLk/s800/%D0%94%D0%BD%D0%B5%D0%B2%D0%BD%D0%B8%D0%BA%20%D0%9E%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D1%81%D1%82%D0%B0_1264524894506.png
    Размазня в верхней части это смайлик ” :-);-)
    Валидатор CSS ругнулся на параметр max-width, дескать он не поддерживается в IE4 ^_^

  6. Ptah сказал(а),

    @ Bagdad:
    эмм… Я думаю, людей, которые пользуются IE4 на всей Земле можно пересчитать по пальцам. И они явно не относятся к моей аудитории :)

  7. Bagdad сказал(а),

    С другой стороны, ничто не мешает попробовать. отменить то всегда можно ;-)

  8. Bagdad сказал(а),

    Кстати, что за аддон рисует у тебя флешовое облако?

  9. Ptah сказал(а),

    @ Bagdad:
    WP-Cumulus

  10. NomadUA сказал(а),

    Вот головная боль :) Нормальный плагин на нормальном движке - и картинки раскрываются- на весь экран в полный размер - не закрывая пост :)
    Но все равно поздравляю :)

  11. Ptah сказал(а),

    @ NomadUA:
    ты о каком плагине? не понял.

  12. NomadUA сказал(а),

    @ Ptah:
    Это я туплю к вечеру :) почему-то решил, что это косяк не с темой а с картинками у тебя снова вылез :D Сорь :)

  13. Ptah сказал(а),

    @ NomadUA:
    да все ок :)

  14. Courgette сказал(а),

    сестренке!:)
    PS кстати, тебе снова пришло письмо на Солобоких :)
    они с сожалением обнаружили, что он :) не оплатил долг и делают последнее китайское предупреждение :)

  15. osminog сказал(а),

    @ Ptah:
    Всегда пожалуйста! А по поводу IE - на днях видел пост об использовании “страницы-заглушки” где написано, что нужно сайт просматривать другими браузерами или обновить IE. Очень хорошее решение и оформлено красиво. Если найду, то дам ссылку.

  16. Ptah сказал(а),

    @ osminog:
    а зачем? Если человек - идиот, заглушка ему не поможет :)
    @ Courgette:
    ну пусть попробуют его наказать. Не могу же я долг платить за незнакомого мне человека… :)

  17. osminog сказал(а),

    @ Ptah:
    Многие действительно не знают о других браузерах, но они же не только “идиоты” :)

  18. Ptah сказал(а),

    @ osminog:
    нет, я не про IE в целом, а про IE 4. В версии выше никаких проблем с сайтом нету.

  19. osminog сказал(а),

    @ Ptah:
    Понятно, просто многие делают сайты не для IE вообще.
    Посмотри мой блог в IE и увидишь, что криво отображается подписка на RSS Email и Твиттер

  20. Ptah сказал(а),

    @ osminog:
    ну вот это как раз не очень хорошо. У большинства на работе стоит IE, можешь потерять потенциальных посетителей.

  21. osminog сказал(а),

    @ Ptah:
    Я пока не смог еще с этим глюком разобраться…

  22. Courgette сказал(а),

    Ptah написал(а):

    @ Courgette:
    ну пусть попробуют его наказать. Не могу же я долг платить за незнакомого мне человека… :)

    точно :))

  23. Накукрыскин сказал(а),

    O_o Это вообще один из главных параметров, если хочешь юзать нормально css. Ещё есть min-width, который не позволяет, например, диву уменьшится на столько, что все будет сжиматься до того, что вообще ничего не понятно будет. Очень полезный параметр при дивной верстке и плюс ко всему при динамической верстке, а не статической.

  24. Накукрыскин сказал(а),

    Попробуй у себя для wrapper поставить min-width:800px; и уменьшить размер окна браузера до минимума. Лучше заставить прокрутить, чем то, что у тебя сайдбар будет наезжать на основной текст. Будет хоть какая то фиксированность.

  25. Ptah сказал(а),

    @ Накукрыскин:
    я выставил, но не очень понял для чего? Объясни подробнее?

  26. Накукрыскин сказал(а),

    @ Ptah:
    Подробнее тут

  27. Ptah сказал(а),

    @ Накукрыскин:
    а, понял, спасибо большое. :)

  28. Bagdad сказал(а),

    Вы что творите то?
    http://file.qip.ru/file/117771765/c473579a/ptah.html
    Может не стоит играться с размерами? )))

  29. Ptah сказал(а),

    @ Накукрыскин:
    вот разведка сообщает, что после внесения этого параметра все смайлики стали размера 800 px :)
    Так что не все йогурты одинаково полезны :)

  30. Накукрыскин сказал(а),

    @ Ptah:
    Смотря какой ложкой их есть :D Я тебе сказал пример. Я же не знаю где у тебя ещё используется класс wrapper. Он обычно вообще то используется как контейнер для всего остального :D Кстати, вчера был тот же бред со смайлами, которые растягивались на весь экран :D min-width, если его правильно применить, к смайлам вообще не будет касаться :) у меня в блоге как раз так. На одном проекте, в котором blueprint юзаю - тоже все отлично :)

  31. Ptah сказал(а),

    @ Накукрыскин:
    ну вот не знаю, на моем файерфоксе 3.5.3. проблем не было, а на файерфоксе 3.5.7, говорят, были.

  32. Накукрыскин сказал(а),

    Ptah написал(а):

    @ Накукрыскин:
    ну вот не знаю, на моем файерфоксе 3.5.3. проблем не было, а на файерфоксе 3.5.7, говорят, были.

    3.6 FF. Проблем не наблюдаю сейчас.

  33. Guard сказал(а),

    Быть блоггером - это не только писать интересно. Но и еще просто кучу разного нужно знать. Одни только оптимизации чего стоят… :)
    Победы - это хорошо! Желаю по больше побед!

  34. Ptah сказал(а),

    @ Guard:
    что верно, то верно. За все время ведения блога столько узнал интересного, что голова пухнет :)
    Спасибо за добрые пожелания! :)

  35. Ольга М. сказал(а),

    Поздравляю! так классно, когда происходят изменения к лучшему! :)

  36. Ptah сказал(а),

    @ Ольга М.:
    это точно, особенно когда над проблемой бьешься уже очень долго :)

Добавить комментарий