Search the Community

Доброго дня уважаемые коллеги. Помогите, пожалуйста, разобраться в таком вопросе: Если у нас есть img и в нем src к картинке. Браузер шлет запрос к картинке, а если у меня эта картинка выводится через background: url('/img.png') в стилях. Будет ли к ней также запрос или все откомпилится при единственном запросе браузера к стилям? Т.е. дает ли преимущество в запросах к серверу отображения картинок в стилях через фон, а не через img? Заранее спасибо.

Помогите пожалуйста понять что за пустое место HTML <div class="rightblock"> <div class="product"> <a href="#" class="cafe"><img src="userfiles/cofe.png" width="135" height="130" alt="cafe"/></a> <a href="#">кофе</a> </div> </div> CSS .rightblock{ width:690px; height:1039px; background:#ffffff; float:left; margin-left:20px; } .product{ width:135px; height:163px; background:#FFFFFF; border:solid 1px #cde151; display:block; } .product img{ max-width:135px; max-height:130px; } .product a{ color:#000000; font-size:14px; }

Понимаю, что вопрос поднимался уже 1000 раз, но все же интересно кто и как решает вопрос. Итак, имеем базу данных с двумя таблицами в первой храним тексты, во второй имена файлов изображений к ним. Как вывести определенный текст и одну картинку к нему просто и понятно, но как добавить несколько картинок, и кроме того, вставить их в нужные места текста при помощи PHP? Прописывать в тексте сразу <img src="images/image1.jpg"> - не принимается. Мне приходит на ум следующие - в тексте в нужных местах оставлять метки, потом их отыскивать и менять на тег с подстановкой соответствующего имени файла. Подскажите, пожалуйста кто как поступает?

Как сделать наложение backgroun поверх картинки? В последствии через javascript реализую его исчезновение. http://jsfiddle.net/32zrhdfe/

Добрый вечер форумчане. Столкнулся с такой проблемой. Никак не получается наложить полупрозрачный фон на изображение. Пример можно посмотреть здесь http://rezka.plasmainfo.ru. Заранее спасибо за ответы.

Всем привет! Подскажите, как можно сделать такой вот эффект: http://joxi.ru/n2YY0kKcwb5526- левая картинка без ховера, правая с ховером. Может, кто делал подобное, кажется, что не трудно, но нормальных идей нет=( Заранее, спасибо!

Добрый день! Уважаемые специалисты, помогите, пожалуйста, с масштабированием картинок, у меня никак не получается сделать ровно для всех браузеров. Имеется вордпресс, в теме есть галерея с горизонтальной "прокруткой". У меня было желание настроить галерею более грамотно и удобно. Изначально галерея предполагает загрузку картинок одной высоты, но мне это не подходит. У меня вертикальные и горизонтальные фотографии, и мне нужно, чтобы они были одной высоты в галерее, при этом, чтобы вертикальные масштабировались под высоту горизонтальных. В оригинале выглядит вот так: http://demo.megathe.me/heat/portfolio/people/ Код стиля: /* =iosSlider----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;}.iosSlider .slider .item img { width: 100%; height: auto; float: left;}На моём сайте вот так: http://www.radosvet.ru/portfolio/margarita-portret/ Код я немного изменил, добавив max-height: 600px: /* =iosSlider max-height: 600px;----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;}В итоге вроде получилось то что мне нужно, но проблема в том, что при уменьшении окна вертикльные кадры "обрезаются" снизу. Я ещё дописал, добавив min-height: 600px;: ----------------------------------------------- */.container { position: relative; width: 100%; height: auto; margin: 0 auto; overflow: visible; max-height: 600px; min-height: 600px;}.container .iosSliderContainer { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0 0 0 0; overflow: visible; max-height: 600px; min-height: 600px;}.iosSlider { position: relative; top: 0; left: 0; overflow: visible; width: 100%; height: auto; max-height: 600px; min-height: 600px;}.iosSlider .slider { width: 50000px; height: 100%;}.iosSlider .slider .item { float: left; width: auto;max-height: 600px;}.iosSlider .slider .item img { width: auto; height: auto; float: left; max-height: 600px; max-width: 100%;}Теперь почти всё так, как мне нравится. Но параметр максимальной высоты не позволяет адаптивному дизайну быть на 100% рабочим. Например, при сужении окна по высоте картинка на экран не помещается. А в мобильных браузерах вообще всё как-то странно смотрится В Firefox android при пролистывании далее картинки уменьшились, в Хроме просто лента из картинок вниз (хотя этотвариант меня устраивает). Я бы хотел, чтобы всё это было красиво на всех устройствах, но не знаю как настроить контейнер и картинки. Помогите, пожалуйста, что можно добавить или изменить?

Здравствуйте! Подскажите пожалуйса как сделать: Должно быть 3 блока, ширина 300px, а высота 100%. В них расположены ссылки, а в ссылках изображения разной высоты и ширины. <a>img...</a> Задача, нужно чтобы при наведении на изображения, появлялся заданый текст.

Приветствую. Не могу понять как расположить картинки на странице таким образом: По центру страницы, три в ряд сверху (340x264), две рядом ниже (510x357), чтобы они плотно прилегали друг к другу и были зафиксированы (не перемешивались, когда меняется размер экрана браузера).

Друзья, День Добрый! Прощу прощения, может быть за очередной стандартный вопрос, но я пока в тупике. Стоит локальный сервер XAMPP, есть папка mysite, в ней index.php и в той же директории папка с изображениями img/logo.png. При запуске в браузере не хочет отображать картинку.просто иконка изображения.я так понял косяк в адресе. Может я косякнул где-то.прошу по возможности помочь ) <body ><img src="img/logo.png"></body>

