Search the Community

Как переместить картинку слева от категории списка? <ul class="dropdown-menu" data-navigation="dropdown-menu"> {% category_tree depth=2 as tree_categories %} <li><a tabindex="-1" href="{% url 'catalogue:index' %}">{% trans "All products" %}</a></li> {% if tree_categories %} <li class="divider"></li> {% for tree_category, info in tree_categories %} {% if info.has_children %} <li class="dropdown-submenu"> {% thumbnail tree_category.image "20x20" upscale=False as thumb %} <img class="img-thumbnail" src="{{ thumb.url }}" alt="{{ category.name }}" title="{{ category.name }}" style="right: 10px;"/> {% endthumbnail %} <a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a> <ul class="dropdown-menu"> {% else %} {% thumbnail tree_category.image "20x20" upscale=False as thumb %} <img class="img-thumbnail" src="{{ thumb.url }}" alt="{{ category.name }}" title="{{ category.name }}" style="right: 10px;"/> {% endthumbnail %} <li><a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a></li> {% endif %} {% for close in info.num_to_close %} </ul></li> {% endfor %} {% endfor %} {% endif %} <li class="divider"></li> {% block nav_dropdown_extra_items %} <li><a href="{% url 'offer:list' %}">{% trans "Offers" %}</a></li> {% endblock %} </ul> <li> <a href="/contacts/"> {% trans "Contacts" %} </a> </li> {% block nav_extra %} {% endblock %} </ul>

Добрый день форумчане! Это мой второй сайт (для себя) http://кухонный-мир.рф/ Почему картинки в блоке №3 начинают появляться (и появляються) раньше чем фоновая картинка в блоке №1 ???? 1. Я разделил картинку в блоке №1 на маленькие кусочки 2. Я уменьшил до минимума размер картинки из блока №1 (пока только для широких экранов) 3. Пробовал размещать картинку из блока №1 в других папках и менял названия НО всё бесполезно! ХОТЯ конечно стал намного быстрее грузиться блок №1 4. Я установил скрипт lazyload, и вроде картинки в конце сайта действительно стали в конце грузиться, но всё равно картинки из блока №3 идут первыми. Я даже установил в этом скрипте параметр который загружает сначала картинки 20kbt, и только потом прочие. НО даже при этом картинки из блока №3 идут при загрузке первыми! код не получется оформить правильно, поэтому цитатой. Я конечно могу уже работать и так. Только картинки из блока №2 оптимизирую ещё. Но просто уже интересно как же так, почему и можно ли что то сделать. Стили картинки из блока №1 (эта картинка разбита на кусочки) Стили картинок из блока №3 P.S. если возможно, то ответы как для совсем для начинающего. Я вообще не изучал html css, а всё сделал через вопросы в google, и это впервые обращаюсь к форуму.

В общем у меня такой шаблон что, на главной странице анонса постов видно только тайтл записи и миниатюра. И чтобы массово сделать каждому посту миниатюры, мне пришлось прибегнуть к такому действию что я в каждую запись добавлял в начало поста картинку, которая будет миниатюрой и потом с помощью плагина Auto Post Thumbinial генерировал массово миниатюры. После генерации как уже понятно, картинки мне больше не нужно, там должен остаться только тайтл и iframe с видео (это все содержании статей). Вопрос как удалить массово все эти картинки из каждых постов и оставить только iframe? Скрин содержании поста из админки: http://joxi.ru/l2ZN4GqSxMvg2J Или как удалить все кроме определенного куска кода, в моем случает это код iframe - <iframe src='http://flashservice.xvideos.com/embedframe/4156360'frameborder=0 width=510 height=400 scrolling=no></iframe>

Всем привет. Сверстал простенький шаблон с минимум функционала и сейчас его адаптирую под Wordpress, возникло несколько вопросов из отсутствия опыта. Весь процесс моей адаптации шаблона идет с помощью этой статьи: http://ruseller.com/lessons.php?rub=40&id=482, за что ребятам отдельное спасибо. Жаль что у меня шаблон немного другого вида и функций. Вроде почти все коды прописал, но не знаю какую функцию прописать что бы появилось в админке добавление превью-картинки которая будет показана на главной вместе с тайтлом. Вот примерно так будет выглядеть материалы на главной как тут: http://igroflot.ru/all/2/

Помогите пожалуйста. Я хочу научиться верстке. Хочу попробовать сверстать вот это http://images.wikia.com/dragonvale/images/e/e8/Space_invader.jpg Не используя картинки и таблиц, как это лучше сделать?

