Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Оптимизация изображений на сайте |
Оптимизация изображений на сайте |
Специалисты, помогите или направьте на нужный раздел форума.
Редактировал текст высвечивающийся на первом слайде главной страницы и теперь картинка обрезалась и сдвинулась. А должно быть по другому (скрины приложил) Код вот такой <div id="slider"> <div class="slide"> <div class="part-l"> <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div><div class="slide-t"> <a href=""><img src="/.s/t/1111/slide1.jpg" alt=""></a></div></div> </div> <div class="part-r"> <div class="part-i slide-d"> <div class="slide-st">лучшее решение ваших задач</div> <div class="slide-tx">мы готовы предоставить вам лучшее программное обеспечение от более чем 100 производителей.</div> <a href="" class="read-m">read more</a> </div> </div> <div class="clr"></div> </div> <div class="slide"> <div class="part-l"> <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div> <a href=""><img src="/.s/t/1111/slide2.jpg" alt=""></a> </div> </div> <div class="part-r"> <div class="part-i slide-d"> <div class="slide-st">посредники вашего процветания</div> <div class="slide-tx">мы готовы предложить Вам одни из самых низких цен для достижения Ваших целей</div> <a href="" class="read-m">read more</a> </div> </div> <div class="clr"></div> </div> <div class="slide"> <div class="part-l"> <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div> <a href=""><img src="/.s/t/1111/slide3.jpg" alt=""></a> </div> </div> <div class="part-r"> <div class="part-i slide-d"> <div class="slide-st">бережем ваше время</div> <div class="slide-tx">мы готовы связаться с вами по всем доступным каналам связи (с которыми вы можете ознакомиться в разделе "обратная связь") и решить ваши задачи в кратчайшие сроки</div> <a href="" class="read-m">read more</a> </div> </div> <div class="clr"></div> </div> </div> <script type="text/javascript"> $(function() { (function doSlider() { if ($.isFunction($.fn.flexslider)) { $('#slider').flexslider({ selector: ".slide", slideshowSpeed: 5000, pauseOnHover: true, directionNav: false }); } else { setTimeout(doSlider, 300); } }()); }); </script> Прикрепления:
8960049.jpg
(102.2 Kb)
·
5058068.jpg
(91.1 Kb)
|
Должно быть вот так: Код <div id="slider"> <div class="slide"> <div class="part-l"> <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div> <a href=""><img src="/.s/t/1111/slide1.jpg" alt=""></a> </div> </div> <div class="part-r"> <div class="part-i slide-d"> <div class="slide-st">лучшее решение ваших задач</div> <div class="slide-tx">мы готовы предоставить вам лучшее программное обеспечение от более чем 100 производителей.</div> <a href="" class="read-m">read more</a> </div> </div> <div class="clr"></div> </div> <div class="slide"> <div class="part-l"> <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div> <a href=""><img src="/.s/t/1111/slide2.jpg" alt=""></a> </div> </div> <div class="part-r"> <div class="part-i slide-d"> <div class="slide-st">посредники вашего процветания</div> <div class="slide-tx">мы готовы предложить Вам одни из самых низких цен для достижения Ваших целей</div> <a href="" class="read-m">read more</a> </div> </div> <div class="clr"></div> </div> <div class="slide"> <div class="part-l"> <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div> <a href=""><img src="/.s/t/1111/slide3.jpg" alt=""></a> </div> </div> <div class="part-r"> <div class="part-i slide-d"> <div class="slide-st">бережем ваше время</div> <div class="slide-tx">мы готовы связаться с вами по всем доступным каналам связи (с которыми вы можете ознакомиться в разделе "обратная связь") и решить ваши задачи в кратчайшие сроки</div> <a href="" class="read-m">read more</a> </div> </div> <div class="clr"></div> </div> </div> <script type="text/javascript"> $(function() { (function doSlider() { if ($.isFunction($.fn.flexslider)) { $('#slider').flexslider({ selector: ".slide", slideshowSpeed: 5000, pauseOnHover: true, directionNav: false };); } else { setTimeout(doSlider, 300); } }()); };); </script> То бишь вот это у вас лишнее: <div class="slide-i"> <div class="slide-t">PERFECT BUSINESS</div> <a href=""><img src="/.s/t/1111/slide1.jpg" alt=""></a> </div> Сообщение отредактировал Likbezz_Flesh - Среда, 19 Апр 2017, 09:13:50
|
Добавлено (08 Май 2017, 17:37:52) --------------------------------------------- Вроде наоборот, title - это всплывающая подсказка, а alt - сообщение, которое появляется на месте отсутствующей картинки. Сообщение отредактировал Avgust7203 - Понедельник, 08 Май 2017, 17:39:42
|
Можно-ли реализовать так что бы он исчезал если ширина окна браузера меньше 1024px? Назначить логотипу класс, например logotype и прописать в стилях: Код @media screen and (max-width: 1024px) { .logotype{display:none;} } Сообщение отредактировал Likbezz_Flesh - Четверг, 11 Май 2017, 11:55:21
|
Назначить логотипу класс, например logotype и прописать в стилях:@media screen and (max-width: 1024px) { .logotype{display:none;} } А определенный промежуток тоже можно назначить? Допустим что б до 700px был логотип, а после 700px пропадал, и после 1024px снова появился Добавлено (11 Май 2017, 14:18:44) Цитата Likbezz_Flesh ()Назначить логотипу класс, например logotype и прописать в стилях:@media screen and (max-width: 1024px) { .logotype{display:none;} } А определенный промежуток тоже можно назначить? Допустим что б до 700px был логотип, а после 700px пропадал, и после 1024px снова появился Всё, разобрался сам, если кому надо : Код @media screen and (min-width: 700px) and (max-width: 1024px) { .logotype{display:none;} } |
| |||