Search the Community

Адаптивное изображение не растягивается на всю ширину блока-родителя. Как это исправить? http://codepen.io/anon/pen/MwXKer

Добрый день, уважаемые форумчане! Наконец таки я нашел тот форум который искал. Для начала я представлюсь. Меня зовут Андрей, мне 24 года. Я выпускник ИрГТУ, специализация: Информационные системы и технологии. Живу и работаю в Иркутске. Работаю системным администратором, активно занимаюсь спортом Сижу я значит, работаю сис.админом и думаю..."А не попробовать ли мне в веб??" Ну значит, встал с печи и пошел. Пошел в веб Долго ли шел, коротко ли, но быстро наткнулся на ресурс https://htmlacademy.ru/ и начал его подгрызать потихоньку, да помаленьку. Для понимая всего и вся, озарила меня мысль чтения "всего и вся" и отправился я бороздить просторы интернета, в поисках различной-полезной информации. За библию был взят http://htmlbook.ru/. Изучаю его и по сей день. Прочитал множество различных статей на хабре, а так же статьи найденные напрямую через поисковые системы. Осилил книжку "HTML5 Недостающее руководство - Мэтью Макдональд"(сейчас на примете CSS 3.0 Недостающее руководство того же автора). Читаю и по сей день различные стать. Мои знания веб-разработки далеки от вершин, да и пожалуй далеки пока и от простых пригорков, но я настроен серьезно и готов работать и учиться, совершенствоваться в данной стезе ВЕБ Так же хочу сказать, что у меня есть сестренка, которая работает в веб-разработке уже 5 лет. На данный момент работает в фирме города Hong-kong, но времени помогать/наставлять меня на пусть истинный, у нее категорически мало Но все же иногда есть. Собственно у сестренки то, я и получил свое первое задание, свою первую страницу формата *.psd, которую и хочу представить Вашему вниманию. Очень жду ваших комментариев/отзывов/предложений по сделанной мною страничке. Для страницы сделал так же adaptive, под любое разрешение устройства, без break-point'ов. Надеюсь правильно, если не правильно - то не страшно. Переделаем в будущем. Прикладываю страничку. За ранее хочу сказать, что для корректной работы adaptiv'a требуется перезагрузить страничку, после того как изменили размеры окна браузера. Возможно это решается другим путем(без перезагрузки), но я пока его не осилил. Всем заранее спасибо! Ваш ход, форумчане http://filippovam.github.io/Robinzon/

del

Люди добрые, подскажите, как реализовать такую адаптацию хедера и навигации для адаптивного сайта (особенно , как перенести "подать заявку", личный кабинет и поиск после навигации на маленьких разрешениях?). Как вариант наверное можно делать 2 навигации и ява скриптом скрывать/отображать нужную? Или без отдельной мобильной версии сайта тут не обойтись?

Оцените плиз мою версточку Мне очень нужно знать ваше мнение.

Задача сверстать адаптивный сайт. Практического опыта верстки адаптивного дизайна у меня нет. Поэтому хотелось с вашей помощью разобраться и определиться, каким путем идти. Решила использовать принципы Bootstrap. Возникли принципиальные вопросы. .row {margin: 0 -15px;;} .container {padding: 0 15px;margin: 0 auto;}Объясните, пожалуйста, зачем сначала добавлять паддинги, а потом помещать содержимое в .row, у которой нивелируются эти отступы. Каково назначение .row вообще?