Подскажите, пожалуйста, js, который при нажатие на картинку ее увеличивает, при повторном нажатии уменьшает.

Всем привет. Такая проблема: на сайте есть блок с div с картинками, расположен по горизонтали (через float:left, ширина задается в процентах). Нужно чтобы картинка полностью заполняла див. Проблема в том, что картинки есть у которых ширины больше высоты и наоборот соответственно. При уменьшении масштаба ширина (она в процентах) тоже уменьшается, а высота остается прежней, т.е. вытягивается по вертикали. На данный момент реализовано так http://jsfiddle.net/u424m8fh/ - попробуйте уменьшить масштаб. Может есть у кого мысли как можно сделать так, что бы картинка заполняла див не по мах размерам - width и height, а по минимальным?

Добрый день. Ребят помогите пож сделать красивый код. Внизу картинки http://img.ii4.ru/images/2014/09/26/534790_kiss_25kb.jpg хочу сделать их в ряд http://alyansoil.com/konvejernye-lenty/konvejernaya-shaxtnaya-lenta.html но какой то стиль мешает. как все красиво сделать? получается вот такой вариант http://img.ii4.ru/images/2014/09/26/534791_kiss_35kb.jpg но код вообще жесток <p><a href="konvejernye-lenty/konvejernye-lenty-obshhego-naznacheniya.html"><img title="конвейерная лента общего назначения" src="images/icons/lenta-konvejernaya-obshhego-naznacheniya.png" alt="общего назначения" width="100" height="100" /></a><a style="line-height: 1.5em;" href="kupit-transporternujy-lenta/lenta-transporternaya-pischevaya.html"><img class="justifyleft" title="лента пищевая" src="images/icons/lenta-konvejernaya-rezinotkanevaya-pishhevaya.png" alt="пищевая транспотерная лента" width="106" height="106" /></a><a style="line-height: 1.5em;" href="konvejernye-lenty/teplostojkaya-konvejernaya-lenta.html"><img src="images/icons/teplostojkaya-konvejernaya-lenta.png" alt="теплостойкая лента" width="76" height="101" /></a><a style="line-height: 1.5em;" href="kupit-transporternujy-lenta/lenta-transporternaya-shahtnaya.html"><img title="шахтная лента" src="images/icons/lenta-konvejernaya-shaxtnaya.png" alt="шахтная конвейерная лента" width="107" height="109" /></a><a style="line-height: 1.5em;" href="kupit-transporternujy-lenta/lenty-transpoternye-kislotoshhelochestojkie.html"><img title="лента кислотостойкая" src="images/icons/lenta-konvejernaja-ksha.png" alt="КЩ" width="101" height="101" /></a></p><p class="justifyleft">Общего назначения Пищевая Теплостойкая Шахтная Кислощелочестойкая</p>