Доброго дня, коллеги. Довольно долго бьюсь над следующей проблемой. В письме необходимо разбить картинку на 4 ссылки (2х2). Таблица сделана, картинка порезана. Сначала возникали паразитные отступы между ячейками в разных почтовиках, которые были решены таким способом: <a href...><img src="..." style="display:block;"/></a> Помогло везде, кроме андроидовского gmail. Не могу избавиться от вертикального разрыва в 1px между столбцами. Это не рамка, изображение действительно сдвинуто.

Добрый день! Есть такая задачка, не могу отцентрировать по вертикали блок span. CSS .example2 { display:inline-block; position:relative; height:241px; } .example2 span { display:inline-block; position: absolute; top: 40%; left:0px; width:460px; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:20px; background-color:rgba(0,0,0,.4); padding:10px 30px; } HTML <div id="slider"> <ul> <li><div class="example2"><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /><span class="s1"><span>Статья1</span></span></a></div></li> <li><div class="example2"><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /><span class="s1">Статья2. Много текста. Много текста. Много текста. Много текста. Много текста. Много текста.</span></a></div></li></ul></div> Вот как выглядит сейчас это дело: Что меня не устраивает, текст начинается с центра а съезжает вниз. Хотелось бы чтобы он был отцентрирован по вертикали.

Вот у меня получается сверстать а нужно вот так Можно ли на задний план поставить те две ленточки??? (есть слои этих ленточек)???