Всем доброго времени суток! Такая проблема: есть болванка сайта: дсп-мебель.рф На главной странице, при горизонтальном положении экрана, все отображается корректно, но при вертикальном положении экрана шапка сайта пропадает совсем....на других немногих страницах шапка остается на месте ( http://дсп-мебель.рф/mebel/mebel.html )! Хочу уточнить, что сия беда наблюдается только в браузерах типа dolphin, boat и встроенного в андроид! На мобильных браузерах типа хрома, оперы, файрфокс всё пучком - никаких проблем... Прошу помощи, так как с адаптивной версткой практически не знаком, код проверял-перепроверял, ошибки не смог найти, к сожалению. Всем заранее спасибо.

Прошу оценить адаптивную верстку Landing Page. Особое внимание прошу обратить на семантику кода. Старался верстать по концепции "progressive enhancement" + "First mobile". Спасибо за внимание! Ссылка: http://testmaket.tk.

Приветствую всех участников HTML - форума ! Поясню вопрос более подробно, в стиле задачи из учебника Дано: Адаптивная (Responsive) страница, в конце таблицы style.css прописаны @media queries под разные разрешения. Пример: ***Main Style*** h1 { padding-right: 20px; } p { margin-left: 10px; } @media queries (max-width: 991px) { h1 { padding-right: 10px; } p { margin-left: 5px; } } @media queries (max-width: 640px) { p { margin-left: 3px; } } Необходимо что-бы при просмотре с устройства попадающего под параметры последнего @media queries (max-width: 640px) у элемента h1 был задан атрибут padding-right со значением 10px как в предыдущем @media queries (max-width: 991px). Необходимо ли дублировать для этого стиль из одного @media queries в другой ? Я знаю что браузер читает и применяет стили последовательно, также есть разные приоритеты. Но как обстоят дела при открытии странички с других устройств ? Сначала браузер применяет Main Styles а потом сразу применяет нужный ему @media queries или все также последовательно ? Проще говоря кочуют ли стили из "верхних"(больших разрешений) @media queries в нижние(маленькие разрешения) или необходимо их дублировать ?

Помогите пожалуйста с вёрсткой макета на bootstrap 3. Есть макет, ширина которого в psd исходнике 1280px. В нём 12 колонок, каждая колонка по 93px и 11 gutter (промежутков) между колонками по 15px Получается = 12 x 93px + 11*15 = 1280px Как сделать такую сетку? Подскажите где почитать про это? Видимо нужно изменять стандартную сетку bootstrap...Покажите пожалуйста примеры, очень нужно

Здравствуйте! Есть у меня сайт, который был сделан во времена, когда никто не задумывался о необходимости создания мобильных (адаптивных) версий. Сейчас такое время пришло, и я хочу доработать сайт, чтобы его удобно было просматривать на мобильных устройствах. В частности, сейчас меня волнует проблема читабельности текстов. Например, на моем iPhone 4, текст прочитать невозможно. Хочу эту проблему решить в первую очередь. В верстке я решила ничего глобально не менять, а только дописать стили для различных разрешений с помощью media queries. Вопрос: какие единицы измерения следует использовать для достижения поставленных целей? Пока есть такой вариант: body {font-size:100%;}p {font-size: 1.25em;}Но, читая книгу Тима Кедлека "Адаптивный дизайн", возникли сомнения. например, там написано о том, что у различных устройств размер шрифта по умолчанию сильно разнится - у некоторых может достигать 26px. Не окажется ли поведение моего сайта непредсказуемым с таким подходом?

Для нормально отображения сайта на всех устройствах можно сделать адаптивную верстку css здесь .

Задача: сделать карту изображения для масштабируемой растровой картинки. Насколько я понял нужно: 1. использовать canvas 2. Загрузить в него картинку 3. Как-то пропорционально картинке масштабировать canvas под экран (использовать еще одно прозрачное изображение с пропорциями картинки? картинку делать бекграундом? Что-то с ходу ничего не получается.) 4. Нарисовать карту в прозрачных svg 5. Наложить svg поверх и задать им ссылки Плотно еще не разбирался, но у меня сомнения - можно ли это вообще сделать?

Здравствуйте, уважаемые посетители форума. Замучался решать вопрос, он следующий. У меня есть скрипт ротатора картинок, который меняет картинки по времени (делает это через 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>

Нужен совет, цель такая: Есть блоки, которые должны располагаться друг за другом, т.е. 1, 2, 3... Все они должны растягиваться и занимать одинаковую ширину. Есть некий минимальный размер блока, если в строке помещается 3 блока с минимальной шириной - они должны быть в одной строке с ~33% шириной каждый, если не помещается, то 2 блока с шириной ~50% от допустимой ширины родительской области, а третий (и четвертый) - переноситься на новую строку и иметь ширину равную верхнему блоку. Блоков может быть больше чем 3, так нужно будет обрабатывать все. Единственное, что будет неизменным - количество блоков в одной строке от 1 до 3. Заранее спасибо

Добрый вечер, Разрабатываю сайт, одним из основных требований к которому есть адаптивная верстка. Все довольно просто, но есть проблема - на определенной ширине дисплея нужно превращать меню в кастомизированый dropdown. Напрашивается подключение плагина и мониторинг текущей ширины дисплея через js, но кажется, что это решение "с душком". Подскажите, возможно ли реализовать это более "чисто", и если да, то как? Вот меню, над которым оперирую. С уважением, Михась

Готов заплатить тому, кто объяснит, почему в Файрфоксе такая фигня* Пруф *Имеется ввиду, что блок сдвигается наверх, при прокрутке вниз. Точнее все блоки, включая body