X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
> Как уменньшить ширину аудиоплеера на HTML5
master-vek
master-vek
Topic Starter сообщение 31.10.2017, 15:03; Ответить: master-vek
Сообщение #1


При создании странички уже в конце работы решил вставить аудио отзывы от клиентов на плеерах html5.  В Мозилее всё крректно, а в Google  3 плеера не вмещаются по ширине.страницы.
манипуляции с полями, отступами не помогают - никакой реакции.  Посмотрел что пишут люди, оказывается, плеер в разных браузерах отображается по своему.  И советов по изменению размеров изображения нет, кроме одного упоминания о перенастройке скрипта браузера. в двух словах.  Со скриптами не дружу.  

В связи с этим вопрос, Как уменьшить ширину изображения аудиоплеера на HTML5  Посоветуйте, пож. кто что может.  Лучше без скриптов.  Только ширину!


0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
master-vek
master-vek
Topic Starter сообщение 31.10.2017, 23:05; Ответить: master-vek
Сообщение #2


Проблему решил, тему желательно удалить в связи с не актуальностью. Спасибо.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
BLIK
BLIK
сообщение 31.10.2017, 23:06; Ответить: BLIK
Сообщение #3


(master-vek @ 1.11.2017, 02:05) *
Проблему решил, тему желательно удалить

Зачем удалять тему?

Может вы решение напишите, вдруг кому тоже пригодится. 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
master-vek
master-vek
Topic Starter сообщение 1.11.2017, 1:20; Ответить: master-vek
Сообщение #4


Поясню. Дело в том, что во всех браузерах отображение плеера выглядит  по разному.    Просто подобрал отступ, который удовлетворяет два основных браузера, конечно выравнивание приблизительное. Можно раздвинуть ширину  страницы немного, лишь  бы плеера стали в ряд по горизонту. Потом они съезжают под низ при адаптации.
Главное, изначально выстроить в ряд по горизонту. Вот результат на странице: https://servis.kharkov.ua/
 В Мозилле отступы мне не нравятся, а в Гугле пойдёт.  Придётся поискать как подстроить боковые  отступы. Ауто и % не получается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 1.11.2017, 12:26; Ответить: ShowPrint
Сообщение #5


master-vek, заглянул в код ваших плееров, заодно и всего сайта.
Я бы блок плееров сверстал в виде списка, в виде:

<ul>
<li>
<audio>
</li
<li>
<audio>
</li
<li>
<audio>
</li
</ul>

При этом просто css-стилями можно обеспечить и адаптивность, и кроссбраузерность, и даже
( @ 31.10.2017, 18:03) *
убрать часть картинки с плеера кнопку со значком "СКАЧАТЬ"


Попробуйте разобраться. Если не получится, то как у меня будет немного свободного времени (сейчас запара) попробую набросать кусочек кода в песочнице...

И по коду в целом...
1. У вас творится некоторая "вакханалия" с заголовками: h1-h5-h3-h2 - такой порядок не обеспечивает ожидаемой от них пользы, так как идёт вразрез с тем назначением для которого они были созданы.
2. В продолжение темы заголовков мне абсолютно не понятен смысл конструкции

<h5>
<img>
</h5>

Заголовок в который обёрнута только картинка является абсолютно лишним и неоправданным
3. Абсолютно точно, на 200%, вы очень сильно переборщили с количеством тегов <strong>
4. Выделите отдельным цветом/стилями внутренние ссылки - о том что между картинками вверху находятся 4 ссылки догадаться может только экстрасенс.
5. Попробуйте поменять в своём сознании понимание блочной вёрстки. Понимаю что это происходит не сразу - сам это проходил. Переход с табличной на блочную вёрстку это не просто замена tr/td на div, скорее это принципиально иное формирование структуры всего кода в целом. То есть просто другой подход.
Схематично, для Вашего кода, при блочной вёрстке более уместна конструкция в следующем виде:

<div class="robo">
<p>...</p>
<p>...</p>
<div class="ssilka">
...
</div>
<p>...</p>
<p>...</p>
<img class="???">
<p>...</p>
<p>...</p>
<div class="ssilka">
...
</div>
<p>...</p>
<p>...</p>
</div>

Более активно используйте вложенность, нет необходимости в целом ряде открытия/закрытия "горизонтальных" областей:
  • открыли блок с основным стилем страницы

  • написали что нужно

  • внутри блока с основным стилем открыли дополнительный стилевой блок/элемент

  • написали что нужно

  • закрыли дополнительный и все стили вернулись к основным