Здравствуйте, уважаемые посетители форума. Замучался решать вопрос, он следующий. У меня есть скрипт ротатора картинок, который меняет картинки по времени (делает это через ul). Как сделать так, чтобы картинки которые он выводит НИКОГДА не выходили за границы div'а? И еще вопрос. Мне нужно чтобы все это было адаптивно к экрану (будет показываться на full HD, но была бы возможность посмотреть с 17-24"(Radmin)). Если вас не затруднит, помогите пожалуйста. Код прилагаю. В нем о размещении элементов даже не пахнет (много раз исправлял). Нужен такой вариант как во вложении (картинке), чтобы так было на всех экранах (ток картинки по-больше в высоту ну и выровняно). Понимаю, что прошу много, если это трудно - подскажите в какую сторону копать, я плох в css и js. Спасибо огромное тем, кто откликнется P.S. Картинка может быть как вертикальная, так и горизонтальная (на схеме показано) <?php error_reporting(E_ALL); header('Content-Type: text/html; charset=utf-8'); include "scripts/config.php"; $errors=connect(); $sql=mysql_query('SELECT * FROM `index`') or die (mysql_error()); if(mysql_num_rows($sql) <= 0) echo 'ошибка'.$errors; $row=mysql_fetch_assoc($sql); $path=$row['images']; $count=count(glob('images/'.$path.'*.jpg')); if($count == 0){?> <img src="default/1.jpg" width="500" height="313"> <?php exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="clock/assets/css/style.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#rotator { float:left; width: 800px; max-width: 75%; } div#rotator img { max-width: 100%; height: auto; } div#rotator ul{ position: relative; list-style: none; padding: 0px; } div#rotator ul li { position: absolute; list-style: none; } div#rotator ul li.show { z-index:500; } .clock { float: right; } .main { float: right; } .marq{ position: absolute; bottom: 0; right: 0; left: 0; } .text { color: blue; font-size:95px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function theRotator() { var time="<?php echo $time;?>"; // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд setInterval('rotate()',time); } function rotate() { // Берем первую картинку var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); // Берем следующую картинку, когда дойдем до последней начинаем с начала var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // Расскомментируйте, чтобы показвать картинки в случайном порядке // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); // Прячем текущую картинку current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { // Запускаем слайдшоу theRotator(); }); </script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> <script src="clock/assets/js/script.js"></script> </head> <body> <div id="rotator" align="center"> <ul> <li class="show"><img src="<?php echo 'images/'.$row['images'].'1'.$type; ?>" class="img_main" /></li> <?php for ($i=2;$i<=$count;$i++){?> <li><img src="<?php echo 'images/'.$row['images'].$i.$type; ?>" class="img_main" /></li> <?php } ?> </ul> </div> <div class="main"> <img src="<?php echo 'config_images/'.$row['logo']; ?>" class="main"> </div> <div class="clock"> <?php include "clock/index.html"; ?> </div> <div class="marq"> <marquee direction="left" loop="-1" behavior="scroll" scrolldelay="1" scrollamount="10"> <span class="text"><?php echo $row['marquee'];?></span> </marquee> </div> </body> </html>

откройте вот эту картинку она не открывается, а в firefox'е пишет: Изображение не может быть показано, так как оно содержит ошибки. вот ее код: header("Cache-control: no-cache"); header("Content-type: image/gif"); $chars = md5(rand()).md5(rand()).md5(rand()).md5(rand()); $length = 6; $numChars = strlen($chars); $str = ''; for($i = 0; $i < $length; $i++) { $str .= substr($chars, rand(1, $numChars) - 1, 1); } session_start(); $_SESSION["captchacode"] = $str; session_destroy(); $img = imagecreatetruecolor(150, 70); $imgbg = imagecolorallocate($img, rand(0, 255), rand(0, 255), rand(0, 255)); imagerectangle($img, 0, 0, 150, 70, $imgbg); imagegif($img); Как это исправить? P.S. Версия GD - bundled (2.0.34 compatible)

Всех приветствую. Сразу скажу, я программист, но в веб-программировании новичок. Я хочу сделать просмотровщик картинок (скриншотов) на CSS без Javascript и jQuery. Перелопатил интернет на эту тему и большую часть подчерпнул из этого блога, а конкретно, из этой темы. Вот, что у меня получилось: Не устраивает режим просмотра. Что требуется: 1). Идеальный вариант. 1.1). Картинка меняет размеры (сохраняя пропорции), чтобы полностью входить на страницу по ширине и высоте. Картинка не растягивается более оригинального размера. 1.2). По клику на картинке, она принимает исходный размер, а на экране появляются горизонтальная и вертикальная полосы прокрутки. 1.3). В п 1.1 и 1.2 картинка не может прижаться к краю экрана, то есть отступы должны быть не менее установленного. 2). Приемлемый вариант. 2.1). Картинка меняет размеры (сохраняя пропорции), чтобы полностью входить на страницу по ширине. Если картинка не входит по высоте, появляется вертикальная полоса прокрутки. Желательно, чтобы картинка не растягивалась более оригинального размера. 2.2). По клику на картинке, она принимает исходный размер, а на экране появляются горизонтальная и вертикальная полосы прокрутки. 2.3). В п 2.1 и 2.2 картинка не может прижаться к краю экрана, то есть отступы должны быть не менее установленного. 3). Фиговенький вариант. 3.1). Картинка имеет исходный размер и полосы прокрутки. Картинка не прижимается к краю экрана, и имеет отступы. P.S. Пробовал сделать то же самое на таблицах, но тоже не получилось... Пинать можно, даже нужно )

Здравствуйте! Помогите с картинками. В Firefox, почему-то браузер читает ссылку с обратным слешем: _http://www.pizzacity.dp.ua/img/1000x667\Neapol.jpg Хотя Хром и IE видят правильно: _http://www.pizzacity.dp.ua/img/1000x667/Neapol.jpg Никак не получается. Помогите новичку))