Добрового времени суток. Подскажите, как для тэга img в CSS задать правило сохранения пропорций (аналогично как background-size: cover;). У меня вот следующая конструкция: .img-intro-left{ float: left; border: 3px solid #FCBF66; margin-right: 15px;}.img-intro-left img{ width: 150px; height: 150px;}Но при определенных размерах ширины и высоты изображения - оно естественно искажается. Возможно ли это реализовать на CSS? Заранее благодарю за подсказки

Доброго дня: имеем конструкцию типа: HTML <section id="ph_main" class="ph_main"> <div class="ph_wrapper ph_wrapper_col1"> <div class="ph_scroll"> <ul class="ph_strip"> <li><a style="height: 160px; width: 150px;" href="/IMG/1.jpg" title="Spring1" ><img src="/IMG/icon/1.jpg" /></a></li> <li><a style="height: 160px; width: 150px;" href="/IMG/2.jpg" title="Spring2" ><img src="/IMG/icon/2.jpg" /></a></li> <li><a style="height: 160px; width: 150px;" href="/IMG/3.jpg" title="Spring3" ><img src="/IMG/icon/3.jpg" /></a></li> <li><a style="height: 160px; width: 150px;" href="/IMG/4.jpg" title="Spring4" ><img src="/IMG/icon/4.jpg" /></a></li> </ul> </div> </div> </section> CSS .ph_wrapper { position: relative; background: #fff url(../images/paper.jpg) repeat center bottom; width: 170px; margin-top: 10px; padding: 20px 10px 50px; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: inset 1px 0 0 3px rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,0.05), inset 0 -25px 40px rgba(0,0,0,0.08); } .ph_wrapper:before { content: ''; position: absolute; width: 2px; left: 0; top: 3px; bottom: 3px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .ph_wrapper:after{ position: absolute; content: ''; background: rgba(192,227,232, 0.8) url(../images/scroll.png) no-repeat center center; width: 80px; height: 80px; top: 50%; left: 50%; margin: -75px 0 0 -35px; border-radius: 50%; z-index: 1000; } .touch .ph_wrapper:after, .ph_wrapper:hover:after { display: none; } .ph_title { padding: 5px; color: #374571; font-size: 14px; font-weight: 300; margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; } .ph_wrapper .a:focus { outline: thin dotted; } .ph_wrapper .a:active, .a:hover{ outline: 0; } .ph_scroll { position: relative; height: 100%; width: 150px; padding-right: 30px; overflow-y: scroll; overflow-x: hidden; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .touch .ph_scroll { padding-right: 0px; } ul.ph_strip { padding: 0; list-style: none; position: relative; margin: 0 auto; width: inherit; opacity: 0.8; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ph_wrapper:hover ul.ph_strip, .touch .ph_wrapper ul.ph_strip{ opacity: 1; } ul.ph_strip li { display: block; width: 150px; position: relative; margin-bottom: 7px; } ul.ph_strip li a { display: block; } ul.ph_strip li a:after { position: absolute; z-index: 999; height: 15px; text-align: center; width: 120px; left: 10px; padding: 5px; bottom: 10px; background: rgba(255,255,255,0.8); content: attr(title); font-size: 13px; text-shadow: 0 1px 1px rgba(255,255,255,0.9); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } ul.ph_strip a:onclick { width: 250%; /* до такого размера мы увеличили изображение*/ height: 250%; position: absolute; opacity: 1; /* прозрачность стала не нужна*/ z-index: 1; /* чтобы фотография разворачивалась поверх всех изображений*/ -moz-box-shadow: 0 0 15px 2px #000; -webkit-box-shadow: 0 0 15px 2px #000; box-shadow: 0 0 15px 2px #000; /* добавляем немного красоты */ -webkit-transition-property: width, height; /* делаем «сворачивание» изображения*/ -webkit-transition-duration: 2s; /* указываем, с какой скоростью нам надо увеличить изображение*/ -webkit-transition-delay: 0.3s; /* как долго будет думать браузер, перед тем, как развернуть фотографию*/ -moz-transition-property: width, height; -moz-transition-duration: 2s; -moz-transition-delay: 0.3s; -o-transition-property:width, height; -o-transition-duration: 2s; -o-transition-delay: 0.3s; cursor: default; } ul.ph_strip li img { display: block; box-shadow: 0 0 1px 1px #fff; } .ph_wrapper_col1 { height: 540px; float:left; margin-right: 5%; margin-left: 1%; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); /* -ms-transform: rotate(3deg);*/ transform: rotate(3deg); } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } все работает кроме вот этого: ul.ph_strip a:onclick { width: 250%; /* до такого размера мы увеличили изображение*/ height: 250%; position: absolute; opacity: 1; /* прозрачность стала не нужна*/ z-index: 1; /* чтобы фотография разворачивалась поверх всех изображений*/ -moz-box-shadow: 0 0 15px 2px #000; -webkit-box-shadow: 0 0 15px 2px #000; box-shadow: 0 0 15px 2px #000; /* добавляем немного красоты */ -webkit-transition-property: width, height; /* делаем «сворачивание» изображения*/ -webkit-transition-duration: 2s; /* указываем, с какой скоростью нам надо увеличить изображение*/ -webkit-transition-delay: 0.3s; /* как долго будет думать браузер, перед тем, как развернуть фотографию*/ -moz-transition-property: width, height; -moz-transition-duration: 2s; -moz-transition-delay: 0.3s; -o-transition-property:width, height; -o-transition-duration: 2s; -o-transition-delay: 0.3s; cursor: default; } также менял на focus -хоть бы хны. не меняется вообще. как открывалось в окне, так и открывается... а хотелось бы всплывающее окно подскажите что править надо и куда... чтобы работало... p.s. если можно, то на css, без js/jquery

Мастера, подскажите пожалуйста, скопировал код (картинка при наведении на текст). Не много ли там текста, может что-то убрать, в смысле не нужное, а то я тупо "скатал"??? Паралельно вопрос: как сделать, что бы картинки под текстом правой колонки оставались в зоне видимости? Они иногда вылезают вправо. Кто не понял, при наведении на название ткани появляется картинка. Спасибо! Забыл ссылку-то: http://jaluzi-rolety.com.ua/price.html#prvert

http://jsfiddle.net/xJWre/18/ Может еще не проснулся, не знаю, но что-то не могу придумать/вспомнить как в максимум два вложения сделать одинаковые границы от каждого края. Картинка, конечно же, больше изначального блока и наша задача ее НЕ масштабировать, а немного отцентрировать и обвести границей которая отступает от краев картинки на пару пикселей. PS. Возник вариант на box-shadow, но это слишком просто и в ИЕ7 не покатит. PSs. И с outline также не предлагать

Обрезается изображение облаков по контуру кнопки в IE10+. В остальных браузерах оно выходит за пределы кнопки, как и должно быть. Почему это происходит? http://cssdeck.com/labs/full/a7jvce0r

Здравствуйте! Кто-нибудь знает как написать скрипт который вставляет уголки к изображениям в определённом месте изображения, какого бы размера они не были? Я не знаю как тут вставлять картинки из компьютера, в правилах оформления не нашёл описания этого. Если кто нибудь обьяснит как это делать, то я вставлю картинки для более лёгкого понимания.

В общем вот сайт http://selection-studio.ru/maket5/ Там есть ленточки - они стоят криво 1 ленточка = 2 картинки Левая и Правая часть + по центру часть которая растягивается Делал сначала с помощью div - но фугас мне в глаз Float:left прижал их в левый край и не отрывал((( Сделал с помощью таблицы как сейчас - но в Опере есть щели между ними Попробовал отступы у таблицы убрать ничего не помогло((( В конце концов подвинул картинки с помощью margin-left:-10px; И ничего не вышло - Помогите!!

Подскажите, пожалуйста, как исправить вот этот глюк? (см. рисунок) http://clip2net.com/s/2Umh5 В Мозилле и Опере все отображается нормально, в Хроме показывает вот эту ненужную рамку, а в IE (как всегда) вообще кошмар. На IE мне вообще пофиг, но вот как сделать так, чтобы в Google Crome рисунок-ссылка тоже отображался нормально, без вот этой дурацкой серой обрамляющей рамки? Перерыл уже весь Интернет - везде один и тот же совет - в свойствах рисунка поставить border=0px Поставил этот border = 0 везде, где только можно и в свойствах DIV и в свойствах ссылок, и в свойствах рисунка - не помогает. Видимо это делается как-то иначе. Как? Ведь, теоретически это сделать как-то возможно! Вот на этой гугловской странице полно таких вот рисунков ссылок, без таких вот серых обрамляющик рамок вокруг картинок-ссылок. Вот так тоже уже пробовал - не помогло...

Доброе время суток. Столкнулся с проблемой: при выведении изображения внутри ссылки появляется ненужный отступ внизу. Вероятно тема не нова, в таком случае буду благодарен за ссылку на ресурсы. Код: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> a, span, div{ display: inline-block; border: 1px solid green; margin: 0; padding: 0; } img{ margin: 0; padding: 0; } </style> </head> <body> <a href="_foto/5.jpg"><img src='_foto/5.jpg'/></a> </body> </html>

Здравствуйте. Есть код <h3>Заголовок</h3><img src="../image.jpg"> <ul class="sidemenu"> <a href="#">Название ссылки</a></li> </ul> Подскажите, подалуйста, можно ли сделать так чтобы нижняя граница картинки была на одном уровне с низом текста "Заголовка"? Расположение картинки относительно текста справа. Заранее всем впасибо.

Доброго времени суток! Вопрос простой, но поставил в тупик. Нуждаюсь в вашей помощи. Так нужно: http://cl.ly/Lxfv Как есть сейчас: http://codepen.io/joe/pen/AnuEF У меня два вопроса: 1 – Почему длинная строка переносится сразу после картинки? 2 – Каким образом "прилепить" оченьдлиннуюстроку вверх, обратно к остальному тексту? Спасибо! ps: Пробовал использовать wordwrap($string,'­',true), но не смог придумать как определять ширину текста без моноширинного (ибо 40 символов в одном браузере это одно, а в другом уже другое). Пробовал шаманить с word-wrap, text-wrap и white-space, но, видимо, чего-то не понимаю ибо не удалось добиться адекватного результата.