Внутри дополнительных стилевых классов также можно вкладывать ещё и ещё другие вложенности, со своими стилями.
Безумно глубокой вложенность конечно не стоит делать, но именно когда начинаешь правильно использовать вложенность при блочной вёрстке начинаешь испытывать кайф о её применения. Именно в этот момент приходит понимание того, что табличная вёрстка - прошлый век. Сам через это прошёл  :)

ЗЫ. Прошу воспринять не как "критику", а как "подсказку" - каждый дро коддит, как хочет, и это его право.  :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
master-vek
master-vek
Topic Starter сообщение 1.11.2017, 12:56; Ответить: master-vek
Сообщение #6


ShowPrint,

Все ваши рекомендации очень интересны и  несут пользу этой страничке.  Моя недоработка связана с тем, что я самоучка и кроме того давненько не занимался  этой тематикой. А тут под вашим влиянием в комментариях пришлось волей неволей вникнуть в простейшую адаптивность.  У меня 2 года сайт на WORDPRESS и я забросил  вёрстку на HTML и CSS.
Про вложенность буду потихоньку исправляться.  Ваш пример и пояснения как пендель  для дальнейшей работы.     Благодарен за доходчивое  аргументирование и примеры.
У меня ещё должны быть странички аналогичные этой, так что тренировка неизбежна. 
Как  наработаю по вашим критериям, доложу на Ваш разбор. 

По всем вашим пунктам  проведу на странице корректировку.

Но, с тегом <strong>  что то не знаю.  как же мне показать посетителю ключевые слова.  Ведь, человек не будет читать  про все модели, ему нужна конкретная модель или неисправность. Вот здесь прошу подробнее.

В целом спасибо, сейчас скопирую весь ваш текст и  за работу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 1.11.2017, 13:33; Ответить: ShowPrint
Сообщение #7


master-vek, я тоже самоучка - книжки, справочники и личный опыт.

Как пример вёрстки аудиоплееров посредством списка можете посмотреть (и проверить адаптивность) у меня здесь, с той только разницей что вместо audio у меня video =)

(master-vek @ 1.11.2017, 15:56) *
Вот здесь прошу подробнее.

Помимо тега "стронг" есть ещё тег <b>, правда его обильное использование я также не стал бы рекомендовать. Почитайте про оба и поймите разницу. Можно загуглить например "разница между strong и b в html"
В целом есть два варианта решения:
Первый, на мой взгляд более правильный, отойти от "простыни" и сделать отдельные страницы по конкретным моделям/неисправностям и упор сделать на грамотную навигацию для того чтоб пользователь мог удобно найти то, что ему нужно.
Второй, более простой, оставляя "многабукафф" на одной странице: вместо strong ( или b) для выделения использовать тег span с определенными стилями. Например:

<head>
<style>
.boldText{font-weight:bold}
</style>
</head>
<body>
<p>Бла-бла-бла <span class="boldText">выделение</span> бла-бла-бла</p>
</body>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
master-vek
master-vek
Topic Starter сообщение 1.11.2017, 20:48; Ответить: master-vek
Сообщение #8


Рассматривал ваш сайт с большим интересом.   Если думать, что это сделано на базе самостоятельной подготовки, то это предел возможностей в моём понимании..
Функционал очень высок.  Придётся скопировать, с вашего разрешения,  часть кода применительно CSS  по видео.   Особенно понравилась строка         <video controls width='98%' poster='/video/small/BrotherEmbroidery.jpg' preload='none' id='video'>  Если я поменяю видео на аудио 98%.

Относительно жирности текста буду углубленно изучать.   По <span>  интересно - попробую.

Делать много страничник не в планах.  Соберу разные страницы по тематике воедино.

Спасибо за конкретные примеры.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 1.11.2017, 21:22; Ответить: ShowPrint
Сообщение #9


(master-vek @ 1.11.2017, 23:48) *
это сделано на базе самостоятельной подготовки
Так и есть
(master-vek @ 1.11.2017, 23:48) *
это предел возможностей
А это ошибка - благодаря подсказкам профи я надолго обеспечен работой по улучшению и модернизации. До совершенства ещё ох как далеко.

(master-vek @ 1.11.2017, 23:48) *
Придётся скопировать, с вашего разрешения,  часть кода
На здоровье, если бы прятал - не давал бы ссылку

Если будете делать вывод аудио плееров через список, то можно подобрать такую ширину элементов списка, чтоб кнопка "скачать" выходила за её пределы. Соответственно если этим элементам списка присвоить css-свойство overflow-x:hidden, то кнопки скачать не будет видно  ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
master-vek
master-vek
Topic Starter сообщение 1.11.2017, 22:01; Ответить: master-vek
Сообщение #10


Спасибо на добром слове и совете. Учту обязательно. 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1116 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2281 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3910 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3635 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1925 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 28.3.2024, 14:30
Дизайн